@keyframes opacity-hide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes opacity-show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes opacity-show03 {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

@keyframes bounce-in-right {
    0% {
        transform: translateX(2000px);
    }
    60% {
        transform: translateX(-10px);
    }
    80% { transform: translateX(0px); }
    100% { transform: translateX(0); }
}

@keyframes bounce-in-right-reverse {
    0% {
        transform: translateX(2000px) scaleX(-1);
    }
    60% {
        transform: translateX(-10px)  scaleX(-1);
    }
    80% { transform: translateX(0px)  scaleX(-1); }
    100% { transform: translateX(0)  scaleX(-1); }
}

@keyframes bounce-out {
    0% {
        transform: translateX(0px);
    }
    40% {
        transform: translateX(-10px);
    }

    100% { transform: translateX(2000px); }
}

@keyframes bounce-mission {
    0% {
        transform: translateX(0px) scale(1);
    }

    10% {
        transform: scale(1.05);
    }

    20% {
        transform: scale(1);
    }

    80% {
        transform: translateX(0px);
    }

    90% {
        transform: translateX(-10px);
    }

    100% { transform: translateX(2000px)}
}

@keyframes ticker {
    from { transform : translateX(0%) }
    to   { transform : translateX(-100%) }
}

@keyframes ticker-reverse {
    from { transform : translateX(0%) }
    to   { transform : translateX(100%) }
}

@keyframes attack {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes attack-reverse {
    0% {
        transform: translateX(0%) scaleX(-1);
    }

    50% {
        transform: translateX(-50px)  scaleX(-1);
    }

    100% {
        transform: translateX(0%)  scaleX(-1);
    }
}

@keyframes chest-reward-transform {
    from {
        transform: translateY(-150px) scale(0);
    }

    to {
        transform: translateY(0px) scale(1);
    }
}

@keyframes bounce-in-top {
    0% {
        transform: translateY(-2000px);
    }
    60% {
        transform: translateY(-10px);
    }
    80% { transform: translateY(0px); }
    100% { transform: translateX(0); }
}

@keyframes bounce-in-top-grave {
    0% {
        transform: translateY(-2000px) translateX(-50%);
    }
    60% {
        transform: translateY(-10px) translateX(-50%);
    }
    80% { transform: translateY(0px) translateX(-50%); }
    100% { transform: translateX(0) translateX(-50%); }
}

@keyframes bounce-alert {
    0% {
        transform: translateY(-1000px);
    }
    10% {
        transform: translateY(10px);
    }
    20% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(0px);
    }
    90% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-1000px);
    }
}

@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}

@keyframes swipe {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-30px);
    }
}

@keyframes rotate360 {
    0% {
    transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate10-yo-yo {
    0% {
        rotate: 0deg;
    }

    50% {
        rotate: 10deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes rotate-10-yo-yo {
    0% {
        rotate: 0;
    }

    50% {
        rotate: 10deg;
    }

    100% {
        rotate: 0;
    }
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1.2);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes zoom-in-zoom-out002 {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.02, 1.02);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes zoom-in-zoom-out-reverse {
    0% {
        transform: scale(-1, 1);
    }
    50% {
        transform: scale(-1.2, 1.2);
    }
    100% {
        transform: scale(-1, 1);
    }
}

@keyframes scale0_100 {
    0% {
        transform: scale(0, 0);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes scale100_0 {
    0% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(0, 0);
    }
}

@keyframes scale0_110_100 {
    0% {
        transform: scale(0, 0);
    }
    90% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes drop-chest {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, 119px);
    }

    80% {
        transform: translateY(-202px) translateX(120px) scale(1);
    }

    100% {
        transform: translateY(-250px) translateX(120px) scale(0.1);
    }
}

@keyframes floating {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes item-improve-move {
    from {
        transform: scale(1) translateY(0px);
    }

    to {
        transform: scale(1.5) translateY(40px);
    }
}

@keyframes item-improve-pump {
    0% {
        transform: scale(1.5) translateY(40px);
    }

    50% {
        transform: scale(1.7) translateY(40px);
    }

    100% {
        transform: scale(1.5) translateY(40px);
    }
}

@keyframes item-improve-note {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-140px);
        opacity: 0;
    }
}

@keyframes drop-collection {
    0% {
        transform: scale(0) translateY(0);
    }

    10% {
        transform: scale(1) translateY(50px) rotate(0deg);
    }

    30% {
        transform: rotate(-180deg);
    }

    50% {
        rotation: 350deg;
        transform: rotate(350deg)  translateX(0) translateY(0);
        width: 60px;
        height: 89px;
    }

    70% {
        width: 0px;
        height: 0px;
        transform: scale(1) translateX(132px) translateY(-100px);
    }

    100% {
        transform: translateX(132px) translateY(-100px);
        width: 0px;
        height: 0px;
    }
}

@keyframes drop-item {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(100deg) scale(1);

    }

    100% {
        transform: rotate(200deg) scale(0);
    }
}

@keyframes collection-button {
    0% {
        right: -100px;
    }

    20% {
        right: 20px;
    }

    60% {
        transform: scale(1);
    }

    80% {
        transform: scale(1.1);
    }

    90% {
        right: 20px;
    }

    100% {
        right: -100px;
    }
}

@keyframes blink-mint {
    0%,75%{
        box-shadow:0 0 10px #1bd2ff;
    }
    50%{
        box-shadow:0 0 10px #c6f4ff;
    }
    100%{
        box-shadow:0 0 10px #24d1fb;
    }
}

@keyframes options-update {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    60% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

@keyframes character-idle {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(0.985);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes battle-kill-animation {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    10% {
        opacity: 1;
        transform: scale(1.2);
    }

    30% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        transform: translateY(-100px);
        opacity: 0;

    }
}

@keyframes vertical-shaking {
    0% { transform: translateY(0) }
    25% { transform: translateY(5px) }
    50% { transform: translateY(-5px) }
    75% { transform: translateY(5px) }
    100% { transform: translateY(0) }
}

@keyframes right-arrow-shaking {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(2px);
    }

    20% {
        transform: translateX(0px);
    }

    30% {
        transform: translateX(2px);
    }

    40% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes ring {
    0% { transform: rotate(0); }
    1% { transform: rotate(4deg); }
    3% { transform: rotate(-3deg); }
    5% { transform: rotate(4deg); }
    7% { transform: rotate(-5deg); }
    9% { transform: rotate(3deg); }
    11% { transform: rotate(-3deg); }
    13% { transform: rotate(4deg); }
    15% { transform: rotate(-3deg); }
    17% { transform: rotate(2deg); }
    19% { transform: rotate(-3deg); }
    21% { transform: rotate(2deg); }
    23% { transform: rotate(-2deg); }
    25% { transform: rotate(2deg); }
    27% { transform: rotate(-2deg); }
    29% { transform: rotate(1deg); }
    31% { transform: rotate(-1deg); }
    33% { transform: rotate(1deg); }
    35% { transform: rotate(-1deg); }
    37% { transform: rotate(1deg); }
    39% { transform: rotate(-1deg); }
    41% { transform: rotate(1deg); }

    43% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

@keyframes dots {
    0%, 20% {
        content: ".";
    }
    40% {
        content: "..";
    }
    60% {
        content: "...";
    }
    80%, 100% {
        content: "";
    }
}


.options-update-animation {
    animation: 1.5s options-update linear forwards;
}

.blink-mint {
    animation: blink-red 2s linear infinite;
}

.collection-button-animation {
    animation: 2s collection-button linear forwards;
}

.drop-collection-animation {
    animation: 2s drop-collection linear forwards;
}

.item-improve-note1 {
    animation: 1s item-improve-note forwards;
    opacity: 0;
}

.item-improve-note2 {
    animation: 1s item-improve-note forwards;
    animation-delay: 1s;
    opacity: 0;
}

.item-improve-note3 {
    animation: 1s item-improve-note forwards;
    animation-delay: 2s;
    opacity: 0;
}

.anim-item-improve-move {
    animation: 1s item-improve-move forwards ;
}

.anim-item-improve-pump {
    animation: 1s item-improve-pump forwards;
    animation-iteration-count: 3;
}

.anim-floating {
    transform: translatey(0px);
    animation: floating 6s ease-in-out infinite;
}

.anim-zoom-in-zoom-out {
    animation: zoom-in-zoom-out 1s linear forwards;
}

.anim-shake-1s {
    animation: shake 1s;
}

.anim-shake-02s {
    animation: shake 0.2s;
}



body {
    min-height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #060606;
    font-size: 14px;
    /*overscroll-behavior-y: none;*/
    -ms-touch-action: auto!important;
    touch-action: auto!important;
    max-width: 600px;
    margin: 0 auto;
    font-family: "Nunito", sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
}

@media (orientation: landscape) and (max-height: 600px) {
    body {
        max-width: 400px;
    }

    #menu-page .index-left-buttons, #menu-page .index-buttom-buttons {
        transform: scale(0.8);
    }

    #menu-page .index-menu-title {
        transform: scale(0.8);
        transform-origin: top left;
    }

    .ship-container {
        display: none;
    }

    .index-menu-title .title {
        font-size: 7px !important;
    }
}



html, div, span, h1, h2, h3, h4, h5, h6, form, p, img, ul, li {padding: 0;margin: 0;}
table {border: 0;border-collapse: collapse;}
td {
    word-break: break-all;
}

ul, li {
}

img {border: 0;vertical-align: middle;max-width: 100%;}

input, textarea, select {
    border-radius: 8px;
    width: 100%;
    min-height: 42px;
    color: #43536C;
    border: 2px solid #ecf0f4;
    box-sizing: border-box;

}

input[type="submit"].no-styles, button.no-styles {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    width: auto;
    cursor: pointer;
    outline: none;
    /*  slider progress trick  */
    overflow: hidden;
    border-radius: 16px;
    min-height: 14px;
    padding: 0;
    border: none;
    transition: .2s;
    height: 14px;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
    height: 18px;
    background: #c6c8e1;
    border-radius: 16px;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
    height: 18px;
    background: #c6c8e1;
    border-radius: 16px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #ff9e39;
    /*  slider progress trick  */
    box-shadow: -407px 0 0 400px #ff9e39;
}


/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #ff9e39;
    /*  slider progress trick  */
    box-shadow: -407px 0 0 400px #f50;
}

a, a:visited, a:focus, a:active {
    text-decoration: none;
    font-weight: bold;
    color: #46cbff;
}

a {
    -webkit-touch-callout: none; /* отключает callout меню на iOS */
    -webkit-user-select: none;   /* отключает выделение */
    user-select: none;
}

input, textarea {
    padding-left: 10px;
    box-sizing: border-box;
}

input.answer-color, textarea.answer-color {
    color: #009fff;
}

.input-with-icon input {
    padding-left: 40px;
    box-sizing: border-box;
}

#game-container {
    width: 100%;
    background-color: white;
    min-height: 100%;
    position: relative;
}

#page-with-header-and-navig {
    height: calc(-140px + 100vh);
    height: calc(-140px + 100dvh);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

#page-with-title {
    height: calc(-49px + 100vh);
    height: calc(-49px + 100dvh);
    overflow-y: auto;
}

.center {
    margin: 0 auto;
    text-align: center;
}

.small {
    font-size: 10px;
}

.pointer {
    cursor: pointer;
}

.inline-block {
    display: inline-block;
}

.bold {
    font-weight: bold;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.fs12 {
    font-size: 12px;
}

.fs10 {
    font-size: 10px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.mr8 {
    margin-right: 8px;
}

.clear {
    clear: both;
}

.white {
    color: white;
}

.color-red {
    color: #f86161 !important;
}

.color-green {
    color: #4acd5c !important;
}

.color-quality1 {
    color: #b1c3cd;
}

.color-quality2 {
    color: #00c36a;
}

.color-quality3 {
    color: #4a9eff;
}

.color-quality4 {
    color: #ff92fe;
}

.color-quality5 {
    color: #fdc626;
}

.color-quality6 {
    color: #ff8661;
}

.gray0 {
    color: #C5C8D0;
}

.orange, a.orange, a.orange:visited {
    color: #FD9643;
}

.grey, a.grey, a.grey:visited {
    color: #9EAAB4;
}

.p5 {
    padding: 5px;
}

.dot-red {
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 8px;
    display: inline-block;
}

.bounce {
    animation: bounce2 2s ease infinite;
}



.index-container {
    background-color: #060606;
    height: 100vh;
    height: 100dvh;
}

.index-bg {
    background-image: url(/images/bg/index.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 100%;
}

.buttons-rectangle-container .button-rectangle {
    margin-top: 5px;
}

.button-rectangle {
    height: 47px;
    position: relative;
    line-height: 46px;
    cursor: pointer;
    border-radius: 12px;
}

.button-rectangle:has(a:active) {
    transform: scale(.9);
}

.button-rectangle.h35 {
    height: 35px;
    line-height: 35px;
}

.button-rectangle.orange-button {
    background: rgb(254,169,89);
    background: linear-gradient(180deg, rgba(254,169,89,1) 0%, rgba(255,148,76,1) 100%);
    border-bottom: 3px solid #ff7544;
    color: #e1220c;
}

.button-rectangle.blue-button {
    background: rgb(15,232,255);
    background: linear-gradient(180deg, rgba(15,232,255,1) 0%, rgba(72,202,255,1) 100%);
    border-bottom: 3px solid #37aef6;
    color: #0073cc;
}

.button-rectangle.red-button {
    background: rgb(255,112,106);
    background: linear-gradient(180deg, rgba(255,112,106,1) 0%, rgba(255,87,84,1) 100%);
    border-bottom: 3px solid #ed393f;
    color: #af0036;
}

.button-rectangle.green-button {
    background: rgb(56,240,117);
    background: linear-gradient(180deg, rgba(56,240,117,1) 0%, rgba(17,234,146,1) 100%);
    border-bottom: 3px solid #10d29d;
    color: #007c69;
}

.button-rectangle.white-button {
    background: white;
    border-bottom: 3px solid #e2e6eb;
    color: black !important;
}

.button-rectangle .dot-red {
    position: absolute;
    top: 4px;
    right: 4px;
}

.button-container.white-button {
    background-color: white;
}

.button-rectangle.mint-button {
    background: rgb(10,229,177);
    background: linear-gradient(180deg, rgba(10,229,177,1) 0%, rgba(3,210,179,1) 100%);
    border-bottom: 3px solid #04baab;
    color: #00737d;
}

.button-rectangle.pink-button {
    background: rgb(255,142,255);
    background: linear-gradient(180deg, rgba(255,142,255,1) 0%, rgba(255,121,255,1) 100%);
    border-bottom: 3px solid #f65ae5;
    /*color: #c101a4;*/
    color: white;
}

.button-rectangle.purple-button {
    background: rgb(208,143,255);
    background: linear-gradient(180deg, rgba(208,143,255,1) 0%, rgba(190,120,255,1) 100%);
    border-bottom: 3px solid #b05bff;
    /* color: #6d10c1; */
    color: white;
}

.button-rectangle.yellow-button {
    background: rgb(255,225,85);
    background: linear-gradient(180deg, rgba(255,225,85,1) 0%, rgba(255,211,5,1) 100%);
    border-bottom: 3px solid #f7b607;
    color: #bd4e04;
}

.button-rectangle.navy-button {
    background: rgb(105,121,173);
    background: linear-gradient(180deg, rgba(105,121,173,1) 0%, rgba(86,101,152,1) 100%);
    border-bottom: 3px solid #4a5788;
    color: #fff;
}

.button-rectangle.gray-button {
    background: rgb(226,229,244);
    background: linear-gradient(180deg, rgba(226,229,244,1) 0%, rgba(214,217,239,1) 100%);
    border-bottom: 3px solid #cdd0eb;
    color: #a2aecd;
}

.button-rectangle.button-outline-gray {
    border: 1px solid #d6d9ef;
}

.button-rectangle.blocked {
    border: 1px solid #d6d9ef;
    background: none;
}

.button-rectangle .locker-icon {
    display: none;
}

.button-rectangle.blocked {
    color: #A2AECD;
}

.button-rectangle.blocked a {
    display: none;
}

.button-rectangle.blocked .locker-icon {
    display: block;
    zoom: 0.3;
    position: absolute;
    right: 30px;
    margin: 0 auto;
    top: -30px;
}

.button-rectangle .content {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    width: 100%;
}

.button-rectangle .label {
    text-align: center;
}

.button-rectangle.button-outline-gray .label {
    color: #A2AECD;
}

.button-rectangle .description {
    top: -15px;
    position: absolute;
    text-align: center;
    border-radius: 12px;
    line-height: 14px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    font-weight: bold;
}

.button-rectangle .description.green {
    color: #007C69;
    background-color: #ceffcb;
}

.button-rectangle .description.blue {
    color: #00597c;
    background-color: #a5efff;
}

.hide {
    display: none;
}

.ab-block100 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 100;
}

.modal .dim, .dim-single {
    width: 100%;
    height: 100%;
    background-color: #060606;
    opacity: 0.8;
    position: absolute;
    overflow: hidden;
}

.modal .popup {
    position: relative;
    width: 90%;
    margin: 0 auto;
    top: 50px;
    border-radius: 20px;
}

#body-loading {
    display: none;
    width: 110%;
    left: -5%;
    height: 100%;
    position: absolute;
    background: #060606;
    top: 0;
    z-index: 100;
}

body.adaptive.loading #body-loading .icon{
    width: 42px;
    height: 70px;
    background-image: url("/images/icons/loading.png");
    background-size: cover;
    animation: 1s rotate360 infinite;
    position: absolute;
    top: 12px;
    right: 40px;
}

body.adaptive.loading .body-side {
}

@keyframes popup-show-animation {
    0% {
        opacity: 0.5;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }

    70% {
        transform: scale(0.97);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes popup-hide-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes dim-show-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes dim-hide-animation {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

.modal.modal-animation.show-animation .popup {
    animation: 0.55s popup-show-animation linear;
}

.modal.modal-animation.show-animation .dim {
    animation: 0.3s dim-show-animation linear;
}

.modal.modal-animation.hide-animation .popup {
    animation: 0.3s popup-hide-animation linear;
}

.modal.modal-animation.hide-animation .dim {
    animation: 0.3s dim-hide-animation linear;
}

.modal .popup.popup-gray {
    background-color: #f4f3fd;
}

.modal .popup.popup-white {
    background-color: #fff;
}

.modal .popup .popup-content {
    padding: 20px;
}

.modal .popup .header {
    border-radius: 20px 20px 0 0;
    height: 48px;
    position: relative;
}

.modal .popup .header .title {
    position: relative;
    top: 10px;
}

.modal .popup .header.header-gray {
    background-color: #f4f3fd;
}

.modal .popup .header .title {
    color: #43536C;
    text-align: center;
}

.modal .close-button {
    width: 45px;
    height: 45px;
    position: absolute;
    right: 3px;
    top: 3px;
}

.modal .popup .header .user-miniature-ceil {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    left: 10px;
    top: -10px;
}

.modal .popup .header .user-content-ceil {
    position: absolute;
    left: 80px;
    top: 10px;
    font-weight: bold;
    color: #43536C;
    line-height: 16px;
}

.modal .popup .header .user-miniature-ceil .level-container {
    width: 20px;
    height: 20px;
    background-color: #1cb7f7;
    border-radius: 4px;
    position: absolute;
    right: 0;
    bottom: 8px;
    border-bottom: 2px solid #1899d6;
}

.modal .popup .header .user-miniature-ceil .level-container .level {
    position: absolute;
    left: 0;
    right: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 12px;
    top: 2px;
}

.modal .popup .header .user-miniature-ceil .character-miniature {
    width: 54px;
    height: 54px;
    position: absolute;
    left: 3px;
    top: 3px;
    background-size: 54px;
}

.modal .popup .close-button .bg {
    background-color: #c6d2db;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 7px;
}

.form-field-sprite {
    background-image: url("/images/ui/form-fields.png");
    background-size: 66px 110px;
    width: 22px;
    height: 22px;
}

form {
    position: relative;
}

form .help-block {
    margin-left: 5px;
}

.has-error input::placeholder, .has-error input {
    color: #d90101;
}

.has-error .help-block {
    color: #d90101;
}

.has-error .form-field-sprite {
    background-position-x: -44px !important;
}

.form-field-sprite.user-icon {
    background-position-x: -22px;
}

.form-field-sprite.locker-icon {
    background-position-y: -22px;
    background-position-x: -22px;
}

.form-field-sprite.mail-icon {
    background-position-y: -44px;
    background-position-x: -22px;
}

.form-field-sprite.silver-icon {
    background-position-y: -66px;
    background-position-x: -22px;
}

.form-field-sprite.gold-icon {
    background-position-y: -88px;
    background-position-x: -22px;
}

.white-icon-sprite { background: url('/images/ui/white-icons.png') no-repeat top left; width: 44px; height: 61px;  }
.white-icon-sprite.Icon_RankIcon_Star02_Off { background-position: 0 0; width: 48px; height: 46px; }
.white-icon-sprite.Icon_WhiteIcon_Add_l { background-position: -58px 0; height: 44px; }
.white-icon-sprite.Icon_WhiteIcon_Alarm { background-position: -112px 0; width: 63px; height: 67px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Auto01 { background-position: -185px 0; width: 76px; height: 50px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Back { background-position: -271px 0; width: 41px; height: 60px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Continue { background-position: -322px 0; width: 108px; height: 131px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Dowm { background-position: -440px 0; width: 45px; height: 51px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Next { background-position: -495px 0; width: 29px; height: 47px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Play { background-position: -534px 0; width: 99px; height: 120px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow_Up { background-position: -643px 0; width: 52px; height: 63px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow01_PageNext { background-position: -705px 0; width: 59px; height: 86px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow01_PagePrev { background-position: -774px 0; width: 59px; height: 86px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow02_Left { background-position: -843px 0; width: 54px; height: 82px; }
.white-icon-sprite.Icon_WhiteIcon_Arrow02_Right { background-position: -907px 0; width: 54px; height: 82px; }
.white-icon-sprite.Icon_WhiteIcon_Bag { background-position: -971px 0; width: 79px; height: 67px; }
.white-icon-sprite.Icon_WhiteIcon_Best01 { background-position: -1060px 0; width: 62px; height: 62px; }
.white-icon-sprite.Icon_WhiteIcon_Best02 { background-position: -1132px 0; width: 57px; height: 59px; }
.white-icon-sprite.Icon_WhiteIcon_Boss { background-position: -1199px 0; width: 56px; height: 41px; }
.white-icon-sprite.Icon_WhiteIcon_Chat { background-position: -1265px 0; width: 66px; height: 63px; }
.white-icon-sprite.Icon_WhiteIcon_check_m { background-position: -1341px 0; width: 75px; height: 57px; }
.white-icon-sprite.Icon_WhiteIcon_Close { background-position: -1426px 0; height: 44px; }
.white-icon-sprite.Icon_WhiteIcon_Crown { background-position: -1480px 0; width: 49px; height: 37px; }
.white-icon-sprite.Icon_WhiteIcon_ExclamationMark { background-position: -1539px 0; width: 57px; height: 183px; }
.white-icon-sprite.Icon_WhiteIcon_Exit { background-position: -1606px 0; width: 113px; height: 139px; }
.white-icon-sprite.Icon_WhiteIcon_Exp { background-position: -1729px 0; width: 56px; }
.white-icon-sprite.Icon_WhiteIcon_Facebook { background-position: -1795px 0; width: 30px; height: 56px; }
.white-icon-sprite.icon_WhiteIcon_Graphic { background-position: -1835px 0; width: 61px; }
.white-icon-sprite.Icon_WhiteIcon_Home { background-position: -1906px 0; width: 72px; height: 62px; }
.white-icon-sprite.Icon_WhiteIcon_Info { background-position: -1988px 0; width: 42px; height: 45px; }
.white-icon-sprite.Icon_WhiteIcon_Lock { background-position: -2040px 0; width: 59px; height: 70px; }
.white-icon-sprite.Icon_WhiteIcon_Menu { background-position: -2109px 0; width: 52px; height: 52px; }
.white-icon-sprite.Icon_WhiteIcon_Mission { background-position: -2171px 0; width: 58px; height: 69px; }
.white-icon-sprite.Icon_WhiteIcon_Music { background-position: -2239px 0; width: 66px; height: 66px; }
.white-icon-sprite.Icon_WhiteIcon_Pause { background-position: -2315px 0; width: 52px; height: 52px; }
.white-icon-sprite.Icon_WhiteIcon_Pencil { background-position: -2377px 0; width: 66px; height: 66px; }
.white-icon-sprite.Icon_WhiteIcon_Restart { background-position: -2453px 0; width: 133px; height: 116px; }
.white-icon-sprite.Icon_WhiteIcon_Search { background-position: -2596px 0; width: 58px; height: 58px; }
.white-icon-sprite.Icon_WhiteIcon_Setting_l { background-position: -2664px 0; width: 136px; height: 146px; }
.white-icon-sprite.Icon_WhiteIcon_Skip { background-position: -2810px 0; width: 112px; height: 112px; }
.white-icon-sprite.Icon_WhiteIcon_Setting_s { background-position: -2932px 0; width: 70px; height: 74px; }
.white-icon-sprite.Icon_WhiteIcon_Sound { background-position: -3012px 0; width: 66px; height: 70px; }
.white-icon-sprite.Icon_WhiteIcon_Star_Grade { background-position: -3088px 0; height: 41px; }
.white-icon-sprite.Icon_WhiteIcon_Timer { background-position: -3142px 0; width: 33px; height: 36px; }
.white-icon-sprite.Icon_WhiteIcon_User_0 { background-position: -3185px 0; width: 55px; height: 66px; }
.white-icon-sprite.Icon_WhiteIcon_User_1 { background-position: -3250px 0; width: 53px; height: 56px; }
.white-icon-sprite.Icon_WhiteIcon_Wifi01_1 { background-position: -3313px 0; width: 20px; height: 13px; }
.white-icon-sprite.Icon_WhiteIcon_Wifi01_2 { background-position: -3343px 0; width: 46px; height: 18px; }
.white-icon-sprite.Icon_WhiteIcon_Wifi01_3 { background-position: -3399px 0; width: 70px; height: 23px; }
.white-icon-sprite.Icon_WhiteIcon_Wifi02 { background-position: -3479px 0; width: 247px; height: 179px; }
.white-icon-sprite.IconGroup_EquipmentIcon_Bow { background-position: -3736px 0; width: 85px; height: 85px; }
.white-icon-sprite.IconGroup_EquipmentIcon_Dress { background-position: -3831px 0; width: 90px; height: 81px; }
.white-icon-sprite.IconGroup_EquipmentIcon_Helmet { background-position: -3931px 0; width: 74px; height: 81px; }
.white-icon-sprite.IconGroup_EquipmentIcon_Shield { background-position: -4015px 0; width: 84px; height: 90px; }
.white-icon-sprite.IconGroup_EquipmentIcon_Weapon { background-position: -4109px 0; width: 78px; height: 78px; }
.white-icon-sprite.IconGroup_MenuIcon03_Board { background-position: -4197px 0; width: 52px; height: 58px; }
.white-icon-sprite.IconGroup_MenuIcon03_Flag_0 { background-position: -4259px 0; width: 55px; height: 58px; }
.white-icon-sprite.IconGroup_MenuIcon03_Flag_2 { background-position: -4324px 0; width: 62px; height: 52px; }
.white-icon-sprite.IconGroup_MenuIcon03_Trophy { background-position: -4396px 0; width: 67px; height: 54px; }
.white-icon-sprite.IconGroup_MenuIcon6_All { background-position: -4473px 0; width: 48px; height: 48px; }
.white-icon-sprite.IconGroup_MenuIcon6_Focus { background-position: -4531px 0; width: 20px; height: 12px; }
.white-icon-sprite.IconGroup_MenuIcon6_Helmet { background-position: -4561px 0; width: 60px; height: 66px; }
.white-icon-sprite.IconGroup_MenuIcon6_Shield { background-position: -4631px 0; width: 57px; }
.white-icon-sprite.IconGroup_MenuIcon6_Shoes { background-position: -4698px 0; width: 63px; }
.white-icon-sprite.IconGroup_MenuIcon6_Weapon { background-position: -4771px 0; width: 57px; height: 57px; }
.white-icon-sprite.IconGroup_RoleIcon_01 { background-position: -4838px 0; width: 50px; height: 50px; }
.white-icon-sprite.IconGroup_RoleIcon_02 { background-position: -4898px 0; height: 46px; }
.white-icon-sprite.IconGroup_RoleIcon_03 { background-position: -4952px 0; width: 43px; height: 43px; }
.white-icon-sprite.IconGroup_RoleIcon_04 { background-position: -5005px 0; width: 46px; height: 49px; }
.white-icon-sprite.IconGroup_StatsIcon_Attack { background-position: -5061px 0; width: 63px; height: 63px; }
.white-icon-sprite.IconGroup_StatsIcon_Critical { background-position: -5134px 0; width: 58px; height: 57px; }
.white-icon-sprite.IconGroup_StatsIcon_Defense { background-position: -5202px 0; width: 58px; }
.white-icon-sprite.IconGroup_StatsIcon_Fist { background-position: -5270px 0; width: 60px; height: 64px; }
.white-icon-sprite.IconGroup_StatsIcon_Life { background-position: -5340px 0; width: 59px; height: 52px; }
.white-icon-sprite.IconGroup_StatsIcon_Monster { background-position: -5409px 0; width: 74px; height: 55px; }
.white-icon-sprite.IconGroup_StatsIcon_Speed { background-position: -5493px 0; width: 73px; height: 62px; }
.white-icon-sprite.IconGroup_StatsIcon_Sword { background-position: -5576px 0; width: 60px; height: 59px; }
.white-icon-sprite.IconGroup_StatsIcon_Trophy { background-position: -5646px 0; width: 69px; height: 56px; }
.white-icon-sprite.IconGroup_StatsIcon_VS1 { background-position: -5725px 0; width: 67px; height: 67px; }
.white-icon-sprite.IconGroup_StatsIcon_VS2 { background-position: -5802px 0; width: 53px; height: 35px; }
.white-icon-sprite.IconGroup_StatsIcon01_01 { background-position: -5865px 0; width: 47px; height: 38px; }
.white-icon-sprite.IconGroup_StatsIcon01_02 { background-position: -5922px 0; width: 45px; height: 46px; }
.white-icon-sprite.IconGroup_StatsIcon01_03 { background-position: -5977px 0; width: 45px; height: 45px; }
.white-icon-sprite.IconGroup_StatsIcon01_04 { background-position: -6032px 0; width: 62px; height: 42px; }

.grey-icon-sprite { background: url('/images/ui/grey-icons.png') no-repeat top left; width: 44px; height: 61px;  }
.grey-icon-sprite.Icon_RankIcon_Star02_Off { background-position: 0 0; width: 48px; height: 46px; }
.grey-icon-sprite.Icon_WhiteIcon_Add_l { background-position: -58px 0; height: 44px; }
.grey-icon-sprite.Icon_WhiteIcon_Alarm { background-position: -112px 0; width: 63px; height: 67px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Auto01 { background-position: -185px 0; width: 76px; height: 50px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Back { background-position: -271px 0; width: 41px; height: 60px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Continue { background-position: -322px 0; width: 108px; height: 131px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Dowm { background-position: -440px 0; width: 45px; height: 51px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Next { background-position: -495px 0; width: 29px; height: 47px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Play { background-position: -534px 0; width: 99px; height: 120px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow_Up { background-position: -643px 0; width: 52px; height: 63px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow01_PageNext { background-position: -705px 0; width: 59px; height: 86px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow01_PagePrev { background-position: -774px 0; width: 59px; height: 86px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow02_Left { background-position: -843px 0; width: 54px; height: 82px; }
.grey-icon-sprite.Icon_WhiteIcon_Arrow02_Right { background-position: -907px 0; width: 54px; height: 82px; }
.grey-icon-sprite.Icon_WhiteIcon_Bag { background-position: -971px 0; width: 79px; height: 67px; }
.grey-icon-sprite.Icon_WhiteIcon_Best01 { background-position: -1060px 0; width: 62px; height: 62px; }
.grey-icon-sprite.Icon_WhiteIcon_Best02 { background-position: -1132px 0; width: 57px; height: 59px; }
.grey-icon-sprite.Icon_WhiteIcon_Boss { background-position: -1199px 0; width: 56px; height: 41px; }
.grey-icon-sprite.Icon_WhiteIcon_Chat { background-position: -1265px 0; width: 66px; height: 63px; }
.grey-icon-sprite.Icon_WhiteIcon_check_m { background-position: -1341px 0; width: 75px; height: 57px; }
.grey-icon-sprite.Icon_WhiteIcon_Close { background-position: -1426px 0; height: 44px; }
.grey-icon-sprite.Icon_WhiteIcon_Crown { background-position: -1480px 0; width: 49px; height: 37px; }
.grey-icon-sprite.Icon_WhiteIcon_ExclamationMark { background-position: -1539px 0; width: 57px; height: 183px; }
.grey-icon-sprite.Icon_WhiteIcon_Exit { background-position: -1606px 0; width: 113px; height: 139px; }
.grey-icon-sprite.Icon_WhiteIcon_Exp { background-position: -1729px 0; width: 56px; }
.grey-icon-sprite.Icon_WhiteIcon_Facebook { background-position: -1795px 0; width: 30px; height: 56px; }
.grey-icon-sprite.icon_WhiteIcon_Graphic { background-position: -1835px 0; width: 61px; }
.grey-icon-sprite.Icon_WhiteIcon_Home { background-position: -1906px 0; width: 72px; height: 62px; }
.grey-icon-sprite.Icon_WhiteIcon_Info { background-position: -1988px 0; width: 42px; height: 45px; }
.grey-icon-sprite.Icon_WhiteIcon_Lock { background-position: -2040px 0; width: 59px; height: 70px; }
.grey-icon-sprite.Icon_WhiteIcon_Menu { background-position: -2109px 0; width: 52px; height: 52px; }
.grey-icon-sprite.Icon_WhiteIcon_Mission { background-position: -2171px 0; width: 58px; height: 69px; }
.grey-icon-sprite.Icon_WhiteIcon_Music { background-position: -2239px 0; width: 66px; height: 66px; }
.grey-icon-sprite.Icon_WhiteIcon_Pause { background-position: -2315px 0; width: 52px; height: 52px; }
.grey-icon-sprite.Icon_WhiteIcon_Pencil { background-position: -2377px 0; width: 66px; height: 66px; }
.grey-icon-sprite.Icon_WhiteIcon_Restart { background-position: -2453px 0; width: 133px; height: 116px; }
.grey-icon-sprite.Icon_WhiteIcon_Search { background-position: -2596px 0; width: 58px; height: 58px; }
.grey-icon-sprite.Icon_WhiteIcon_Setting_l { background-position: -2664px 0; width: 136px; height: 146px; }
.grey-icon-sprite.Icon_WhiteIcon_Skip { background-position: -2810px 0; width: 112px; height: 112px; }
.grey-icon-sprite.Icon_WhiteIcon_Setting_s { background-position: -2932px 0; width: 70px; height: 74px; }
.grey-icon-sprite.Icon_WhiteIcon_Sound { background-position: -3012px 0; width: 66px; height: 70px; }
.grey-icon-sprite.Icon_WhiteIcon_Star_Grade { background-position: -3088px 0; height: 41px; }
.grey-icon-sprite.Icon_WhiteIcon_Timer { background-position: -3142px 0; width: 33px; height: 36px; }
.grey-icon-sprite.Icon_WhiteIcon_User_0 { background-position: -3185px 0; width: 55px; height: 66px; }
.grey-icon-sprite.Icon_WhiteIcon_User_1 { background-position: -3250px 0; width: 53px; height: 56px; }
.grey-icon-sprite.Icon_WhiteIcon_Wifi01_1 { background-position: -3313px 0; width: 20px; height: 13px; }
.grey-icon-sprite.Icon_WhiteIcon_Wifi01_2 { background-position: -3343px 0; width: 46px; height: 18px; }
.grey-icon-sprite.Icon_WhiteIcon_Wifi01_3 { background-position: -3399px 0; width: 70px; height: 23px; }
.grey-icon-sprite.Icon_WhiteIcon_Wifi02 { background-position: -3479px 0; width: 247px; height: 179px; }
.grey-icon-sprite.IconGroup_EquipmentIcon_Bow { background-position: -3736px 0; width: 85px; height: 85px; }
.grey-icon-sprite.IconGroup_EquipmentIcon_Dress { background-position: -3831px 0; width: 90px; height: 81px; }
.grey-icon-sprite.IconGroup_EquipmentIcon_Helmet { background-position: -3931px 0; width: 74px; height: 81px; }
.grey-icon-sprite.IconGroup_EquipmentIcon_Shield { background-position: -4015px 0; width: 84px; height: 90px; }
.grey-icon-sprite.IconGroup_EquipmentIcon_Weapon { background-position: -4109px 0; width: 78px; height: 78px; }
.grey-icon-sprite.IconGroup_MenuIcon03_Board { background-position: -4197px 0; width: 52px; height: 58px; }
.grey-icon-sprite.IconGroup_MenuIcon03_Flag_0 { background-position: -4259px 0; width: 55px; height: 58px; }
.grey-icon-sprite.IconGroup_MenuIcon03_Flag_2 { background-position: -4324px 0; width: 62px; height: 52px; }
.grey-icon-sprite.IconGroup_MenuIcon03_Trophy { background-position: -4396px 0; width: 67px; height: 54px; }
.grey-icon-sprite.IconGroup_MenuIcon6_All { background-position: -4473px 0; width: 48px; height: 48px; }
.grey-icon-sprite.IconGroup_MenuIcon6_Focus { background-position: -4531px 0; width: 20px; height: 12px; }
.grey-icon-sprite.IconGroup_MenuIcon6_Helmet { background-position: -4561px 0; width: 60px; height: 66px; }
.grey-icon-sprite.IconGroup_MenuIcon6_Shield { background-position: -4631px 0; width: 57px; }
.grey-icon-sprite.IconGroup_MenuIcon6_Shoes { background-position: -4698px 0; width: 63px; }
.grey-icon-sprite.IconGroup_MenuIcon6_Weapon { background-position: -4771px 0; width: 57px; height: 57px; }
.grey-icon-sprite.IconGroup_RoleIcon_01 { background-position: -4838px 0; width: 50px; height: 50px; }
.grey-icon-sprite.IconGroup_RoleIcon_02 { background-position: -4898px 0; height: 46px; }
.grey-icon-sprite.IconGroup_RoleIcon_03 { background-position: -4952px 0; width: 43px; height: 43px; }
.grey-icon-sprite.IconGroup_RoleIcon_04 { background-position: -5005px 0; width: 46px; height: 49px; }
.grey-icon-sprite.IconGroup_StatsIcon_Attack { background-position: -5061px 0; width: 63px; height: 63px; }
.grey-icon-sprite.IconGroup_StatsIcon_Critical { background-position: -5134px 0; width: 58px; height: 57px; }
.grey-icon-sprite.IconGroup_StatsIcon_Defense { background-position: -5202px 0; width: 58px; }
.grey-icon-sprite.IconGroup_StatsIcon_Fist { background-position: -5270px 0; width: 60px; height: 64px; }
.grey-icon-sprite.IconGroup_StatsIcon_Life { background-position: -5340px 0; width: 59px; height: 52px; }
.grey-icon-sprite.IconGroup_StatsIcon_Monster { background-position: -5409px 0; width: 74px; height: 55px; }
.grey-icon-sprite.IconGroup_StatsIcon_Speed { background-position: -5493px 0; width: 73px; height: 62px; }
.grey-icon-sprite.IconGroup_StatsIcon_Sword { background-position: -5576px 0; width: 60px; height: 59px; }
.grey-icon-sprite.IconGroup_StatsIcon_Trophy { background-position: -5646px 0; width: 69px; height: 56px; }
.grey-icon-sprite.IconGroup_StatsIcon_VS1 { background-position: -5725px 0; width: 67px; height: 67px; }
.grey-icon-sprite.IconGroup_StatsIcon_VS2 { background-position: -5802px 0; width: 53px; height: 35px; }
.grey-icon-sprite.IconGroup_StatsIcon01_01 { background-position: -5865px 0; width: 47px; height: 38px; }
.grey-icon-sprite.IconGroup_StatsIcon01_02 { background-position: -5922px 0; width: 45px; height: 46px; }
.grey-icon-sprite.IconGroup_StatsIcon01_03 { background-position: -5977px 0; width: 45px; height: 45px; }
.grey-icon-sprite.IconGroup_StatsIcon01_04 { background-position: -6032px 0; width: 62px; height: 42px; }

.ui-etc-icon-sprite { background: url('/images/ui/ui-etc-icons.png') no-repeat top left; width: 60px; height: 60px;  }
.ui-etc-icon-sprite.DailyStamp_l_Dark { background-position: 0 0; width: 240px; height: 247px; }
.ui-etc-icon-sprite.DailyStamp_l_Light { background-position: -250px 0; width: 240px; height: 240px; }
.ui-etc-icon-sprite.DailyStamp_l_White1 { background-position: -500px 0; width: 240px; height: 240px; }
.ui-etc-icon-sprite.DailyStamp_l_White2 { background-position: -750px 0; width: 226px; height: 225px; }
.ui-etc-icon-sprite.DailyStamp_s_Dark { background-position: -986px 0; width: 162px; height: 162px; }
.ui-etc-icon-sprite.DailyStamp_s_Light { background-position: -1158px 0; width: 162px; height: 162px; }
.ui-etc-icon-sprite.DailyStamp_s_White1 { background-position: -1330px 0; width: 162px; height: 162px; }
.ui-etc-icon-sprite.DailyStamp_s_White2 { background-position: -1502px 0; width: 148px; height: 146px; }
.ui-etc-icon-sprite.InputField_Frame { background-position: -1660px 0; width: 82px; height: 82px; }
.ui-etc-icon-sprite.InputField_Frame_Inner { background-position: -1752px 0; width: 78px; height: 78px; }
.ui-etc-icon-sprite.InputField_Icon_mail { background-position: -1840px 0; width: 56px; height: 43px; }
.ui-etc-icon-sprite.InputField_Icon_Password { background-position: -1906px 0; width: 51px; height: 59px; }
.ui-etc-icon-sprite.InputField_Icon_Show { background-position: -1967px 0; width: 61px; height: 47px; }
.ui-etc-icon-sprite.InputField_Icon_Username { background-position: -2038px 0; width: 54px; height: 54px; }
.ui-etc-icon-sprite.InputField_IconGrey_mail { background-position: -2102px 0; width: 56px; height: 43px; }
.ui-etc-icon-sprite.InputField_IconGrey_Password { background-position: -2168px 0; width: 51px; height: 59px; }
.ui-etc-icon-sprite.InputField_IconGrey_Show { background-position: -2229px 0; width: 61px; height: 47px; }
.ui-etc-icon-sprite.InputField_IconGrey_Username { background-position: -2300px 0; width: 54px; height: 54px; }
.ui-etc-icon-sprite.Notify_Count_l_Green { background-position: -2364px 0; width: 64px; height: 64px; }
.ui-etc-icon-sprite.Notify_Count_l_Red { background-position: -2438px 0; width: 64px; height: 64px; }
.ui-etc-icon-sprite.Notify_Count_l_White1 { background-position: -2512px 0; width: 64px; height: 64px; }
.ui-etc-icon-sprite.Notify_Count_l_White2 { background-position: -2586px 0; width: 64px; height: 63px; }
.ui-etc-icon-sprite.Notify_Count_s { background-position: -2660px 0; width: 48px; height: 48px; }
.ui-etc-icon-sprite.Notify_Count_s_White1 { background-position: -2718px 0; width: 48px; height: 48px; }
.ui-etc-icon-sprite.Notify_Count_s_White2 { background-position: -2776px 0; width: 48px; height: 47px; }
.ui-etc-icon-sprite.Notify_Point_Red { background-position: -2834px 0; width: 22px; height: 22px; }
.ui-etc-icon-sprite.Notify_Point_White { background-position: -2866px 0; width: 22px; height: 22px; }
.ui-etc-icon-sprite.PageNavi_Common_Focus { background-position: -2898px 0; width: 48px; height: 48px; }
.ui-etc-icon-sprite.PageNavi_Common_Frame { background-position: -2956px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Status_ButtonFrame_Dark { background-position: -2996px 0; }
.ui-etc-icon-sprite.Status_ButtonFrame_Light_Blue { background-position: -3066px 0; }
.ui-etc-icon-sprite.Status_ButtonFrame_Light_Gray { background-position: -3136px 0; }
.ui-etc-icon-sprite.Status_ButtonFrame_Light_Red { background-position: -3206px 0; }
.ui-etc-icon-sprite.Status_ButtonFrame_Light_Yellow { background-position: -3276px 0; }
.ui-etc-icon-sprite.Status_ButtonIcon_Dark { background-position: -3346px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Status_ButtonIcon_Light_Blue { background-position: -3386px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Status_ButtonIcon_Light_Gray { background-position: -3426px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Status_ButtonIcon_Light_Red { background-position: -3466px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Status_ButtonIcon_Light_Yellow { background-position: -3506px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Status_Frame_Dark { background-position: -3546px 0; }
.ui-etc-icon-sprite.Status_Frame_Light { background-position: -3616px 0; }
.ui-etc-icon-sprite.Status_Icon_Common_Coin { background-position: -3686px 0; width: 85px; height: 90px; }
.ui-etc-icon-sprite.Status_Icon_Common_Gem { background-position: -3781px 0; width: 74px; height: 85px; }
.ui-etc-icon-sprite.Status_Icon_Common_Life { background-position: -3865px 0; width: 87px; height: 76px; }
.ui-etc-icon-sprite.Status_White1_Frame { background-position: -3962px 0; }
.ui-etc-icon-sprite.Status_White2_ButtonFrame { background-position: -4032px 0; }
.ui-etc-icon-sprite.Status_White3_ButtonIcon { background-position: -4102px 0; width: 30px; height: 30px; }
.ui-etc-icon-sprite.Toggle_Check_Frame_Off_Dark { background-position: -4142px 0; width: 78px; height: 78px; }
.ui-etc-icon-sprite.Toggle_Check_Frame_Off_Light { background-position: -4230px 0; width: 78px; height: 78px; }
.ui-etc-icon-sprite.Toggle_Check_Frame_White1 { background-position: -4318px 0; width: 78px; height: 78px; }
.ui-etc-icon-sprite.Toggle_Check_Frame_White2 { background-position: -4406px 0; width: 78px; height: 78px; }
.ui-etc-icon-sprite.Toggle_Check_On { background-position: -4494px 0; width: 78px; height: 78px; }
.ui-etc-icon-sprite.Toggle_Radio_Off_Dark { background-position: -4582px 0; width: 102px; height: 102px; }
.ui-etc-icon-sprite.Toggle_Radio_Off_LIght { background-position: -4694px 0; width: 102px; height: 102px; }
.ui-etc-icon-sprite.Toggle_Radio_On { background-position: -4806px 0; width: 102px; height: 102px; }
.ui-etc-icon-sprite.Toggle_Radio_White { background-position: -4918px 0; width: 102px; height: 102px; }
.ui-etc-icon-sprite.Toggle_Switch_Frame_Off_Dark { background-position: -5030px 0; width: 196px; height: 96px; }
.ui-etc-icon-sprite.Toggle_Switch_Frame_Off_Light { background-position: -5236px 0; width: 196px; height: 96px; }
.ui-etc-icon-sprite.Toggle_Switch_Frame_On { background-position: -5442px 0; width: 196px; height: 96px; }
.ui-etc-icon-sprite.Toggle_Switch_Frame_White { background-position: -5648px 0; width: 196px; height: 96px; }
.ui-etc-icon-sprite.Toggle_Switch_Handle { background-position: -5854px 0; width: 80px; height: 80px; }
.ui-etc-icon-sprite.Tutorial_Focus_Icon_Down { background-position: -5944px 0; width: 194px; height: 204px; }
.ui-etc-icon-sprite.Tutorial_Focus_Icon_Hand { background-position: -6148px 0; width: 181px; height: 173px; }
.ui-etc-icon-sprite.Tutorial_Focus_Icon_Left { background-position: -6339px 0; width: 204px; height: 194px; }
.ui-etc-icon-sprite.Tutorial_Focus_Icon_Right { background-position: -6553px 0; width: 204px; height: 194px; }
.ui-etc-icon-sprite.Tutorial_Focus_Icon_Up_Demo { background-position: -6767px 0; width: 194px; height: 204px; }
.ui-etc-icon-sprite.Tutorial_Focus00_Line_White { background-position: -6971px 0; width: 92px; height: 92px; }
.ui-etc-icon-sprite.Tutorial_Focus00_Line_Yellow { background-position: -7073px 0; width: 92px; height: 92px; }
.ui-etc-icon-sprite.Tutorial_Focus01_Circle1 { background-position: -7175px 0; width: 477px; height: 477px; }
.ui-etc-icon-sprite.Tutorial_Focus01_Circle2 { background-position: -7662px 0; width: 412px; height: 412px; }
.ui-etc-icon-sprite.Tutorial_Focus01_Circle3 { background-position: -8084px 0; width: 350px; height: 350px; }
.ui-etc-icon-sprite.Tutorial_Focus02_RoundSquare1 { background-position: -8444px 0; width: 472px; height: 472px; }
.ui-etc-icon-sprite.Tutorial_Focus02_RoundSquare2 { background-position: -8926px 0; width: 404px; height: 404px; }
.ui-etc-icon-sprite.Tutorial_Focus02_RoundSquare3 { background-position: -9340px 0; width: 342px; height: 342px; }
.ui-etc-icon-sprite.Tutorial_Focus03_Square1 { background-position: -9692px 0; width: 466px; height: 466px; }
.ui-etc-icon-sprite.Tutorial_Focus03_Square2 { background-position: -10168px 0; width: 406px; height: 406px; }
.ui-etc-icon-sprite.Tutorial_Focus03_Square3 { background-position: -10584px 0; width: 340px; height: 340px; }

.demo-frame-sprite { background: url('/images/ui/demo-frames.png') no-repeat top left; width: 87px; height: 87px;  }
.demo-frame-sprite.BasicFrame_Circle_58 { background-position: 0 0; width: 58px; height: 58px; }
.demo-frame-sprite.BasicFrame_Diamond01 { background-position: -68px 0; width: 326px; height: 326px; }
.demo-frame-sprite.BasicFrame_Diamond02 { background-position: -404px 0; width: 82px; height: 82px; }
.demo-frame-sprite.BasicFrame_RectangleSlant02 { background-position: -496px 0; width: 121px; height: 86px; }
.demo-frame-sprite.BasicFrame_Square02_Blue { background-position: -627px 0; }
.demo-frame-sprite.BasicFrame_Square02_Green { background-position: -724px 0; }
.demo-frame-sprite.BasicFrame_Square02_Orange { background-position: -821px 0; }
.demo-frame-sprite.BasicFrame_Square02_Purple { background-position: -918px 0; }
.demo-frame-sprite.BasicFrame_Square02_Red { background-position: -1015px 0; }
.demo-frame-sprite.BasicFrame_Square02_Sky { background-position: -1112px 0; }
.demo-frame-sprite.BasicFrame_Square02_Yellow { background-position: -1209px 0; }
.demo-frame-sprite.ListFrame08_Black { background-position: -1306px 0; width: 74px; height: 74px; }
.demo-frame-sprite.ListFrame09_Blue { background-position: -1390px 0; width: 74px; height: 74px; }
.demo-frame-sprite.ListFrame09_Brown { background-position: -1474px 0; width: 424px; height: 90px; }
.demo-frame-sprite.ListFrame09_Navy { background-position: -1908px 0; width: 424px; height: 90px; }
.demo-frame-sprite.ListFrame09_Red { background-position: -2342px 0; width: 424px; height: 90px; }
.demo-frame-sprite.ListFrame09_Yellow { background-position: -2776px 0; width: 75px; height: 75px; }
.demo-frame-sprite.MessageFrame_Blue { background-position: -2861px 0; width: 119px; height: 72px; }
.demo-frame-sprite.MessageFrame_Gray { background-position: -2990px 0; width: 119px; height: 72px; }
.demo-frame-sprite.MessageFrame_Green { background-position: -3119px 0; width: 126px; height: 72px; }
.demo-frame-sprite.MessageFrame_Red { background-position: -3255px 0; width: 126px; height: 72px; }
.demo-frame-sprite.MessageFrame_Yellow { background-position: -3391px 0; width: 119px; height: 72px; }
.demo-frame-sprite.StageFrame_Common_Blue_c { background-position: -3520px 0; width: 278px; height: 278px; }
.demo-frame-sprite.StageFrame_Common_Blue_d { background-position: -3808px 0; width: 258px; height: 257px; }
.demo-frame-sprite.StageFrame_Common_Blue_n { background-position: -4076px 0; width: 278px; height: 278px; }
.demo-frame-sprite.StageFrame_Common_Blue_s { background-position: -4364px 0; width: 278px; height: 278px; }
.demo-frame-sprite.StageFrame_Common_Green_c { background-position: -4652px 0; width: 278px; height: 278px; }
.demo-frame-sprite.StageFrame_Common_Green_d { background-position: -4940px 0; width: 258px; height: 257px; }
.demo-frame-sprite.StageFrame_Common_Green_n { background-position: -5208px 0; width: 278px; height: 278px; }
.demo-frame-sprite.StageFrame_Common_Green_s { background-position: -5496px 0; width: 278px; height: 278px; }

.game-icon-sprite { background: url('/images/ui/game-icons.png') no-repeat top left; width: 186px; height: 186px;  }
.game-icon-sprite.Icon_ColorIcon_Arrow_Left { background-position: 0 0; width: 56px; height: 84px; }
.game-icon-sprite.Icon_ColorIcon_Arrow_Right { background-position: -66px 0; width: 56px; height: 84px; }
.game-icon-sprite.Icon_ColorIcon_Bag { background-position: -132px 0; width: 69px; height: 62px; }
.game-icon-sprite.Icon_ColorIcon_Bell { background-position: -211px 0; width: 57px; height: 59px; }
.game-icon-sprite.Icon_ColorIcon_Block { background-position: -278px 0; width: 121px; height: 121px; }
.game-icon-sprite.Icon_ColorIcon_Book_Blue { background-position: -409px 0; width: 49px; height: 51px; }
.game-icon-sprite.Icon_ColorIcon_Boss { background-position: -468px 0; width: 73px; height: 56px; }
.game-icon-sprite.Icon_ColorIcon_Check01 { background-position: -551px 0; width: 87px; height: 69px; }
.game-icon-sprite.Icon_ColorIcon_Check02 { background-position: -648px 0; width: 75px; height: 57px; }
.game-icon-sprite.Icon_ColorIcon_ClanMark { background-position: -733px 0; width: 114px; height: 111px; }
.game-icon-sprite.Icon_ColorIcon_Coin_Blue01 { background-position: -857px 0; width: 60px; height: 64px; }
.game-icon-sprite.Icon_ColorIcon_Coin_Blue02 { background-position: -927px 0; width: 57px; height: 61px; }
.game-icon-sprite.Icon_ColorIcon_Coin_s { background-position: -994px 0; width: 69px; height: 73px; }
.game-icon-sprite.Icon_ColorIcon_CoinPouch { background-position: -1073px 0; width: 214px; height: 199px; }
.game-icon-sprite.Icon_ColorIcon_Coins { background-position: -1297px 0; width: 272px; height: 212px; }
.game-icon-sprite.Icon_ColorIcon_Crown { background-position: -1579px 0; width: 104px; height: 83px; }
.game-icon-sprite.Icon_ColorIcon_Drop01 { background-position: -1693px 0; width: 77px; height: 95px; }
.game-icon-sprite.Icon_ColorIcon_Emoji { background-position: -1780px 0; width: 79px; height: 76px; }
.game-icon-sprite.Icon_ColorIcon_Gem_m { background-position: -1869px 0; width: 68px; height: 78px; }
.game-icon-sprite.Icon_ColorIcon_Glove { background-position: -1947px 0; width: 68px; height: 77px; }
.game-icon-sprite.Icon_ColorIcon_Hexagon { background-position: -2025px 0; width: 76px; height: 84px; }
.game-icon-sprite.Icon_ColorIcon_Hourglass { background-position: -2111px 0; width: 87px; height: 117px; }
.game-icon-sprite.Icon_ColorIcon_Info { background-position: -2208px 0; width: 68px; height: 68px; }
.game-icon-sprite.Icon_ColorIcon_Key_s { background-position: -2286px 0; width: 81px; height: 72px; }
.game-icon-sprite.Icon_ColorIcon_Leaderboard { background-position: -2377px 0; width: 104px; height: 100px; }
.game-icon-sprite.Icon_ColorIcon_Life { background-position: -2491px 0; width: 102px; height: 89px; }
.game-icon-sprite.Icon_ColorIcon_Lock01 { background-position: -2603px 0; width: 76px; height: 93px; }
.game-icon-sprite.Icon_ColorIcon_Lock03 { background-position: -2689px 0; width: 55px; height: 66px; }
.game-icon-sprite.Icon_ColorIcon_Map01 { background-position: -2754px 0; width: 131px; height: 104px; }
.game-icon-sprite.Icon_ColorIcon_Map02 { background-position: -2895px 0; width: 97px; height: 94px; }
.game-icon-sprite.Icon_ColorIcon_Medal01 { background-position: -3002px 0; width: 94px; height: 128px; }
.game-icon-sprite.Icon_ColorIcon_Medal02 { background-position: -3106px 0; width: 87px; height: 113px; }
.game-icon-sprite.Icon_ColorIcon_Medal03 { background-position: -3203px 0; width: 276px; height: 359px; }
.game-icon-sprite.Icon_ColorIcon_Movie { background-position: -3489px 0; width: 70px; height: 69px; }
.game-icon-sprite.Icon_ColorIcon_Pot { background-position: -3569px 0; width: 215px; height: 235px; }
.game-icon-sprite.Icon_ColorIcon_Rainbow { background-position: -3794px 0; height: 226px; }
.game-icon-sprite.Icon_ColorIcon_Scroll_l { background-position: -3990px 0; width: 188px; height: 159px; }
.game-icon-sprite.Icon_ColorIcon_Scroll_s { background-position: -4188px 0; width: 62px; height: 52px; }
.game-icon-sprite.Icon_ColorIcon_Ticket_Blue_s { background-position: -4260px 0; width: 199px; height: 133px; }
.game-icon-sprite.Icon_ColorIcon_Ticket_Gold { background-position: -4469px 0; width: 199px; height: 133px; }
.game-icon-sprite.Icon_ColorIcon_Timer { background-position: -4678px 0; width: 66px; height: 75px; }
.game-icon-sprite.Icon_ColorIcon_Trophy01 { background-position: -4754px 0; width: 127px; height: 86px; }
.game-icon-sprite.Icon_ColorIcon_Trophy02_l { background-position: -4891px 0; width: 129px; height: 108px; }
.game-icon-sprite.Icon_ColorIcon_Trophy03 { background-position: -5030px 0; width: 102px; height: 87px; }
.game-icon-sprite.Icon_ColorIcon_Weapon_Battle_l { background-position: -5142px 0; width: 235px; height: 206px; }
.game-icon-sprite.Icon_ColorIcon_Weapon_Spear { background-position: -5387px 0; width: 62px; height: 49px; }
.game-icon-sprite.Icon_GroupIcon_Medal_Bronze { background-position: -5459px 0; width: 93px; height: 110px; }
.game-icon-sprite.Icon_GroupIcon_Medal_Gold { background-position: -5562px 0; width: 93px; height: 110px; }
.game-icon-sprite.Icon_GroupIcon_Medal_Silver { background-position: -5665px 0; width: 93px; height: 110px; }
.game-icon-sprite.Icon_RankIcon_Star01_l { background-position: -5768px 0; width: 201px; height: 191px; }
.game-icon-sprite.Icon_RankIcon_Star02_On { background-position: -5979px 0; width: 48px; height: 46px; }
.game-icon-sprite.Icon_RankIcon_Star03_1 { background-position: -6037px 0; width: 185px; height: 190px; }
.game-icon-sprite.Icon_RankIcon_Star03_3 { background-position: -6232px 0; width: 185px; height: 190px; }
.game-icon-sprite.IconGroup_ClanIcon_0 { background-position: -6427px 0; width: 165px; height: 160px; }
.game-icon-sprite.IconGroup_ClanIcon_1 { background-position: -6602px 0; width: 165px; height: 160px; }
.game-icon-sprite.IconGroup_ClanIcon_2 { background-position: -6777px 0; width: 165px; height: 160px; }
.game-icon-sprite.IconGroup_ClanIcon_3 { background-position: -6952px 0; width: 165px; height: 160px; }
.game-icon-sprite.IconGroup_ClanIcon_4 { background-position: -7127px 0; width: 165px; height: 160px; }
.game-icon-sprite.IconGroup_ClanIcon_l_0 { background-position: -7302px 0; width: 348px; height: 337px; }
.game-icon-sprite.IconGroup_MenuIcon01_Bag { background-position: -7660px 0; width: 146px; height: 130px; }
.game-icon-sprite.IconGroup_MenuIcon01_Book { background-position: -7816px 0; width: 128px; height: 145px; }
.game-icon-sprite.IconGroup_MenuIcon01_Flag { background-position: -7954px 0; width: 176px; height: 150px; }
.game-icon-sprite.IconGroup_MenuIcon01_Home { background-position: -8140px 0; width: 140px; height: 142px; }
.game-icon-sprite.IconGroup_MenuIcon02_Board { background-position: -8290px 0; width: 86px; height: 100px; }
.game-icon-sprite.IconGroup_MenuIcon02_Calendar { background-position: -8386px 0; width: 95px; height: 99px; }
.game-icon-sprite.IconGroup_MenuIcon02_Chat { background-position: -8491px 0; width: 111px; height: 94px; }
.game-icon-sprite.IconGroup_MenuIcon02_Firends { background-position: -8612px 0; width: 106px; height: 95px; }
.game-icon-sprite.IconGroup_MenuIcon02_Gift { background-position: -8728px 0; width: 103px; height: 94px; }
.game-icon-sprite.IconGroup_MenuIcon02_Megaphone { background-position: -8841px 0; width: 99px; height: 101px; }
.game-icon-sprite.IconGroup_MenuIcon02_Postbox { background-position: -8950px 0; width: 112px; height: 111px; }
.game-icon-sprite.IconGroup_MenuIcon02_Ranking { background-position: -9072px 0; width: 107px; height: 103px; }
.game-icon-sprite.IconGroup_MenuIcon04_eatrh { background-position: -9189px 0; width: 83px; height: 83px; }
.game-icon-sprite.IconGroup_MenuIcon04_friends { background-position: -9282px 0; width: 83px; height: 74px; }
.game-icon-sprite.IconGroup_MenuIcon04_map { background-position: -9375px 0; width: 76px; height: 73px; }
.game-icon-sprite.IconGroup_MenuIcon5_Calendar_0 { background-position: -9461px 0; width: 77px; height: 80px; }
.game-icon-sprite.IconGroup_MenuIcon5_Calendar_1 { background-position: -9548px 0; width: 77px; height: 80px; }
.game-icon-sprite.IconGroup_MenuIcon5_Coin { background-position: -9635px 0; width: 74px; height: 77px; }
.game-icon-sprite.IconGroup_MenuIcon5_Gem { background-position: -9719px 0; width: 68px; height: 78px; }
.game-icon-sprite.IconGroup_ShopIcon_Gems_s_0 { background-position: -9797px 0; width: 308px; height: 229px; }
.game-icon-sprite.IconGroup_SkillIcon_0 { background-position: -10115px 0; }
.game-icon-sprite.IconGroup_SkillIcon_0_d { background-position: -10311px 0; }
.game-icon-sprite.IconGroup_SkillIcon_1 { background-position: -10507px 0; }
.game-icon-sprite.IconGroup_SkillIcon_1_d { background-position: -10703px 0; }
.game-icon-sprite.IconGroup_SkillIcon_2 { background-position: -10899px 0; }
.game-icon-sprite.IconGroup_SkillIcon_2_d { background-position: -11095px 0; }
.game-icon-sprite.IconGroup_TitelIcon_Lock { background-position: -11291px 0; width: 97px; height: 119px; }
.game-icon-sprite.IconGroup_TitleIcon_Anvil { background-position: -11398px 0; width: 158px; height: 106px; }
.game-icon-sprite.IconGroup_TitleIcon_Cap_Blue { background-position: -11566px 0; width: 154px; height: 109px; }
.game-icon-sprite.IconGroup_TitleIcon_Cap_Navy { background-position: -11730px 0; width: 154px; height: 109px; }
.game-icon-sprite.IconGroup_TitleIcon_Mail { background-position: -11894px 0; width: 112px; height: 114px; }
.game-icon-sprite.IconGroup_TitleIcon_News { background-position: -12016px 0; width: 121px; height: 116px; }
.game-icon-sprite.IconGroup_TitleIcon_Pencil { background-position: -12147px 0; width: 128px; height: 128px; }
.game-icon-sprite.IconGroup_TitleIcon_Postbox { background-position: -12285px 0; width: 130px; height: 130px; }
.game-icon-sprite.IconGroup_TitleIcon_Setting { background-position: -12425px 0; width: 137px; height: 137px; }

.basic-frame-sprite { background: url('/images/ui/basic-frames.png') no-repeat top left; width: 251px; height: 160px;  }
.basic-frame-sprite.BasicFrame_Oval_48_Green { background-position: 0 0; width: 48px; height: 48px; }
.basic-frame-sprite.BasicFrame_Oval_67_Line { background-position: -58px 0; width: 67px; height: 67px; }
.basic-frame-sprite.BasicFrame_RectangleSlant01 { background-position: -135px 0; width: 82px; height: 104px; }
.basic-frame-sprite.CardFrame01_BackFrame_d { background-position: -227px 0; width: 420px; height: 524px; }
.basic-frame-sprite.CardFrame01_BackFrame_n_Blue { background-position: -657px 0; width: 420px; height: 530px; }
.basic-frame-sprite.CardFrame01_BackFrame_n_Green { background-position: -1087px 0; width: 420px; height: 530px; }
.basic-frame-sprite.CardFrame01_BackFrame_n_Purple { background-position: -1517px 0; width: 420px; height: 524px; }
.basic-frame-sprite.CardFrame01_BackFrame_n_Red { background-position: -1947px 0; width: 420px; height: 530px; }
.basic-frame-sprite.CardFrame01_BackFrame_n_Yellow { background-position: -2377px 0; width: 420px; height: 530px; }
.basic-frame-sprite.CardFrame01_Frame1 { background-position: -2807px 0; width: 140px; height: 123px; }
.basic-frame-sprite.CardFrame01_Frame2 { background-position: -2957px 0; width: 94px; height: 46px; }
.basic-frame-sprite.CardFrame0203_BackFrame_d { background-position: -3061px 0; height: 255px; }
.basic-frame-sprite.CardFrame0203_BackFrame_n_Blue { background-position: -3322px 0; height: 255px; }
.basic-frame-sprite.CardFrame0203_BackFrame_n_Green { background-position: -3583px 0; height: 255px; }
.basic-frame-sprite.CardFrame0203_BackFrame_n_Purple { background-position: -3844px 0; height: 255px; }
.basic-frame-sprite.CardFrame0203_BackFrame_n_Red { background-position: -4105px 0; height: 255px; }
.basic-frame-sprite.CardFrame0203_BackFrame_n_Yellow { background-position: -4366px 0; height: 255px; }
.basic-frame-sprite.CardFrame0203_Focus { background-position: -4627px 0; width: 103px; height: 110px; }
.basic-frame-sprite.CardFrame0203_Frame { background-position: -4740px 0; width: 105px; height: 112px; }
.basic-frame-sprite.CardFrame0203_InnerFrame_Mask { background-position: -4855px 0; width: 115px; height: 115px; }
.basic-frame-sprite.ChatFrmae01 { background-position: -4980px 0; width: 85px; height: 106px; }
.basic-frame-sprite.ChatFrmae03_2 { background-position: -5075px 0; width: 58px; height: 38px; }
.basic-frame-sprite.DailyFrame01_d { background-position: -5143px 0; width: 170px; height: 158px; }
.basic-frame-sprite.DailyFrame01_n_Gray2 { background-position: -5323px 0; width: 61px; height: 61px; }
.basic-frame-sprite.DailyFrame01_s_Blue2 { background-position: -5394px 0; width: 61px; height: 61px; }
.basic-frame-sprite.DailyFrame01_s_Yellow2 { background-position: -5465px 0; width: 61px; height: 61px; }
.basic-frame-sprite.DailyFrame02_d { background-position: -5536px 0; width: 160px; height: 125px; }
.basic-frame-sprite.ItemFrame01_Focus { background-position: -5706px 0; width: 102px; height: 102px; }
.basic-frame-sprite.ItemFrame01_Frame_n_Gray1 { background-position: -5818px 0; width: 84px; height: 84px; }
.basic-frame-sprite.ItemFrame04_Frame_Blue_s { background-position: -5912px 0; width: 178px; height: 179px; }
.basic-frame-sprite.ItemFrame04_Frame_Green_s { background-position: -6100px 0; width: 178px; height: 179px; }
.basic-frame-sprite.ItemFrame04_Frame_Yellow_s { background-position: -6288px 0; width: 178px; height: 179px; }
.basic-frame-sprite.ItemFrame05_Demo_Light { background-position: -6476px 0; width: 118px; height: 128px; }
.basic-frame-sprite.ItemFrame06_Blue1 { background-position: -6604px 0; width: 110px; height: 120px; }
.basic-frame-sprite.ItemFrame06_Blue2 { background-position: -6724px 0; width: 210px; }
.basic-frame-sprite.ItemFrame06_Gray { background-position: -6944px 0; width: 110px; height: 120px; }
.basic-frame-sprite.ItemFrame06_Yellow1 { background-position: -7064px 0; width: 110px; height: 120px; }
.basic-frame-sprite.ItemFrame06_Yellow2 { background-position: -7184px 0; width: 210px; }
.basic-frame-sprite.ListFrame03_n_Blue { background-position: -7404px 0; width: 275px; }
.basic-frame-sprite.ListFrame03_n_Brown { background-position: -7689px 0; width: 275px; }
.basic-frame-sprite.ListFrame03_n_Gray { background-position: -7974px 0; width: 275px; }
.basic-frame-sprite.ListFrame03_n_Yellow { background-position: -8259px 0; width: 275px; }
.basic-frame-sprite.ListFrame04 { background-position: -8544px 0; width: 212px; height: 94px; }
.basic-frame-sprite.ListFrame05_Sky { background-position: -8766px 0; width: 78px; height: 82px; }
.basic-frame-sprite.ListFrame10_n { background-position: -8854px 0; width: 174px; height: 170px; }
.basic-frame-sprite.ListFrame10_s { background-position: -9038px 0; width: 174px; height: 170px; }
.basic-frame-sprite.PassFrame01_s1 { background-position: -9222px 0; width: 412px; height: 290px; }
.basic-frame-sprite.PassFrame01_s2 { background-position: -9644px 0; width: 224px; height: 224px; }
.basic-frame-sprite.PassFrame02_n { background-position: -9878px 0; width: 180px; height: 180px; }
.basic-frame-sprite.PassFrame02_s_Gray { background-position: -10068px 0; width: 340px; height: 290px; }
.basic-frame-sprite.PassFrame02_s_Yellow { background-position: -10418px 0; width: 340px; height: 290px; }
.basic-frame-sprite.PictureFrame00_Frame_Inner { background-position: -10768px 0; width: 203px; height: 203px; }
.basic-frame-sprite.PictureFrame00_Icon { background-position: -10981px 0; width: 77px; height: 78px; }
.basic-frame-sprite.PictureFrame01_Icon { background-position: -11068px 0; width: 55px; height: 55px; }
.basic-frame-sprite.SkillFrame02_3 { background-position: -11133px 0; width: 64px; height: 64px; }
.basic-frame-sprite.StageFrame_c { background-position: -11207px 0; width: 278px; height: 278px; }
.basic-frame-sprite.StageFrame_n { background-position: -11495px 0; width: 278px; height: 278px; }
.basic-frame-sprite.StageFrame_s { background-position: -11783px 0; width: 278px; height: 278px; }
.basic-frame-sprite.TableFrame01_1 { background-position: -12071px 0; width: 112px; height: 112px; }
.basic-frame-sprite.TableFrame02_1 { background-position: -12193px 0; width: 656px; height: 601px; }
.basic-frame-sprite.TableFrame05 { background-position: -12859px 0; width: 152px; height: 146px; }
.basic-frame-sprite.TableFrame06 { background-position: -13021px 0; width: 127px; height: 309px; }
.basic-frame-sprite.TableFrame12_1 { background-position: -13158px 0; width: 75px; height: 125px; }
.basic-frame-sprite.TableFrame12_2 { background-position: -13243px 0; width: 90px; height: 99px; }
.basic-frame-sprite.TableFrame12_3 { background-position: -13343px 0; width: 90px; height: 99px; }

.labels-sprite { background: url('/images/ui/labels.png') no-repeat top left; width: 171px; height: 54px;  }
.labels-sprite.Label_CornerTag00 { background-position: 0 0; width: 174px; height: 174px; }
.labels-sprite.Label_CornerTag00_White { background-position: -184px 0; width: 174px; height: 174px; }
.labels-sprite.Label_CornerTag01_Color_Purple { background-position: -368px 0; width: 134px; height: 134px; }
.labels-sprite.Label_CornerTag01_Color_Red { background-position: -512px 0; width: 134px; height: 134px; }
.labels-sprite.Label_CornerTag01_Color_Yellow { background-position: -656px 0; width: 134px; height: 134px; }
.labels-sprite.Label_CornerTag01_White { background-position: -800px 0; width: 134px; height: 134px; }
.labels-sprite.Label_Ribbon00_Color_Blue { background-position: -944px 0; width: 317px; height: 146px; }
.labels-sprite.Label_Ribbon00_Color_Orange { background-position: -1271px 0; width: 270px; height: 146px; }
.labels-sprite.Label_Ribbon00_Color_Purple { background-position: -1551px 0; width: 317px; height: 146px; }
.labels-sprite.Label_Ribbon00_Color_Red { background-position: -1878px 0; width: 270px; height: 146px; }
.labels-sprite.Label_Ribbon00_Icon { background-position: -2158px 0; width: 35px; height: 34px; }
.labels-sprite.Label_Ribbon01 { background-position: -2203px 0; width: 232px; height: 126px; }
.labels-sprite.Label_Ribbon01_Icon { background-position: -2445px 0; width: 29px; height: 30px; }
.labels-sprite.Label_Ribbon02 { background-position: -2484px 0; width: 174px; height: 96px; }
.labels-sprite.Label_Ribbon02_Icon { background-position: -2668px 0; width: 44px; height: 29px; }
.labels-sprite.Label_Tag00_n_Blue { background-position: -2722px 0; height: 70px; }
.labels-sprite.Label_Tag00_n_Green { background-position: -2903px 0; height: 70px; }
.labels-sprite.Label_Tag00_n_Purple { background-position: -3084px 0; height: 70px; }
.labels-sprite.Label_Tag00_n_Yellow { background-position: -3265px 0; height: 70px; }
.labels-sprite.Label_Tag00_s_Red { background-position: -3446px 0; width: 179px; height: 78px; }
.labels-sprite.Label_Tag00_White1 { background-position: -3635px 0; height: 70px; }
.labels-sprite.Label_Tag00_White2 { background-position: -3816px 0; height: 70px; }
.labels-sprite.Label_Tag00_White3 { background-position: -3997px 0; width: 179px; height: 78px; }
.labels-sprite.Label_Tag01_Color_Blue { background-position: -4186px 0; width: 50px; }
.labels-sprite.Label_Tag01_Color_Green { background-position: -4246px 0; width: 50px; }
.labels-sprite.Label_Tag01_Color_Navy { background-position: -4306px 0; width: 50px; }
.labels-sprite.Label_Tag01_Color_Orange { background-position: -4366px 0; width: 50px; }
.labels-sprite.Label_Tag01_Color_Red { background-position: -4426px 0; width: 49px; }
.labels-sprite.Label_Tag01_White { background-position: -4485px 0; width: 50px; }
.labels-sprite.Label_Tag02_Color_Orange { background-position: -4545px 0; width: 41px; height: 45px; }
.labels-sprite.Label_Tag02_Color_Sky { background-position: -4596px 0; width: 41px; height: 45px; }
.labels-sprite.Label_Tag02_White { background-position: -4647px 0; width: 41px; height: 45px; }
.labels-sprite.Label_Tag03 { background-position: -4698px 0; width: 83px; height: 86px; }
.labels-sprite.Label_Tag03_White { background-position: -4791px 0; width: 83px; height: 86px; }
.labels-sprite.Label_Tag04_Color_Purple { background-position: -4884px 0; width: 113px; height: 107px; }
.labels-sprite.Label_Tag04_Color_Red { background-position: -5007px 0; width: 113px; height: 107px; }
.labels-sprite.Label_Tag04_White1 { background-position: -5130px 0; width: 113px; height: 107px; }
.labels-sprite.Label_Tag04_White2 { background-position: -5253px 0; width: 113px; height: 107px; }
.labels-sprite.Label_Tag04_White3 { background-position: -5376px 0; width: 103px; height: 95px; }


.label-sprite {
    background-image: url("/images/ui/labels2.png");
}

.ui-sprite {
    background-image: url("/images/ui/ui.png");
}

.text-red {
    color: #ff5663;
}

.text-gray {
    color: #A2AECD;
}

.ribbon {
    width: 200px;
    height: 52px;
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.ribbon .label-sprite.left-sprite {
    width: 40px;
    height: 52px;
    position: absolute;
    left: 0;
    background-position-x: 0;
}

.ribbon .label-sprite.right-sprite {
    width: 40px;
    height: 52px;
    position: absolute;
    right: 0;
    background-position-x: 40px;
}

.ribbon .label-sprite.content-sprite {
    position: absolute;
    left: 39px;
    right: 39px;
    height: 52px;
}

.ribbon .label-sprite.content-sprite .label {
    font-weight: bold;
    color: white;
    position: relative;
    top: 10px;
}

.ribbon .label-sprite.star-icon {
    width: 16px;
    height: 16px;
    background-position-y: 128px;
}

.ribbon .star-icon.star-left {
    position: absolute;
    left: 30px;
    top: 14px;
}

.ribbon .star-icon.star-right {
    position: absolute;
    right: 26px;
    top: 14px;
}


.ribbon-red .label-sprite.left-sprite {
    background-position-y: 0;
}

.ribbon-red .label-sprite.right-sprite {
    background-position-y: 0;
}

.ribbon-red .label-sprite.content-sprite {
    background-position-y: -52px;
}

.ribbon-orange .label-sprite.left-sprite {
    background-position-y: -120px;
}

.ribbon-orange .label-sprite.right-sprite {
    background-position-y: -120px;
}

.ribbon-orange .label-sprite.content-sprite {
    background-position-y: -174px;
}


.ribbon-purple .label-sprite.left-sprite {
    background-position-y: -232px;
    height: 45px;
}

.ribbon-purple .label-sprite.right-sprite {
    background-position-y: -232px;
    height: 45px;
}

.ribbon-purple .label-sprite.content-sprite {
    background-position-y: -278px;
    height: 45px;
}

.ribbon-purple .label-sprite.content-sprite .label {
    top: 6px;
}



.input-icon {

    position: absolute;
    top: 11px;
    left: 11px;
}

.input-container {
    position: relative;
}


.form-group .input-container {
    margin-bottom: 10px;
}

.widget-header {
    width: 100%;
    height: 49px;
    min-height: 49px;

    /* border-bottom: 2px solid #e7e7ee; */
    position: relative;
    background-color: #f3f3fb;
}

.widget-header .resources-block {
    position: absolute;
    right: 36px;
    top: 7px;
}

.resource-slot {
    height: 26px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 2px 3px #e7e7ee;
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.resource-slot .resource-icon {
    position: absolute;
    left: -5px;
    top: 0;
}

.resource-slot .counter {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 8px;
}

.resource-slot.resource-slot-yellow {
    color: #FD9744;
}

.resource-slot.resource-slot-blue {
    color: #1cb0f6;
}

.resource-slot.no-plus .counter {
    right: 10px;
}

.resource-slot.no-plus .plus {
    display: none;
}

.resource-slot.no-shadow {
    box-shadow: none;
}

.resource-slot .plus {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    position: absolute;
    right: 4px;
    top: 4px;
    display: none;
}

.resource-slot-yellow .plus {
    background-color: #ffea9a;
}

.resource-slot-blue .plus {
    background-color: #c3f7ff;
}

.resource-slot .plus .plus-label {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
}

.resource-slot-yellow .plus .plus-label {
    color: #ff9661;
}

.resource-slot-blue .plus .plus-label {
    color: #1cb0f6;
}

.widget-header .player-info-block {
    width: 100px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 2px;
}

.widget-header .player-info-block .player-miniature .bg {
    /*
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    box-shadow: 0 2px 3px #e7e7ee;
    position: relative;*/
}


.widget-header .player-info-block .level-block {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: 25px;
}

.widget-header .player-info-block .level-block .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: #1bbff9;
    border-radius: 8px;
    box-shadow: 0 2px 0 #1899d6;
}

.widget-header .player-info-block .level-block .label {
    position: absolute;
    font-weight: bold;
    color: white;
    text-align: center;
    left: 0;
    right: 0;
    font-size: 11px;
    top: 3px;
}

.widget-header .player-info-block .username {
    color: #58667d;
    font-weight: bold;
    font-size: 10px;
    position: absolute;
    top: 3px;
    left: 50px;
    max-width: 80px;
    overflow: hidden;
}

.slider-user-info-sprite {
    background-image: url("/images/ui/sliders.png");
    background-size: 40px 150px;
}

.widget-header .slider-user-info {
    width: 70px;
    height: 15px;
    position: absolute;
    left: 50px;
    bottom: 5px;
}

.widget-header .slider-user-info-sprite.left-sprite {
    width: 10px;
    height: 15px;
    left: 0;
}

.widget-header .slider-user-info-sprite.right-sprite {
    width: 10px;
    height: 15px;
    position: absolute;
    right: 0;
    top: 0;
    background-position-x: -8px;
}

.widget-header .slider-user-info-sprite.content-sprite {
    left: 10px;
    right: 10px;
    position: absolute;
    height: 15px;
    top: 0;
    background-repeat: repeat-x;
    background-position-y: -15px;
}

.widget-header .slider-user-info .progress-bar {
    background-color: #e5e5e5;
    height: 6px;
    position: absolute;
    top: 4px;
    left: 9px;
    right: 9px;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
}

.widget-header .slider-user-info .progress-fill {
    background-color: #95ff98;
    height: 4px;
    box-shadow: 0 2px 0 #00ff06;
    border-radius: 2px;
}

.widget-header .experience-progress-bar {
    background-color: white;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.widget-header .experience-progress-bar .progress-fill {
    background-color: #ff9600;
    height: 2px;
    box-shadow: 0 2px 0 #ff8200;
    border-radius: 2px;
}

.index-menu {
    text-align: center;
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
}

.index-menu .regular-element .notification-container {
    position: absolute;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #cbf6ff;
    left: 15px;
    right: 15px;
    bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #00586a;
    min-height: 17px;
}

.index-menu .regular-element .notification-container.red {
    background-color: #ffcbcb;
    color: #a90000;
    font-size: 10px;
}

.regular-element .dot-red, .regular-element-small .dot-red {
    position: absolute;
    display: block;
    right: 5px;
    top: 5px;
}

.index-menu .regular-element {
    width: 100px;
    height: 85px;
    background-color: white;
    border-radius: 12px;
    /*box-shadow: 0 2px 3px #cbc8c8;*/
    box-shadow: 0 2px 3px #152257;
    position: relative;
    display: inline-block;
    margin: 0 5px 10px 5px;
}

.index-menu .regular-element .image {
    width: 80px;
    height: 80px;
    background-size: 80px;
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.index-menu .regular-element-small {
    width: 78px;
    height: 85px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 3px #152257;

    position: relative;
    display: inline-block;
    margin: 0 2px 10px 0px;
}

.index-menu .regular-element-small .icon.calendar {
    zoom: 0.5;
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    margin: 0 auto;
}

.index-menu .regular-element .image.travel {
    background-image: url(/images/menu/travel.png);
}

.index-menu .regular-element .image.rewards {
    background-image: url(/images/menu/rewards.png);
}

.index-menu .regular-element .image.jeweler {
    background-image: url(/images/menu/jeweler.png);
}

.index-menu .regular-element .image.basement {
    background-image: url(/images/menu/basement.png);
}

.index-menu .regular-element .image.teamBattle {
    background-image: url(/images/menu/teamBattle.png);
}

.index-menu .regular-element .image.clanBattle {
    background-image: url(/images/menu/clanBattle.png);
}


.index-menu .label, .main-menu .regular-element .label {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #4C4C4C;
    font-size: 12px;
    font-weight: bold;
}

.main-menu {
    margin: 0 auto;
    position: relative;
    left: 0;
    right: 0;
    text-align: center;
    background-color: #eceef9;
    border-top: 1px solid #dddde5;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

.main-menu .regular-element {
    width: 70px;
    height: 70px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 3px #e7e7ee;
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.main-menu .regular-element .image {
    width: 60px;
    height: 60px;
    background-size: 60px;
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.main-menu .regular-element .image.menu {
    background-image: url(/images/menu/menu.png);
}

.main-menu .regular-element .image.profile .frame, .main-menu .regular-element .image.profile .online {
    display: none;
}

.main-menu .regular-element .image.clan {
    background-image: url(/images/menu/clan.png);
}

.main-menu .clan-button.no-clan {
    filter: grayscale(1);
    opacity: 0.7;
}

.menu-bg {
    /*
    background-image: url(/images/bg/menu.jpg);
    background-size: 400px 600px;
    background-position: center 0;
    background-repeat: no-repeat;
    opacity: 0.2;*/
    background-color: #313b61;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.equip-slot {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
}


.equip-slot.cell1 {
    top: 0;
}

.equip-slot.cell2 {
    top: 65px;
}

.equip-slot.cell3 {
    bottom: 0;
}

.equip-slot.has-item .icon {
    display: none;
}

.equip-slot.empty .icon {
    zoom: 0.4;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 19px;
    opacity: 0.6;
}

.equip-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

.equip-container .equip-panel {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}


.equip-slot .gray-icons30-sprite {
    opacity: 0.5;
}

.equip-container .equip-panel .frame {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e7ed;
    border-radius: 12px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

.equip-container .equip-panel.equip-panel-left {
    left: 55px;
}

.equip-container .equip-panel.equip-panel-right {
    right: 55px;
}

.stat-group {
    width: 100px;
    height: 35px;
    position: relative;
}

.item-miniature {
    width: 50px;
    height: 50px;
    background-size: 50px;
}



.stat-group .info {
    position: absolute;
    left: 45px;
    top: 0;
    height: 100%
}

.stat-group .info .label {
    font-size: 11px;
    font-size: clamp(8px, 2vw, 11px);
    color: #7C8A97;
    font-weight: bold
}

.stat-group .info .value {
    font-size: 14px;
    font-size: clamp(12px, 2vw, 14px);
    color: #43536C;
    font-weight: bold
}

.stats-group  {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.info-block-with-title {
    background-color: #f6f8ff;
    margin: 10px;
    position: relative;
    border-radius: 12px;
}

.info-block-with-title .title {
    position: absolute;
    width: 150px;
    height: 25px;
    background-color: white;
    border-radius: 12px;
    top: -5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-shadow: 0 2px 3px #dfe7f9;
}

.info-block-with-title .title .label {
    color: #7C8A97;
    font-weight: bold;
    margin-top: 3px;
    text-align: center;
}

.info-block-with-title .content {
    padding: 35px 20px;
    position: relative;
}

.royal-progress-bar {
    width: 100px;
    height: 15px;
    background-color: #c5d3e6;
    border-radius: 4px;
    position: absolute;
}

.royal-progress-bar .filler {
    height: 15px;
    background-color: #ff9c3a;
    border-radius: 4px;
}

.royal-progress-bar .label {
    position: absolute;
    top: 0;
    font-size: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    color: #43536C;
}

.royal-progress-bar.max-level .label {
    display: none;
}

.royal-rewards {
    width: 100%;
    height: calc(-277px + 100vh);
    height: calc(-277px + 100dvh);
    overflow-y: scroll;
}

.royal-rewards-level {
    width: 100%;
    height: 82px;
    position: relative;
}

.royal-rewards-level .free-rewards {
    width: 50%;
    float: left;
    height: 100%;
    position: relative;
}

.royal-rewards-level .free-rewards .level-ok {
    background-color: #c6f7ff;
}

.royal-rewards-level .free-rewards .has-reward.level-ok {
    animation: blink-mint 2s linear infinite;
}

.royal-rewards-level .has-reward.level-ok.reward-taken {
    animation: none;
}

.royal-rewards-level .level-ok.reward-taken .light {
    display: none;
}

.royal-rewards-level .premium-rewards .has-reward.level-ok .light{
    width: 82px;
    height: 67px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 13px;
    animation: blink-mint 2s linear infinite;
}

.royal-rewards-level .free-rewards .level-not-ok {
    background-color: #f4f3fd;
}

.royal-rewards-level .check-icon {
    position: absolute;
    top: -8px;
    left: -7px;
}

.royal-rewards-level .reward-taken .check-icon {
    display: block;
}

.royal-rewards-level .reward-taken a {
    display: none;
}

.royal-rewards-level .premium-rewards {
    width: 50%;
    float: right;
    height: 100%;
    position: relative;
}

.royal-rewards-level .level-progress {
    width: 10px;
    height: 100%;
    background-color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.royal-rewards-level .level-progress .filler {
    width: 0;
    border-left: 5px solid #ff9e39;
    border-right: 5px solid #ff9e39;
}

.royal-rewards-level .level {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    text-align: center;
}


.mark.mark-orange {
    width: 30px;
    height: 30px;
    background-size: 30px;
    background-color: #ff9e3a;
    border-radius: 7px;
    border: 1px solid white;
    transform: rotate(45deg);
    position: absolute;
}


.scrollbar1::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f9f9fd;
}

.scrollbar1::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(180deg, #FDD505, #FDD505);
}

.scrollbar1::-webkit-scrollbar-track {
    -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
    background-color: #f5f5f5;
}

.territories-container {
    margin: 0 auto;
    text-align: center;
    max-width: 400px;
    flex-grow: 1;
    overflow-y: auto;
}

.territories-container .territory-container {
    display: inline-block;
    height: 180px;
    margin: 10px;
    position: relative;
}

.territories-container .territory-container .info {
    position: relative;
    top: 4px;
}

.territory-picture-container {
    background: url('/images/ui/basic-frames.png') no-repeat top left;
    background-size: 2686px 120px;
    background-position: -2438px 0; width: 131px; height: 120px;
    position: relative;
}

.territory-picture-container .territory-picture {
    width: 118px;
    height: 108px;
    background-size: cover;
    position: relative;
    left: 7px;
    top: 7px;
    background-image: url("/images/territories/sprite.png");
}


.territory-picture-container .territory-picture.territory1 {
    background-position: 0 0;
}

.territory-picture-container .territory-picture.territory2 {
    background-position: -123px 0;
}

.territory-picture-container .territory-picture.territory3 {
    background-position: -369px 0;
}

.territory-picture-container .territory-picture.territory4 {
    background-position: -615px 0;
}

.territory-picture-container .territory-picture.territory5 {
    background-position: -861px 0;
}

.territory-picture-container .territory-picture.territory6 {
    background-position: -1107px 0;
}


.territory-container.closed .territory-picture.territory2 {
    background-position: -246px 0;
}

.territory-container.closed .territory-picture.territory3 {
    background-position: -492px 0;
}

.territory-container.closed .territory-picture.territory4 {
    background-position: -738px 0;
}

.territory-container.closed .territory-picture.territory5 {
    background-position: -984px 0;
}

.territory-container.closed .territory-picture.territory6 {
    background-position: -1230px 0;
}

.territory-container .locker-icon {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.territory-container.closed .locker-icon {
    display: block;
}

.territory-container .info .territory-name {
    color: #43536C;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.territory-container .info .territory-stages-label {
    color: #92a4b4;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.territories-assets.star-s {
    background: url('/images/ui/game-icons.png') no-repeat top left;
    background-size: 1256px 36px;
    background-position: -576px 0;
    width: 20px;
    height: 19px;
}

.scene-title {
    padding: 7px 10px;
    position: relative;
    min-height: 30px;
}

.scene-title .back-icon-container {
    background-color: #515f92;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.scene-title .back-icon-container .back-icon {
    zoom: 0.3;
    left: 27px;
    position: absolute;
    top: 18px;
}

.scene-title .label {
    color: #43536C;
    font-size: 17px;

    display: inline-block;
    vertical-align: top;
    line-height: 30px;
}

.scene-title .energy-container {
    position: absolute;
    right: 10px;
    top: 12px;
    width: 85px;
    height: 26px;
}

.scene-title .energy-container .icon {
    background-image: url(/images/icons/energy.png);
    background-size: 26px;
    width: 26px;
    height: 26px;
    position: absolute;
    z-index: 3;
    left: -3px;
    top: -2px;
}

.scene-title .energy-container .value-container {
    width: 80px;
    height: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    border-bottom: 1px solid #dfdfdf;
    position: absolute;
    top: 0;
    line-height: 24px;
    right: 0;
    font-weight: bold;
    color: #515f92;
    text-align: center;
    font-size: 10px;
}


.stages-container {
    margin: 0 auto;
    text-align: center;
}

.stages-container .stage-container {
    display: inline-block;
    margin: 5px;
}

.stage-container {
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 26px;
}

.stage-container.purple {
    background-color: white;
    border: 4px solid #8b9ce0;
}

.stage-container.green {
    background-color: white;
    border: 4px solid #4cf987;
}

.stage-container.gray {
    background-color: white;
    border: 4px solid #e3e5f5;
}

.stage-container.gray-no-frame {
    background-color: #e3e5f5;
    border: 4px solid #f3f3fb;
}

.stage-container.red-no-frame {
    background-color: #ff8686;
    border: 4px solid #f3f3fb;
}

.stage-container .content {
    width: 52px;
    height: 52px;
    border-radius: 19px;
    position: absolute;
    left: 4px;
    top: 4px;
}

.stage-container .content .stars {
    position: absolute;
    bottom: 10px;
    width: 39px;
    height: 13px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 0;
}

.stage-container .content .stars.stars3 .star, .territory-royal .star, .campaign-star-icon.star1 {
    background-position: -13px -56px;
}

.stage-container .content .stars.stars2 .star, .campaign-star-icon.star0 {
    background-position: -26px -56px;
}

.stage-container .content .stars.stars1 .star {
    background-position: -39px -56px;
}

.stage-container .content .stars .star, .territory-royal .star, .campaign-star-icon {
    width: 13px;
    height: 13px;
    display: inline-block;
    background-size: 80px 70px;
}

.stage-stars-container {
    position: absolute;
    bottom: 11px;
    width: 100%;
}

.stage-stars-container .star {
    width: 13px;
    height: 13px;
    background-size: 80px 70px;
    background-position: -39px -56px;
    position: absolute;
}

.stage-stars-container .star0,
.stage-stars-container.stars1 .star.pos2,
.stage-stars-container.stars1 .star.pos3,
.stage-stars-container.stars2 .star.pos3 {
    background-position: -26px -56px;
}

.stage-stars-container .star.pos1 {
    left: 0;
}

.stage-stars-container .star.pos2 {
    margin: 0 auto;
    text-align: center;
    top: 6px;
    left: 0;
    right: 0;
}

.stage-stars-container .star.pos3 {
    right: 0;
}

.stage-container.purple .content {
    background-color: #6170aa;
}

.stage-container.green .content {
    background-color: #26e69b;
}

.stage-container.gray .content {
    background-color: #e3e5f5;
}

.stage-container.gray-no-frame .content {
    background-color: #e3e5f5;
}

.stage-container .content .level {
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    left: 0;
    right: 0;
}


.stage-container.purple .content .level, .stage-container.green .content .level {
    color: white;
    top: 6px;
}

.stage-container.no-stars .content .level {
    top: 14px;
}

.stage-container.gray-no-frame .content .level, .stage-container.red-no-frame .content .level {
    display: none;
}

.stage-container.gray .content .level {
    color: #b3bedb;
    top: 13px;
}
.stage-container.gray-no-frame .content .locker-icon, .stage-container.red-no-frame .content .locker-icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.stage-container .boss-icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -20px;
}

.territory-royal {
    padding: 10px 0;
    background-color: #f3f3fb;
    width: 100%;
    position: sticky;
    bottom: 0;
    border-top: 1px solid #e3e5f5;
    display: flex;
    justify-content: space-around;
}

.territory-royal .left-container {
    height: 26px;
    width: 85px;
    line-height: 26px;
    margin-left: 10px;
    font-weight: bold;
    color: #3d557c;
}

.territory-royal .progress-bar {
    margin-right: 10px;
    height: 26px;
    width: 100%;
    border-radius: 6px;
    background-color: #c1cfe5;
    position: relative;
}

.territory-royal .progress-bar .filler {
    background: linear-gradient(180deg, rgb(139 156 224) 0%, rgb(97 112 170) 100%);
    height: 100%;
}

.territory-royal .chest-container {
    position: absolute;
    width: 42px;
    height: 42px;
    top: -11px;
}

.territory-royal .chest-container .chest {
    position: absolute;
    width: 42px;
    height: 42px;
    background-size: cover;
    top: 0
}

.territory-royal .chest-container.has-reward .chest {
    animation: zoom-in-zoom-out 2s linear infinite;
}

.territory-royal .chest-container.has-reward a {
    display: block !important;
}

.territory-royal .chest-container.taken .tick-icon {
    display: block;
}

.battle-bg {
    background-size: 400px 600px;
    background-position: center 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
    top: 0;
    overflow: hidden;
}

.battle-bg.territory1 {
    background-image: url("/images/bg/territory1.jpg");
}

.battle-bg.territory2 {
    background-image: url("/images/bg/territory2.jpg");
}

.battle-bg.territory3 {
    background-image: url("/images/bg/territory3.jpg");
}

.battle-bg.territory4 {
    background-image: url("/images/bg/territory4.jpg");
}

.battle-bg.territory5 {
    background-image: url("/images/bg/territory5.jpg");
}

.battle-bg.territory6 {
    background-image: url("/images/bg/territory6.jpg");
}

.battle-bg.manager {
    background-image: url("/images/bg/manager.jpg");
}

.battle-bg.tourn {
    background-image: url("/images/bg/tourn.jpg");
}

.battle-bg.dung {
    background-image: url("/images/bg/dung.jpg");
}

.battle-bg.wagon {
    background-image: url("/images/bg/wagon.jpg");
}

.battle-bg.teamBattle {
    background-image: url("/images/bg/teamBattle.jpg");
}

.character {
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: character-idle;
}

.character.dead, .character:has(.shield) {
    animation: none !important;
}

.character .killer-container {
    display: none;
    color: white;
    position: relative;
    top: -10px;
    margin: 0 auto;
    text-align: center;
}

.character .killer-container .icon {
    width: 20px;
    height: 40px;
    background-image: url(/images/ui/skull.png);
    background-size: cover;
    margin: 0 auto;
    display: inline-block;
}

.character .killer-container .killer-name {
    height: 50px;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    display: inline-block;
}

.character-area.character-right .killer-container {
    transform: scaleX(-1);
}

.character.dead .killer-container {
    display: block;
}


.profile-character {
    right: 0;
    margin: 0 auto;
    top: 42px !important;
    height: 25vmax !important;
    width: auto !important;
    max-height: 314px !important;
    left: 0;
}

.profile-character.character-area61 {

    top: 22px;
    left: 46px !important;
    aspect-ratio: 430 / 560;
}

.profile-character.character-area65 {
    width: 113px;
    height: 220px;
    top: 22px;
}

.profile-character.character-area66 {
    aspect-ratio: 318 / 560;
    top: 22px;
}

.profile-character.character-area67 {
    aspect-ratio: 319/560;
    top: 22px;
}

.profile-character.character-area68 {
    width: 144px;
    height: 220px;
    top: 22px;
}

.profile-character.character-area69 {
    width: 167px;
    height: 220px;
    top: 22px;
}

.profile-character.character-area70 {
    width: 204px;
    height: 220px;
    top: 22px;
    left: -20px !important;
}

.profile-character.character-area71 {
    width: 203px;
    height: 220px;
    top: 22px;
    left: -20px !important;
}

.profile-character.character-area72 {
    width: 155px;
    height: 220px;
    top: 22px;
    left: -20px !important;
}

.profile-character.character-area73 {
    width: 157px;
    height: 220px;
    top: 22px;
    left: -30px !important;
}


.character.character78.dead .grave {
    background-image: url("/images/characters/78_grave.png") !important;
    background-size: cover !important;
    width: 250px !important;
    height: 120px !important;
}

.character-area78 .take-damage-animation {
    display: none;
}

.character.character78.zoom-animation {
    animation: 0.25s vertical-shaking linear forwards !important;
}

.battle-bg .character.dead {
    background-image: none !important;
}

.character-left.attack {
    animation: 0.25s attack linear forwards;
}

.character-right.attack {
    animation: 0.25s attack-reverse linear forwards;
}

.battle-bg .character.dead .grave {
    display: block;
    width: 220px;
    height: 220px;
    background-image: url("/images/characters/grave.png");
    background-size: 220px;
    position: absolute;
    bottom: 0;
    animation: 0.4s bounce-in-top-grave forwards;
    left: 50%;
    right: 0;
    margin: 0 auto;
    transform: translateX(-50%);
}

.battle-bg .character.dead .animations-area {
    display: none;
}

.battle-bg .character .mask {
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    filter: grayscale(100%) brightness(53%) sepia(105%) hue-rotate(-52deg) saturate(1000%) contrast(1);
    width: 100%;
    height: 100%;
}

.character-area {
    position: absolute;
    /*top: 200px;*/
}

.battle-bg .character-area.character-left {
    left: 0;
}

.battle-bg .character-area.character-right {
    right: 0;
}

.battle-bg .character-area.character-right {
    transform: scaleX(-1);
}

.battle-bg .character .mask.hide-animation {
    animation: opacity-hide 0.9s linear forwards;
}

.battle-bg .character.zoom-animation {
    animation: zoom-in-zoom-out 0.5s forwards;
}

.battle-bg .character.zoom-animation {
    animation: zoom-in-zoom-out 0.5s forwards;
}



.battle-header {
    position: relative;
}

.hp-bar {
    width: 200px;
    height: 8px;
    background-color: #3a4674;
    border-radius: 12px;
    padding: 2px;
    position: relative;
    top: 10px;
    left: 24px;
}

.battle-header .slider-with-mark.mark-right .hp-bar{
    left: 0;
    top: 0;
}

.battle-header .slider-with-mark.mark-right .filler {
    float: right;
}

.hp-bar .filler {
    background-color: #ff515a;
    height: 8px;
    border-radius: 12px;
    transition:width 1s;
}

.battle-header .step-progress {
    width: 160px;
    height: 8px;
    left: 0;
    right: 0;
    position: absolute;
    margin: 0 auto;
    bottom: 5px;
}

.battle-header .step-progress .steps-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.battle-header .step-progress .step {
    width: 20px;
    height: 20px;
    position: relative;
    top: -14px;
}

.battle-header .step-progress .step .value {
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    position: relative;
    top: 3px;
    color: white;
}

.battle-header .step-progress .step.yellow .value {
    color: #C0553C;
}

.battle-header .step-progress .step-progress-bar {
    height: 100%;
    background-color: #c5c8e1;
    left: 16px;
    position: absolute;
    right: 16px;
    top: -8px;
}

.battle-header .step-progress .step-progress-bar .filler {
    height: 100%;
    background-color: #ff9e3a;
    transition: width 1s;
}

.battle-header .slider-with-mark.slider-green .filler {
    background-color: #67e97a;
}

.hp-bar .value {
    font-size: 8px;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 0;
    font-weight: bold;
}

.slider-with-mark .boss-icon {
    position: absolute;
    left: 3px;
    top: 3px;
}

.slider-with-mark .mark {
    background-image: url("/images/ui/sliders.png");
    background-size: 32px 120px;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
}

.slider-with-mark .mark.mark-red {
    background-position-y: -56px;
}

.slider-with-mark {
    height: 32px;
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 230px;
    top: -9px;
}

.filler-parts {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0
}

.part-container {
    width: 50px;
    height: 50px;
    position: absolute;
}

.part-container1 {
    right: 0;
    top: 0;
}

.part-container2 {
    right: 0;
    top: 50px;
}

.part-container3 {
    left: 0;
    top: 50px;
}

.part-container4 {
    left: 0;
    top: 0;
}

.part-container .filler {
    background-image: url("/images/ui/joystick/button-fill.png");
    width: 50px;
    height: 50px;
    background-size: 50px 200px;
}

.part-container1 .filler {
    background-position-y: -100px;
}

.part-container2 .filler {
    background-position-y: -150px;
}

.part-container3 .filler {
    background-position-y: -50px;
}

.daily-rewards .daily-reward-slot {
    margin: 5px 2px 10px 2px;
}

.daily-reward-slot {
    width: 25%;
    height: 85px;
    border-radius: 16px;
    position: relative;
}

.daily-reward-slot.full-slot {
    width: 78%;
    background-color: #ffefb2;
}

.daily-reward-slot.taken {
    background-color: #f3f3fb;
}

.daily-reward-slot.active {
    background-color: #c6f4ff;
    animation: blink-mint 2s linear infinite;
}

.daily-reward-slot.blocked {
    background-color: #f4f3fd;
}

.daily-reward-slot .title {
    position: absolute;
    width: 52px;
    height: 16px;
    border-radius: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -8px;
    font-size: 9px;
}

.daily-reward-slot.taken .title {
    background-color: #f5f5fc;
    border: 3px solid #f5f5fc;
    color: #dbdee7;
}

.daily-reward-slot.active .title {
    background-color: white;
    border: 3px solid #c6f4ff;
    color: #34ADFC;
}

.daily-reward-slot.blocked .title {
    background-color: white;
    border: 3px solid #f4f3fd;
    color: #7C8A97;
}

.daily-reward-slot.full-slot .title {
    background-color: white;
    border: 3px solid #ffefb2;
    color: #FF9761;
}

.daily-reward-slot .resource-icon {
    zoom: 0.5;
    margin: 0 auto;
    position: absolute;
    bottom: 58px;
    left: 0;
    right: 0;
}

.daily-reward-slot .footer {
    width: 100%;
    height: 24px;
    border-radius: 0 0 16px 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #cecedd;
}

.daily-reward-slot.taken .footer {
    background-color: #e8e9f7;
}

.daily-reward-slot.active .footer {
    background-color: #aaeeff;
}

.daily-reward-slot .footer .value {
    position: relative;
    top: 2px;
}

.missions-container {
    display: block;
    overflow-y: auto;
    height: calc(-92px + 100dvh);;
}

.missions-container .mission-container {
    margin: 10px;
}

.mission-container {
    border-radius: 12px;
    border-bottom: 2px solid #e7e7ee;
    position: relative;
    padding: 20px 10px;
}

.mission-container.completed {
    background-color: #ffffff;
}

.mission-container.in-progress {
    background-color: #e3e5f5;
}

.mission-container .progress-bar, .train-category .progress-bar {
    width: 110px;
    height: 16px;
    background-color: #c5c8e1;
    border-radius: 4px;
    margin-top: 5px;
    position: relative;
}

.mission-container .progress-bar .value, .train-category .progress-bar .value {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: white;
    top: 1px;
    font-size: 10px;
    text-align: center;
}

.mission-container .progress-bar .filler, .train-category .progress-bar .filler {
    height: 100%;
    background-color: #27dc95;
    border-radius: 4px;
}

.missions-container .title {
    color: #43536C;
    font-weight: bold;
    max-width: 215px;
    word-break: break-word;
}

.mission-container .rewards-container {
    margin-top: 10px;
}

.mission-container .button-container {
    position: absolute;
    right: 10px;
    top: 0;
}

.mission-container.completed .button-container .green-button {
    display: inline-block;
}

.mission-container.completed .button-container .button-outline-gray {
    display: none;
}

.mission-container.in-progress .button-container .green-button {
    display: none;
}

.mission-container.in-progress .button-container .button-outline-gray {
    display: block;
}

.mission-container .members-container .member {
    display: inline-block;
}

.mission-container .members-container .label {
    color: #C4CAD1;
    margin: 4px 0;
}

.mission-container .member {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 1px 3px #cecedd;
    position: relative;
}

.mission-container .member .no-member {
    position: absolute;
    zoom: 0.3;
    left: 26px;
    top: 18px;
    opacity: 0.4;
}

.mission-container .member .character-miniature {
    width: 30px;
    height: 30px;
    background-size: 30px;
    border-radius: 50%;
    position: relative;
    left: 1px;
    top: 1px;
}

.character-miniature {
    position: relative;
}

.character-miniature.character1 {
    background-image: url("/images/miniatures/1.jpg");
}

.character-miniature .online-status {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
}

.character-miniature .online-status .status {
    width: 11px;
    height: 11px;
    background-color: #38df38;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

.circle {
    border-radius: 50%;
}

.tab-navigation {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 0 20px;
    border-bottom: 2px solid #e7e7ee;
    display: flex;
    flex-direction: row;
}

.tab-navigation .tab {
    position: relative;
    display: inline-block;
    padding: 10px;
}

.tab-navigation .separator {
    width: 1px;
    height: 13px;
    background-color: #e3e9f1;
    position: absolute;
    right: 0;
    top: 14px;
}

.tab-sprite {
    background-image: url("/images/ui/tabs.png");
    background-size: 32px 64px;
    width: 16px;
    height: 16px;
}

.tab-navigation .tab.active .tab-sprite {
    background-position-x: 16px;
}

.tab-sprite.calendar {

}

.tab-sprite.user {
    background-position-y: -48px;
}

.tab-sprite.clan {
    background-position-y: -32px;
}

.tab-sprite.campaign {
    background-position-y: -16px;
}


.tab-navigation .tab .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 4px;
}

.tab-navigation .tab .label {
    color: #C4CAD1;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-navigation .tab.active .border {
    position: absolute;
    bottom: 0;
    height: 2px;
    left: 12px;
    right: 12px;
    background-color: #4f74f6;
}

.tab-navigation .tab:last-child .separator {
    display: none;
}

.tab-navigation .tab.active {
    font-weight: bold;

}

.tab-navigation .tab.active .label {
    color: #4f74f6;
}

.rating-container .rating-row {
    margin-bottom: 4px;
}

.rating-row {
    border-radius: 12px;
    background-color: #ffffff;
    border-bottom: 2px solid #d7d9e9;
    height: 50px;
    position: relative;
}

.rating-row .place-ceil {
    width: 50px;
    height: 100%;
    border-radius: 12px;
    position: relative;
    display: inline-block;
}

.rating-row .user-info {
    position: relative;
    top: 0;
    display: inline-block;
    height: 50px;
    left: 10px;
    width: 50px;
}

.rating-row .place-ceil.gray {
    background-color: #f3f3fb;
}

.rating-row .place-ceil.yellow {
    background-color: #ffeeb2;
}

.rating-row .place-ceil.mint {
    background-color: #dbf8ff;
}


.rating-row .place-ceil.orange {
    background-color: #ffe0d1;
}

.rating-row .place-ceil.gray .icon {
    display: none;
}

.rating-row .place-ceil .icon {
    position: absolute;
    zoom: 0.35;
    left: 25px;
    top: 18px;
}

.rating-row .place-ceil .value {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
}

.rating-row .place-ceil.yellow .value {
    color: #EA764E;
}

.rating-row .place-ceil.mint .value {
    color: #4C549F;
}

.rating-row .place-ceil.orange .value {
    color: #A63724;
}

.rating-row .place-ceil.gray .value {
    color: #1CB0F6;
}

.rating-row .miniature-ceil {
    width: 35px;
    height: 35px;
    background-size: 35px;
    position: relative;
    left: 0;
    top: 8px;
}

.rating-row .user-info .content {
    position: absolute;
    left: 45px;
    top: 0;
    height: 100%;
    width: 150px;
}

.rating-row .name-ceil {
    text-align: left;
    max-width: 100px;
    color: #7C8A97;
    position: absolute;
    top: 15px;
    font-weight: bold;
}

.rating-row .value-ceil {
    position: absolute;
    right: 10px;
    top: 12px;
}

.rating-row .value-ceil .icon {
    position: absolute;
    right: 10px;
}

.rating-row .value-ceil .value {
    position: absolute;
    right: 34px;
    color: #43536C;
    font-weight: bold;
    top: 4px;
}

.rating-row.clan-row {
    height: 60px;
}

.rating-row.clan-row .place-ceil {
    display: none;
}

.rating-row.clan-row .value-ceil {
    top: 16px;
}

.rating-row.clan-row .clan-emblem {
    position: absolute;
    top: 6px;
    left: 10px;
}

.rating-row.clan-row .name-ceil {
    color: #43536c;
    left: 70px;
    top: 10px;
    max-width: 200px;
}

.rating-row.clan-row .name-ceil .place {
}

.rating-row.clan-row .members-counter {
    position: absolute;
    left: 70px;
    top: 30px;
    font-weight: bold;
    color: #c5cfe4;
    font-size: 12px;
}

.rating-row.clan-row .members-counter .icon {
    zoom: 0.2;
    display: inline-block;
    position: relative;
    top: 10px;
}

.clan-emblem50 {
    width: 52px;
    height: 50px;
    background-size: 52px 50px;
}

.clan-emblem100 {
    width: 103px;
    height: 100px;
    background-size: 103px 100px;
}

.clan-header .bg {
    background-image: url(/images/bg/clan.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    position: relative;
    padding: 5px;
}

.clan-header .clan-emblem100-sprite {
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    margin-top: 10px;
}

.clan-header .info {
    position: relative;
    left: 0;
    right: 0;
    text-align: center;
    margin: 15px auto 0 auto;
    color: white;
}

.clan-header .info .name {
    font-size: 17px;
    font-weight: bold;
}

.clan-header .info .description {
    margin: 5px 5px 0 5px;
    word-break: break-all;
}

.clan-header .progress-container {
    margin-top: 20px;
}

.clan-header .progress-container .level {
    position: relative;
    top: -4px;
    margin-right: 10px;
}

.clan-header .progress-bar {
    background-color: #4a588d;
    border-radius: 6px;
    height: 22px;
    width: 120px;
    position: relative;
}

.clan-header .progress-bar .filler {
    background-color: #08e9ef;
    border-radius: 6px;
    height: 100%;
}

.clan-header .progress-bar .value {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 3px;
    font-weight: bold;
    font-size: 12px;
}

.clan-header .top-right-buttons {
    position: absolute;
    right: 10px;
    top: 10px;
}

.clan-header .top-right-buttons .button {
    width: 28px;
    height: 28px;
    position: relative;
    display: inline-block;
}

.clan-header .top-right-buttons .button .icon {
    zoom: 0.6;
}

.clan-content .menu {
    padding: 10px;
    text-align: center;
}

.clan-content .menu .regular-element {
    width: 45%;
    display: inline-block;
    height: 60px;
    background-color: #f1f6fd;
    border-bottom: 2px solid #e2e6eb;
    border-radius: 12px;
    position: relative;
}

.clan-content .menu .regular-element .icon {
    position: absolute;
    left: 9px;
    top: 9px;
}

.clan-content .menu .regular-element .content {
    color: #7C8A97;
    font-weight: bold;
    position: absolute;
    left: 65px;
    top: 10px;
    text-align: left;
}

.card {
    border-radius: 12px;
    position: relative;
}

.card.card-gray {
    background-color: #f3f3fb;
}

.card.h50 {
    height: 50px;
}

.cards-container.columns2 .card {
    display: inline-block;
    width: 49%;
}

.card .left-icon-container {
    height: 100%;
    width: 50px;
    position: relative;
}

.card .left-icon-container .bg {
    position: absolute;
    left: 2px;
    top: 2px;
    right: 0;
    bottom: 2px;
    border-radius: 12px 0 0 12px;
}

.card .left-icon-container .bg-white {
    background-color: white;
}

.card .left-icon-container .icon {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

#trainModal {
    transition: left 0.25s;
    background-color: #f3f3fb;
    position: absolute;
    top: 48px;
    left: 100%;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.train-container {
    padding: 10px;
    background-color: rgb(243, 243, 251);
    padding-top: 10px;
    border-radius: 12px 12px 0 0;
    position: relative;
    overflow-y: auto;
    flex-grow: 1;
}

.train-container .train-category {
    margin-bottom: 5px;
}

.train-category {
    position: relative;
    height: 30px;
    background-color: white;
    border-radius: 12px;
    border-bottom: 2px solid #e7e7ee;
    padding: 20px 10px;
}

.train-category .stats-icon-cell {
    position: absolute;
    left: 6px;
    top: 9px;
    width: 43px;
    height: 43px;
}

.train-category .center-container {
    position: absolute;
    left: 60px;
    top: 10px;
}

.train-category .button-container {
    position: absolute;
    right: 5px;
    top: 0;
}

.menu.vertical-menu .regular-element {
    width: 100%;
    display: inline-block;
    height: 42px;
    background-color: white;
    border-bottom: 2px solid #e2e6eb;
    border-radius: 12px;
    position: relative;
}

.menu.vertical-menu .regular-element:hover, .menu.vertical-menu .regular-element:active {
    background-color: #e2e6eb;
}

.menu.vertical-menu .regular-element .icon {
    position: relative;
    left: 10px;
    width: 29px;
    height: 29px;
    top: 8px;
}

.menu.vertical-menu .regular-element .content {
    position: absolute;
    left: 50px;
    top: 0;
}

.menu.vertical-menu .regular-element .content .title {
    position: relative;
    top: 12px;
    color: #43536C;
}

.message-container .author-miniature {
    width: 40px;
    height: 40px;
    float: left;
}

.message-container .message {
    background-color: white;
    border-radius: 12px;
    margin-left: 55px;
    padding: 5px 10px;
    margin-right: 10px;
    position: relative;
}

.message-container .message .angle {
    position: absolute;
    background-image: url(/images/ui/ui.png);
    background-position: 0 0;

    width: 13px;
    height: 30px;
    left: -11px;
    top: 15px;
}

.message-container .message.mint .angle {
    background-position-x: -19px;
}

.message-container .message .text {
    margin-top: 3px;
}

.message-container .message .date {
    font-size: 10px;
    position: absolute;
    right: 5px;
    top: 9px;
    color: #9EAAB4;
}


.messages-container {
    overflow-y: auto;
    flex-grow: 1;
}

.messages-container .message-container {
    margin-bottom: 10px;
}

.messages-container :last-child {
    margin-bottom: 0;
}

.message-container .message.mint {
    background-color: #D2F6FF;
}

.dialog-container {
    background-color: white;
    padding: 10px;
    position: relative;
    clear: both;
    min-height: 38px;
}

.dialog-container .recipient-miniature-ceil {
    width: 40px;
    height: 40px;
    background-size: 40px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

.dialog-container .recipient-name {
    color: #43536C;
    font-weight: bold;
}

.dialog-container .last-message-text {
    color: #7C8A97;
}

.dialog-container:hover, .dialog-container:active {
    background-color: #D2F6FF;
}

.dialog-container .counter {
    width: 26px;
    height: 20px;
    border-radius: 12px;
    background-color: #ff5d73;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.dialog-container .counter .value {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    color: white;
}

.victory-popup {
    width: 100%;
    animation: scale0_100 0.3s linear forwards;
    position: relative;
    top: 15px;
    max-width: 400px;
    margin: 0 auto;
}

.victory-popup .stars {
    height: 40px;
    width: 120px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 10px;
}

.victory-popup .stars .star1 {
    left: 0;
    transform: rotate(45deg);
}

.victory-popup .stars .star-s {
    position: absolute;
    top: 0;
    left: 0;
}

.star-s {
    width: 32px;
    height: 32px;
    background-image: url("/images/ui/ui.png");
    background-size: 64px 56px;
    background-position: 0 -12px;
}

.victory-popup .stars .star1, .victory-popup .stars .star3{
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 0;
}

.victory-popup .star2 {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10px;
}

.victory-popup .stars .star-l {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    background-image: url("/images/ui/ui.png");
    background-size: 80px 70px;
    background-position: 0 -15px;
}

.victory-popup .stars .star3 {
    right: 0;
    transform: rotate(-45deg);
}

.victory-popup .stars .star-s.star-empty {
    background-position-x: -32px !important;
}

.victory-popup .stars .star-l.star-empty {
    background-position-x: -40px !important;
}

.victory-popup .stars .star .star-filled {
    transform: scale(0);
}

.victory-popup .stars .star.animate .star-filled {
    animation: 0.3s scale0_110_100 linear forwards;
}

.victory-popup .stars .star1.animate .star-filled {
    animation-delay: 0.4s;
}

.victory-popup .stars .star2.animate .star-filled {
    animation-delay: 0.7s;
}

.victory-popup .stars .star3.animate .star-filled {
    animation-delay: 1s;
}

.defeat-popup {
    width: 100%;
    animation: scale0_100 0.3s linear forwards;
    max-width: 400px;
    margin: 0 auto;
}

.image-effect-container {
    width: 400px;
    margin: 0 auto;
}

.image-effect {
    width: 400px;
    height: 400px;
    background-size: 400px;
    background-image: url("/images/ui/victory/image-effect.png");
    position: absolute;
    animation: rotate360 10s linear infinite;
    animation-delay: 0.7s;
}

.victory-popup .crown {
    width: 80px;
    height: 64px;
    background-size: 80px 64px;
    background-image: url("/images/ui/victory/crown.png");
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50px;
}

.victory-popup .leaf {
    width: 160px;
    height: 99px;
    background-size: 160px 99px;
    background-image: url("/images/ui/victory/leaf.png");
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 60px;
}

.victory-popup .trumpet1 {
    width: 56px;
    height: 46px;
    background-size: 56px 46px;
    background-image: url(/images/ui/victory/trumpet1.png);
    position: absolute;
    left: 80px;
    top: 130px;
    animation: trumpet1 0.2s linear forwards;
    animation-delay: 0.4s;
}

.victory-popup .trumpet2 {
    width: 45px;
    height: 45px;
    background-size: 45px 45px;
    background-image: url(/images/ui/victory/trumpet2.png);
    position: absolute;
    left: 119px;
    top: 129px;
    animation: trumpet2 0.4s linear forwards;
    animation-delay: 0.6s;
}

.victory-popup .trumpet3 {
    width: 56px;
    height: 46px;
    background-size: 56px 46px;
    background-image: url(/images/ui/victory/trumpet1.png);
    position: absolute;
    right: 72px;
    top: 129px;
    transform: scale(-1, 1);
    animation: trumpet3 0.2s linear forwards;
    animation-delay: 0.4s;
}

.victory-popup .trumpet4 {
    width: 45px;
    height: 45px;
    background-size: 45px 45px;
    background-image: url(/images/ui/victory/trumpet2.png);
    position: absolute;
    right: 119px;
    top: 129px;
    transform: scale(-1, 1);
    animation: trumpet4 0.4s linear forwards;
    animation-delay: 0.6s;
}

@keyframes canvas {
    0% {
        height: 0;
        background-size: 220px 0;
    }

    100% {
        height: 250px;
        background-size: 220px 250px;
    }
}

@keyframes trumpet1 {
    0% {
        left: 80px;
        top: 130px;
    }

    100% {
        left: 52px;
        top: 92px;
    }
}

@keyframes trumpet2 {
    0% {
        left: 119px;
        top: 129px;
    }
    100% {
        left: 91px;
        top: 91px;
    }
}

@keyframes trumpet3 {
    0% {
        right: 72px;
        top: 129px;
    }
    100% {
        right: 52px;
        top: 92px;
    }
}

@keyframes trumpet4 {
    0% {
        right: 119px;
        top: 129px;
    }
    100% {
        right: 91px;
        top: 91px;
    }
}

@keyframes arrow1 {
    0% {
        left: 80px;
        top: 130px;
    }

    100% {
        left: 52px;
        top: 92px;
    }
}

@keyframes arrow2 {
    0% {
        left: 100px;
        top: 129px;
    }
    100% {
        left: 81px;
        top: 91px;
    }
}

@keyframes arrow3 {
    0% {
        right: 76px;
        top: 132px;
    }
    100% {
        right: 76px;
        top: 95px;
    }
}

@keyframes defeat-canvas {
    0% {
        height: 0;
        background-size: 220px 193px;
    }

    100% {
        height: 193px;
        background-size: 220px 193px;
    }
}

@keyframes show-button {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.defeat-popup .skull {
    width: 80px;
    height: 70px;
    background-size: 80px 70px;
    background-image: url("/images/ui/defeat/skull.png");
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50px;
}

.defeat-popup .leaf {
    width: 160px;
    height: 99px;
    background-size: 160px 99px;
    background-image: url("/images/ui/defeat/leaf.png");
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 60px;
}

.defeat-popup .arrow1 {
    width: 56px;
    height: 46px;
    background-size: 56px 46px;
    background-image: url(/images/ui/defeat/arrow1.png);
    position: absolute;
    left: 80px;
    top: 130px;
    animation: arrow1 0.2s linear forwards;
    animation-delay: 0.7s;
}

.defeat-popup .arrow2 {
    width: 45px;
    height: 45px;
    background-size: 45px 45px;
    background-image: url(/images/ui/defeat/arrow2.png);
    position: absolute;
    left: 119px;
    top: 129px;
    animation: arrow2 0.4s linear forwards;
    animation-delay: 0.9s;
}

.defeat-popup .arrow3 {
    width: 45px;
    height: 45px;
    background-size: 45px 45px;
    background-image: url(/images/ui/defeat/arrow3.png);
    position: absolute;
    right: 76px;
    top: 132px;
    animation: arrow3 0.4s linear forwards;
    animation-delay: 0.9s;
}

.defeat-popup .canvas {
    width: 220px;
    height: 0;
    background-image: url("/images/ui/defeat/canvas.png");
    background-size: 220px 0;
    position: absolute;
    top: 144px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: defeat-canvas 0.4s linear forwards;
    animation-delay: 0.9s;
    overflow: hidden;
}

.defeat-popup .canvas .defeat-description {
    position: absolute;
    top: 60px;
    text-align: center;
    left: 0;
    right: 0;
    font-weight: bold;
    color: white;
}

.victory-popup .canvas .victory-description {
    background: -webkit-linear-gradient(#ffe77f, #ffa159);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 17px;
    font-family: fantasy;
    text-align: center;
}

#globalGameContainer {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

#globalGameContainer.time-finished .defeat-popup .canvas .defeat-description.time-finished {
    display: block;
}

#globalGameContainer.hero-dead .defeat-popup .canvas .defeat-description.hero-dead {
    display: block;
}

.defeat-popup .glow {
    width: 150px;
    height: 150px;
    background-image: url(/images/ui/defeat/glow.png);
    background-size: 149px;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: zoom-in-zoom-out 2s infinite;
}

.defeat-popup .ribbon {
    width: 300px;
    height: 64px;
    background-size: 300px 64px;
    background-image: url("/images/ui/defeat/ribbon.png");
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 130px;
}


.victory-popup .canvas {
    width: 220px;
    height: 0;
    background-image: url("/images/ui/victory/canvas.png");
    background-size: 220px 0;
    position: absolute;
    top: 144px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: canvas 0.4s linear forwards;
    animation-delay: 0.3s;
    overflow: hidden;
}


.victory-popup .glow {
    width: 150px;
    height: 150px;
    background-image: url(/images/ui/victory/glow.png);
    background-size: 149px;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: zoom-in-zoom-out 2s infinite;
}

.victory-popup .ribbon {
    width: 300px;
    height: 64px;
    background-size: 300px 64px;
    background-image: url("/images/ui/victory/ribbon.png");
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 130px;
}

.victory-popup .ribbon .text, .defeat-popup .ribbon .text {
    position: absolute;
    left: 0;
    right: 0;
    color: white;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    top: 12px;
}

.defeat-popup .ribbon .text {
    color: #463936;
}

.victory-popup .finish-button {
    top: 400px;
    animation: show-button 0s linear forwards;
    animation-delay: 0.7s;
}

.defeat-popup .finish-button {
    top: 400px;
    animation: show-button 0s linear forwards;
    animation-delay: 1.2s;
}

@keyframes attack-button-filler1-2 {
    0% {
        height: 0;
    }

    100% {
        height: 50px;
    }
}

@keyframes attack-button-filler3 {
    0% {
        height: 0;
        background-position-y: -100px;
    }

    100% {
        height: 50px;
        background-position-y: -50px;
    }
}

@keyframes attack-button-filler4 {
    0% {
        height: 0;
        background-position-y: -50px;
    }

    100% {
        height: 50px;
        background-position-y: 0;
    }
}

@keyframes attack-button-active {

}

@keyframes attack-button-deactive {

}

.touch-disable {
    touch-action: manipulation !important;
}

.touch-enable {
    touch-action: manipulation !important;
}

.battle-ui-joystick .button-active {
    animation: attack-button-active 0s linear forwards;
    animation-delay: 1s;
}

.battle-ui-joystick .button-deactive {
    animation: attack-button-deactive 0s linear forwards;
}

.battle-ui-joystick .attack-button.fill-animation .part-container1 .filler {
    animation: attack-button-filler1-2 0.25s linear forwards;
}

.battle-ui-joystick .attack-button.fill-animation .part-container2 .filler {
    animation: attack-button-filler1-2 0.25s linear forwards;
    animation-delay: 0.25s;
}

.battle-ui-joystick .attack-button.fill-animation .part-container3 .filler {
    animation: attack-button-filler3 0.25s linear forwards;
    animation-delay: 0.50s;
}

.battle-ui-joystick .attack-button.fill-animation .part-container4 .filler {
    animation: attack-button-filler4 0.25s linear forwards;
    animation-delay: 0.75s;
}

.battle-ui-joystick .attack-button.fill-animation {
    animation: zoom-in-zoom-out 0.25s linear forwards;
    animation-delay: 1s;
}

.battle-ui-joystick .attack-button .a {
    animation: show-button 1s linear forwards;
    animation-delay: 1s;
}

.battle-ui-joystick .abilities-container {
    height: 100px;
    width: 100%;
    position: absolute;
}

.ability1 .ability-button {
    left: -180px !important;
    top: 20px !important;
}

.ability2 .ability-button {
    left: -121px !important;
    top: -42px;
}

.ability3 .ability-button {
    left: 0 !important;
    top: -69px;
}

.battle-ui-joystick .ability-button {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.battle-ui-joystick .ability-button .cool-down {
    position: absolute;
    color: white;
    font-weight: bold;
    left: 0;
    right: 0;
    text-align: center;
    top: 20px;
}

.battle-ui-joystick .ability-button.recharging .icon {
    filter: grayscale(1);
}

.battle-ui-joystick .ability-button.recharging a {
    display: none;
}

.battle-ui-joystick .ability-button .icon {
    position: absolute;
    width: 54px;
    height: 54px;
    background-size: cover;
    left: 3px;
    top: 3px;
}

.battle-ui-joystick .ability-button.ability-superAttack .icon {
    background-image: url(/images/ui/joystick/superAttack.png);
}

.battle-ui-joystick .ability-button.ability-healing .icon {
    background-image: url(/images/ui/joystick/healing.png);
}

.battle-ui-joystick .ability-button.ability-freezing .icon {
    background-image: url(/images/ui/joystick/freezing.png);
}


.battle-ui-joystick .ability-button .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/ui/joystick/ability-bg.png);
    background-size: cover;
}

.item-bg {
    position: relative;
}

.item-bg.item-bg50 {
    background-size: cover;
    width: 50px;
    height: 50px;
}

.item-bg.item-bg60 {
    background-size: cover;
    width: 60px;
    height: 60px;
}

.item-bg.bg1 {
    background-image: url(/images/items/bg1.png);
}

.item-bg.bg2 {
    background-image: url(/images/items/bg2.png);
}

.item-bg.bg3 {
    background-image: url(/images/items/bg3.png);
}

.item-bg.bg4 {
    background-image: url(/images/items/bg4.png);
}

.item-bg.bg5 {
    background-image: url(/images/items/bg5.png);
}

.item-bg.bg6 {
    background-image: url(/images/items/bg6.png);
}

@keyframes item-bg6-light {
    0% {
        box-shadow: 0px 0px 0px #ff445c;
    }

    50% {
        box-shadow: 0px 0px 10px #ff445c;
    }

    100% {
        box-shadow: 0px 0px 0px #ff445c;
    }
}



@keyframes item-bg5-light {
    0% {
        box-shadow: 0px 0px 0px #cd8500;
    }

    50% {
        box-shadow: 0px 0px 10px #cd8500;
    }

    100% {
        box-shadow: 0px 0px 0px #cd8500;
    }
}

@keyframes item-bg4-light {
    0% {
        box-shadow: 0px 0px 0px #d900ff;
    }

    50% {
        box-shadow: 0px 0px 10px #d900ff;
    }

    100% {
        box-shadow: 0px 0px 0px #d900ff;
    }
}

@keyframes item-bg3-light {
    0% {
        box-shadow: 0px 0px 0px #0089ff;
    }

    50% {
        box-shadow: 0px 0px 10px #0089ff;
    }

    100% {
        box-shadow: 0px 0px 0px #0089ff;
    }
}

@keyframes item-bg2-light {
    0% {
        box-shadow: 0px 0px 0px #00bf0f;
    }

    50% {
        box-shadow: 0px 0px 10px #00bf0f;
    }

    100% {
        box-shadow: 0px 0px 0px #00bf0f;
    }
}

@keyframes item-bg1-light {
    0% {
        box-shadow: 0px 0px 3px #c7c7c7;
    }

    50% {
        box-shadow: 0px 0px 10px #c7c7c7;
    }

    100% {
        box-shadow: 0px 0px 0px #c7c7c7;
    }
}


.bag-slot.light .item-bg.bg1 {
    animation: 1s item-bg1-light linear infinite;
}

.bag-slot.light .item-bg.bg2 {
    animation: 1s item-bg2-light linear infinite;
}

.bag-slot.light .item-bg.bg3 {
    animation: 1s item-bg3-light linear infinite;
}

.bag-slot.light .item-bg.bg4 {
    animation: 1s item-bg4-light linear infinite;
}

.bag-slot.light .item-bg.bg5 {
    animation: 1s item-bg5-light linear infinite;
}

.bag-slot.light .item-bg.bg6 {
    animation: 1s item-bg6-light linear infinite;
}

.item-bg .description {
    position: absolute;
    bottom: 5px;
    font-size: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
    left: 0;
    right: 0;
}

.reward-slot .item-bg .description {
    bottom: 20px;
}

.item-bg .item166.item-sprite40 {
    top: 10px;
}

.miniatures-type1 .item-bg {
    background: none !important;
}

.item-tag {
    position: relative;
    height: 20px;
}

.item-tag .label {
    text-align: center;
    position: relative;
    font-weight: bold;
    color: white;
    top: 4px;
    font-size: 10px;
}

.item-tag-sprite {
    background-image: url("/images/ui/item-tags.png");
    background-size: 46px 240px;
}

.item-tag-sprite.left-sprite {
    width: 37px;
    height: 20px;
    position: absolute;
    left: 0;
}

.item-tag-sprite.right-sprite {
    width: 20px;
    height: 20px;
    background-position-x: -25px;
    position: absolute;
    right: 0;
}

.item-tag-sprite.content-sprite {
    height: 20px;
    position: absolute;
    left: 20px;
    right: 20px;
    background-repeat: repeat-x;
}

.item-tag1 .item-tag-sprite.content-sprite {
    background-position-y: -20px;
}

.item-tag2 .left-sprite, .item-tag2 .right-sprite {
    background-position-y: -40px;
}

.item-tag2 .content-sprite {
    background-position-y: -60px;
}

.item-tag3 .left-sprite, .item-tag3 .right-sprite {
    background-position-y: -80px;
}

.item-tag3 .content-sprite {
    background-position-y: -100px;
}

.item-tag4 .left-sprite, .item-tag4 .right-sprite {
    background-position-y: -120px;
}

.item-tag4 .content-sprite {
    background-position-y: -140px;
}

.item-tag5 .left-sprite, .item-tag5 .right-sprite {
    background-position-y: -160px;
}

.item-tag5 .content-sprite {
    background-position-y: -180px;
}

.item-tag6 .left-sprite, .item-tag6 .right-sprite {
    background-position-y: -200px;
}

.item-tag6 .content-sprite {
    background-position-y: -220px;
}

.popup .item-info .content {
    position: absolute;
    left: 80px;
    top: 15px;
}
.popup .item-info .content .item-name {
    color: #43536C;
    font-weight: bold;
    font-size: 17px;
}


.menu-navigation .menu-element {
    position: relative;
}

a.link, .menu-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.index-menu-square, .index-menu-rectangular {
    position: relative;
    width: 50px;
    height: 50px;
}

.item-sprite {
    background-image: url("/images/items/items-sprite.png");
}

.item-sprite-full {
    background-image: url("/images/items/items-sprite256.png");
}

.item-sprite128 {
    background-size: 3840px 768px;
    width: 40px;
    height: 40px;
    position: relative;
    left: 5px;
    top: 5px;
}

.item-sprite128.item1 {
    background-position: 0px 0px;
}
.item-sprite128.item2 {
    background-position: 0px -128px;
}
.item-sprite128.item3 {
    background-position: 0px -256px;
}
.item-sprite128.item4 {
    background-position: 0px -384px;
}
.item-sprite128.item5 {
    background-position: 0px -512px;
}
.item-sprite128.item6 {
    background-position: 0px -640px;
}
.item-sprite128.item7 {
    background-position: -128px 0px;
}
.item-sprite128.item8 {
    background-position: -128px -128px;
}
.item-sprite128.item9 {
    background-position: -128px -256px;
}
.item-sprite128.item10 {
    background-position: -128px -384px;
}
.item-sprite128.item11 {
    background-position: -128px -512px;
}
.item-sprite128.item12 {
    background-position: -128px -640px;
}
.item-sprite128.item13 {
    background-position: -256px 0px;
}
.item-sprite128.item14 {
    background-position: -256px -128px;
}
.item-sprite128.item15 {
    background-position: -256px -256px;
}
.item-sprite128.item16 {
    background-position: -256px -384px;
}
.item-sprite128.item17 {
    background-position: -256px -512px;
}
.item-sprite128.item18 {
    background-position: -256px -640px;
}
.item-sprite128.item19 {
    background-position: -384px 0px;
}
.item-sprite128.item20 {
    background-position: -384px -128px;
}
.item-sprite128.item21 {
    background-position: -384px -256px;
}
.item-sprite128.item22 {
    background-position: -384px -384px;
}
.item-sprite128.item23 {
    background-position: -384px -512px;
}
.item-sprite128.item24 {
    background-position: -384px -640px;
}
.item-sprite128.item25 {
    background-position: -512px 0px;
}
.item-sprite128.item26 {
    background-position: -512px -128px;
}
.item-sprite128.item27 {
    background-position: -512px -256px;
}
.item-sprite128.item28 {
    background-position: -512px -384px;
}
.item-sprite128.item29 {
    background-position: -512px -512px;
}
.item-sprite128.item30 {
    background-position: -512px -640px;
}
.item-sprite128.item31 {
    background-position: -640px 0px;
}
.item-sprite128.item32 {
    background-position: -640px -128px;
}
.item-sprite128.item33 {
    background-position: -640px -256px;
}
.item-sprite128.item34 {
    background-position: -640px -384px;
}
.item-sprite128.item35 {
    background-position: -640px -512px;
}
.item-sprite128.item36 {
    background-position: -640px -640px;
}
.item-sprite128.item37 {
    background-position: -768px 0px;
}
.item-sprite128.item38 {
    background-position: -768px -128px;
}
.item-sprite128.item39 {
    background-position: -768px -256px;
}
.item-sprite128.item40 {
    background-position: -768px -384px;
}
.item-sprite128.item41 {
    background-position: -768px -512px;
}
.item-sprite128.item42 {
    background-position: -768px -640px;
}
.item-sprite128.item43 {
    background-position: -896px 0px;
}
.item-sprite128.item44 {
    background-position: -896px -128px;
}
.item-sprite128.item45 {
    background-position: -896px -256px;
}
.item-sprite128.item46 {
    background-position: -896px -384px;
}
.item-sprite128.item47 {
    background-position: -896px -512px;
}
.item-sprite128.item48 {
    background-position: -896px -640px;
}
.item-sprite128.item49 {
    background-position: -1024px 0px;
}
.item-sprite128.item50 {
    background-position: -1024px -128px;
}
.item-sprite128.item51 {
    background-position: -1024px -256px;
}
.item-sprite128.item52 {
    background-position: -1024px -384px;
}
.item-sprite128.item53 {
    background-position: -1024px -512px;
}
.item-sprite128.item54 {
    background-position: -1024px -640px;
}
.item-sprite128.item55 {
    background-position: -1152px 0px;
}
.item-sprite128.item56 {
    background-position: -1152px -128px;
}
.item-sprite128.item57 {
    background-position: -1152px -256px;
}
.item-sprite128.item58 {
    background-position: -1152px -384px;
}
.item-sprite128.item59 {
    background-position: -1152px -512px;
}
.item-sprite128.item60 {
    background-position: -1152px -640px;
}
.item-sprite128.item61 {
    background-position: -1280px 0px;
}
.item-sprite128.item62 {
    background-position: -1280px -128px;
}
.item-sprite128.item63 {
    background-position: -1280px -256px;
}
.item-sprite128.item64 {
    background-position: -1280px -384px;
}
.item-sprite128.item65 {
    background-position: -1280px -512px;
}
.item-sprite128.item66 {
    background-position: -1280px -640px;
}
.item-sprite128.item67 {
    background-position: -1408px 0px;
}
.item-sprite128.item68 {
    background-position: -1408px -128px;
}
.item-sprite128.item69 {
    background-position: -1408px -256px;
}
.item-sprite128.item70 {
    background-position: -1408px -384px;
}
.item-sprite128.item71 {
    background-position: -1408px -512px;
}
.item-sprite128.item72 {
    background-position: -1408px -640px;
}
.item-sprite128.item73 {
    background-position: -1536px 0px;
}
.item-sprite128.item74 {
    background-position: -1536px -128px;
}
.item-sprite128.item75 {
    background-position: -1536px -256px;
}
.item-sprite128.item76 {
    background-position: -1536px -384px;
}
.item-sprite128.item77 {
    background-position: -1536px -512px;
}
.item-sprite128.item78 {
    background-position: -1536px -640px;
}
.item-sprite128.item79 {
    background-position: -1664px 0px;
}
.item-sprite128.item80 {
    background-position: -1664px -128px;
}
.item-sprite128.item81 {
    background-position: -1664px -256px;
}
.item-sprite128.item82 {
    background-position: -1664px -384px;
}
.item-sprite128.item83 {
    background-position: -1664px -512px;
}
.item-sprite128.item84 {
    background-position: -1664px -640px;
}
.item-sprite128.item85 {
    background-position: -1792px 0px;
}
.item-sprite128.item86 {
    background-position: -1792px -128px;
}
.item-sprite128.item87 {
    background-position: -1792px -256px;
}
.item-sprite128.item88 {
    background-position: -1792px -384px;
}
.item-sprite128.item89 {
    background-position: -1792px -512px;
}
.item-sprite128.item90 {
    background-position: -1792px -640px;
}
.item-sprite128.item91 {
    background-position: -1920px 0px;
}
.item-sprite128.item92 {
    background-position: -1920px -128px;
}
.item-sprite128.item93 {
    background-position: -1920px -256px;
}
.item-sprite128.item94 {
    background-position: -1920px -384px;
}
.item-sprite128.item95 {
    background-position: -1920px -512px;
}
.item-sprite128.item96 {
    background-position: -1920px -640px;
}
.item-sprite128.item97 {
    background-position: -2048px 0px;
}
.item-sprite128.item98 {
    background-position: -2048px -128px;
}
.item-sprite128.item99 {
    background-position: -2048px -256px;
}
.item-sprite128.item100 {
    background-position: -2048px -384px;
}
.item-sprite128.item101 {
    background-position: -2048px -512px;
}
.item-sprite128.item102 {
    background-position: -2048px -640px;
}
.item-sprite128.item103 {
    background-position: -2176px 0px;
}
.item-sprite128.item104 {
    background-position: -2176px -128px;
}
.item-sprite128.item105 {
    background-position: -2176px -256px;
}
.item-sprite128.item106 {
    background-position: -2176px -384px;
}
.item-sprite128.item107 {
    background-position: -2176px -512px;
}
.item-sprite128.item108 {
    background-position: -2176px -640px;
}
.item-sprite128.item109 {
    background-position: -2304px 0px;
}
.item-sprite128.item110 {
    background-position: -2304px -128px;
}
.item-sprite128.item111 {
    background-position: -2304px -256px;
}
.item-sprite128.item112 {
    background-position: -2304px -384px;
}
.item-sprite128.item113 {
    background-position: -2304px -512px;
}
.item-sprite128.item114 {
    background-position: -2304px -640px;
}
.item-sprite128.item115 {
    background-position: -2432px 0px;
}
.item-sprite128.item116 {
    background-position: -2432px -128px;
}
.item-sprite128.item117 {
    background-position: -2432px -256px;
}
.item-sprite128.item118 {
    background-position: -2432px -384px;
}
.item-sprite128.item119 {
    background-position: -2432px -512px;
}
.item-sprite128.item120 {
    background-position: -2432px -640px;
}
.item-sprite128.item121 {
    background-position: -2560px 0px;
}
.item-sprite128.item122 {
    background-position: -2560px -128px;
}
.item-sprite128.item123 {
    background-position: -2560px -256px;
}
.item-sprite128.item124 {
    background-position: -2560px -384px;
}
.item-sprite128.item125 {
    background-position: -2560px -512px;
}
.item-sprite128.item126 {
    background-position: -2560px -640px;
}
.item-sprite128.item127 {
    background-position: -2688px 0px;
}
.item-sprite128.item128 {
    background-position: -2688px -128px;
}
.item-sprite128.item129 {
    background-position: -2688px -256px;
}
.item-sprite128.item130 {
    background-position: -2688px -384px;
}
.item-sprite128.item131 {
    background-position: -2688px -512px;
}
.item-sprite128.item132 {
    background-position: -2688px -640px;
}
.item-sprite128.item133 {
    background-position: -2816px 0px;
}
.item-sprite128.item134 {
    background-position: -2816px -128px;
}
.item-sprite128.item135 {
    background-position: -2816px -256px;
}
.item-sprite128.item136 {
    background-position: -2816px -384px;
}
.item-sprite128.item137 {
    background-position: -2816px -512px;
}
.item-sprite128.item138 {
    background-position: -2816px -640px;
}
.item-sprite128.item139 {
    background-position: -2944px 0px;
}
.item-sprite128.item140 {
    background-position: -2944px -128px;
}
.item-sprite128.item141 {
    background-position: -2944px -256px;
}
.item-sprite128.item142 {
    background-position: -2944px -384px;
}
.item-sprite128.item143 {
    background-position: -2944px -512px;
}
.item-sprite128.item144 {
    background-position: -2944px -640px;
}
.item-sprite128.item145 {
    background-position: -3072px 0px;
}
.item-sprite128.item146 {
    background-position: -3072px -128px;
}
.item-sprite128.item147 {
    background-position: -3072px -256px;
}
.item-sprite128.item148 {
    background-position: -3072px -384px;
}
.item-sprite128.item149 {
    background-position: -3072px -512px;
}
.item-sprite128.item150 {
    background-position: -3072px -640px;
}
.item-sprite128.item151 {
    background-position: -3200px 0px;
}
.item-sprite128.item152 {
    background-position: -3200px -128px;
}
.item-sprite128.item153 {
    background-position: -3200px -256px;
}
.item-sprite128.item154 {
    background-position: -3200px -384px;
}
.item-sprite128.item155 {
    background-position: -3200px -512px;
}
.item-sprite128.item156 {
    background-position: -3200px -640px;
}
.item-sprite128.item157 {
    background-position: -3328px 0px;
}
.item-sprite128.item158 {
    background-position: -3328px -128px;
}
.item-sprite128.item159 {
    background-position: -3328px -256px;
}
.item-sprite128.item160 {
    background-position: -3328px -384px;
}
.item-sprite128.item161 {
    background-position: -3328px -512px;
}
.item-sprite128.item162 {
    background-position: -3328px -640px;
}


.item-sprite40 {
    background-size: 1200px 240px;
    width: 40px;
    height: 40px;
    position: relative;
    left: 5px;
    top: 5px;
}

.item-sprite50 {
    background-size: 1500px 300px;
    width: 50px;
    height: 50px;
    position: relative;
    left: 5px;
    top: 5px;
}

.item-sprite40.item1 {
    background-position: 0px 0px;
}
.item-sprite40.item2 {
    background-position: 0px -40px;
}
.item-sprite40.item3 {
    background-position: 0px -80px;
}
.item-sprite40.item4 {
    background-position: 0px -120px;
}
.item-sprite40.item5 {
    background-position: 0px -160px;
}
.item-sprite40.item6 {
    background-position: 0px -200px;
}
.item-sprite40.item7 {
    background-position: -40px 0px;
}
.item-sprite40.item8 {
    background-position: -40px -40px;
}
.item-sprite40.item9 {
    background-position: -40px -80px;
}
.item-sprite40.item10 {
    background-position: -40px -120px;
}
.item-sprite40.item11 {
    background-position: -40px -160px;
}
.item-sprite40.item12 {
    background-position: -40px -200px;
}
.item-sprite40.item13 {
    background-position: -80px 0px;
}
.item-sprite40.item14 {
    background-position: -80px -40px;
}
.item-sprite40.item15 {
    background-position: -80px -80px;
}
.item-sprite40.item16 {
    background-position: -80px -120px;
}
.item-sprite40.item17 {
    background-position: -80px -160px;
}
.item-sprite40.item18 {
    background-position: -80px -200px;
}
.item-sprite40.item19 {
    background-position: -120px 0px;
}
.item-sprite40.item20 {
    background-position: -120px -40px;
}
.item-sprite40.item21 {
    background-position: -120px -80px;
}
.item-sprite40.item22 {
    background-position: -120px -120px;
}
.item-sprite40.item23 {
    background-position: -120px -160px;
}
.item-sprite40.item24 {
    background-position: -120px -200px;
}
.item-sprite40.item25 {
    background-position: -160px 0px;
}
.item-sprite40.item26 {
    background-position: -160px -40px;
}
.item-sprite40.item27 {
    background-position: -160px -80px;
}
.item-sprite40.item28 {
    background-position: -160px -120px;
}
.item-sprite40.item29 {
    background-position: -160px -160px;
}
.item-sprite40.item30 {
    background-position: -160px -200px;
}
.item-sprite40.item31 {
    background-position: -200px 0px;
}
.item-sprite40.item32 {
    background-position: -200px -40px;
}
.item-sprite40.item33 {
    background-position: -200px -80px;
}
.item-sprite40.item34 {
    background-position: -200px -120px;
}
.item-sprite40.item35 {
    background-position: -200px -160px;
}
.item-sprite40.item36 {
    background-position: -200px -200px;
}
.item-sprite40.item37 {
    background-position: -240px 0px;
}
.item-sprite40.item38 {
    background-position: -240px -40px;
}
.item-sprite40.item39 {
    background-position: -240px -80px;
}
.item-sprite40.item40 {
    background-position: -240px -120px;
}
.item-sprite40.item41 {
    background-position: -240px -160px;
}
.item-sprite40.item42 {
    background-position: -240px -200px;
}
.item-sprite40.item43 {
    background-position: -280px 0px;
}
.item-sprite40.item44 {
    background-position: -280px -40px;
}
.item-sprite40.item45 {
    background-position: -280px -80px;
}
.item-sprite40.item46 {
    background-position: -280px -120px;
}
.item-sprite40.item47 {
    background-position: -280px -160px;
}
.item-sprite40.item48 {
    background-position: -280px -200px;
}
.item-sprite40.item49 {
    background-position: -320px 0px;
}
.item-sprite40.item50 {
    background-position: -320px -40px;
}
.item-sprite40.item51 {
    background-position: -320px -80px;
}
.item-sprite40.item52 {
    background-position: -320px -120px;
}
.item-sprite40.item53 {
    background-position: -320px -160px;
}
.item-sprite40.item54 {
    background-position: -320px -200px;
}
.item-sprite40.item55 {
    background-position: -360px 0px;
}
.item-sprite40.item56 {
    background-position: -360px -40px;
}
.item-sprite40.item57 {
    background-position: -360px -80px;
}
.item-sprite40.item58 {
    background-position: -360px -120px;
}
.item-sprite40.item59 {
    background-position: -360px -160px;
}
.item-sprite40.item60 {
    background-position: -360px -200px;
}
.item-sprite40.item61 {
    background-position: -400px 0px;
}
.item-sprite40.item62 {
    background-position: -400px -40px;
}
.item-sprite40.item63 {
    background-position: -400px -80px;
}
.item-sprite40.item64 {
    background-position: -400px -120px;
}
.item-sprite40.item65 {
    background-position: -400px -160px;
}
.item-sprite40.item66 {
    background-position: -400px -200px;
}
.item-sprite40.item67 {
    background-position: -440px 0px;
}
.item-sprite40.item68 {
    background-position: -440px -40px;
}
.item-sprite40.item69 {
    background-position: -440px -80px;
}
.item-sprite40.item70 {
    background-position: -440px -120px;
}
.item-sprite40.item71 {
    background-position: -440px -160px;
}
.item-sprite40.item72 {
    background-position: -440px -200px;
}
.item-sprite40.item73 {
    background-position: -480px 0px;
}
.item-sprite40.item74 {
    background-position: -480px -40px;
}
.item-sprite40.item75 {
    background-position: -480px -80px;
}
.item-sprite40.item76 {
    background-position: -480px -120px;
}
.item-sprite40.item77 {
    background-position: -480px -160px;
}
.item-sprite40.item78 {
    background-position: -480px -200px;
}
.item-sprite40.item79 {
    background-position: -520px 0px;
}
.item-sprite40.item80 {
    background-position: -520px -40px;
}
.item-sprite40.item81 {
    background-position: -520px -80px;
}
.item-sprite40.item82 {
    background-position: -520px -120px;
}
.item-sprite40.item83 {
    background-position: -520px -160px;
}
.item-sprite40.item84 {
    background-position: -520px -200px;
}
.item-sprite40.item85 {
    background-position: -560px 0px;
}
.item-sprite40.item86 {
    background-position: -560px -40px;
}
.item-sprite40.item87 {
    background-position: -560px -80px;
}
.item-sprite40.item88 {
    background-position: -560px -120px;
}
.item-sprite40.item89 {
    background-position: -560px -160px;
}
.item-sprite40.item90 {
    background-position: -560px -200px;
}
.item-sprite40.item91 {
    background-position: -600px 0px;
}
.item-sprite40.item92 {
    background-position: -600px -40px;
}
.item-sprite40.item93 {
    background-position: -600px -80px;
}
.item-sprite40.item94 {
    background-position: -600px -120px;
}
.item-sprite40.item95 {
    background-position: -600px -160px;
}
.item-sprite40.item96 {
    background-position: -600px -200px;
}
.item-sprite40.item97 {
    background-position: -640px 0px;
}
.item-sprite40.item98 {
    background-position: -640px -40px;
}
.item-sprite40.item99 {
    background-position: -640px -80px;
}
.item-sprite40.item100 {
    background-position: -640px -120px;
}
.item-sprite40.item101 {
    background-position: -640px -160px;
}
.item-sprite40.item102 {
    background-position: -640px -200px;
}
.item-sprite40.item103 {
    background-position: -680px 0px;
}
.item-sprite40.item104 {
    background-position: -680px -40px;
}
.item-sprite40.item105 {
    background-position: -680px -80px;
}
.item-sprite40.item106 {
    background-position: -680px -120px;
}
.item-sprite40.item107 {
    background-position: -680px -160px;
}
.item-sprite40.item108 {
    background-position: -680px -200px;
}
.item-sprite40.item109 {
    background-position: -720px 0px;
}
.item-sprite40.item110 {
    background-position: -720px -40px;
}
.item-sprite40.item111 {
    background-position: -720px -80px;
}
.item-sprite40.item112 {
    background-position: -720px -120px;
}
.item-sprite40.item113 {
    background-position: -720px -160px;
}
.item-sprite40.item114 {
    background-position: -720px -200px;
}
.item-sprite40.item115 {
    background-position: -760px 0px;
}
.item-sprite40.item116 {
    background-position: -760px -40px;
}
.item-sprite40.item117 {
    background-position: -760px -80px;
}
.item-sprite40.item118 {
    background-position: -760px -120px;
}
.item-sprite40.item119 {
    background-position: -760px -160px;
}
.item-sprite40.item120 {
    background-position: -760px -200px;
}
.item-sprite40.item121 {
    background-position: -800px 0px;
}
.item-sprite40.item122 {
    background-position: -800px -40px;
}
.item-sprite40.item123 {
    background-position: -800px -80px;
}
.item-sprite40.item124 {
    background-position: -800px -120px;
}
.item-sprite40.item125 {
    background-position: -800px -160px;
}
.item-sprite40.item126 {
    background-position: -800px -200px;
}
.item-sprite40.item127 {
    background-position: -840px 0px;
}
.item-sprite40.item128 {
    background-position: -840px -40px;
}
.item-sprite40.item129 {
    background-position: -840px -80px;
}
.item-sprite40.item130 {
    background-position: -840px -120px;
}
.item-sprite40.item131 {
    background-position: -840px -160px;
}
.item-sprite40.item132 {
    background-position: -840px -200px;
}
.item-sprite40.item133 {
    background-position: -880px 0px;
}
.item-sprite40.item134 {
    background-position: -880px -40px;
}
.item-sprite40.item135 {
    background-position: -880px -80px;
}
.item-sprite40.item136 {
    background-position: -880px -120px;
}
.item-sprite40.item137 {
    background-position: -880px -160px;
}
.item-sprite40.item138 {
    background-position: -880px -200px;
}
.item-sprite40.item139 {
    background-position: -920px 0px;
}
.item-sprite40.item140 {
    background-position: -920px -40px;
}
.item-sprite40.item141 {
    background-position: -920px -80px;
}
.item-sprite40.item142 {
    background-position: -920px -120px;
}
.item-sprite40.item143 {
    background-position: -920px -160px;
}
.item-sprite40.item144 {
    background-position: -920px -200px;
}
.item-sprite40.item145 {
    background-position: -960px 0px;
}
.item-sprite40.item146 {
    background-position: -960px -40px;
}
.item-sprite40.item147 {
    background-position: -960px -80px;
}
.item-sprite40.item148 {
    background-position: -960px -120px;
}
.item-sprite40.item149 {
    background-position: -960px -160px;
}
.item-sprite40.item150 {
    background-position: -960px -200px;
}
.item-sprite40.item151 {
    background-position: -1000px 0px;
}
.item-sprite40.item152 {
    background-position: -1000px -40px;
}
.item-sprite40.item153 {
    background-position: -1000px -80px;
}
.item-sprite40.item154 {
    background-position: -1000px -120px;
}
.item-sprite40.item155 {
    background-position: -1000px -160px;
}
.item-sprite40.item156 {
    background-position: -1000px -200px;
}
.item-sprite40.item157 {
    background-position: -1040px 0px;
}
.item-sprite40.item158 {
    background-position: -1040px -40px;
}
.item-sprite40.item159 {
    background-position: -1040px -80px;
}
.item-sprite40.item160 {
    background-position: -1040px -120px;
}
.item-sprite40.item161 {
    background-position: -1040px -160px;
}
.item-sprite40.item162 {
    background-position: -1040px -200px;
}

.item-sprite40.item163 {
    background-image: url("/images/chests2_miniatures/1.png");
    background-size: cover;
    background-position: 0 0;
}

.item-sprite40.item164 {
    background-image: url("/images/chests2_miniatures/2.png");
    background-size: cover;
    background-position: 0 0;
}

.item-sprite40.item165 {
    background-image: url("/images/chests2_miniatures/3.png");
    background-size: cover;
    background-position: 0 0;
}

.item-sprite40.item166 {
    background-image: url("/images/icons/ticket-wheel.png");
    background-size: cover;
    background-position: 0 0;
    width: 40px;
    height: 27px;
    top: 10px;
}

.item-sprite40.item167 {
    background-image: url("/images/items/167.png");
    background-size: cover;
}

.item-sprite40.item168 {
    background-image: url("/images/items/168.png");
    background-size: cover;
}

.item-sprite40.item169 {
    background-image: url("/images/items/169.png");
    background-size: cover;
}

.item-sprite40.item170, .item-sprite40.item171, .item-sprite40.item172 {
    background-image: url("/images/items/170.png");
    background-size: cover;
}

.item-sprite40.item173, .item-sprite40.item174, .item-sprite40.item175, .item-sprite40.item180, .item-sprite40.item181 {
    background-image: url("/images/items/173.png");
    background-size: cover;
}

.item-sprite40.item176 {
    background-image: url("/images/items/176.png");
    background-size: cover;
}

.item-sprite40.item177, .item-sprite40.item178, .item-sprite40.item179 {
    background-image: url("/images/items/177.png");
    background-size: cover;
}

.item-sprite50.item1 {
    background-position: 0px 0px;
}
.item-sprite50.item2 {
    background-position: 0px -50px;
}
.item-sprite50.item3 {
    background-position: 0px -100px;
}
.item-sprite50.item4 {
    background-position: 0px -150px;
}
.item-sprite50.item5 {
    background-position: 0px -200px;
}
.item-sprite50.item6 {
    background-position: 0px -250px;
}
.item-sprite50.item7 {
    background-position: -50px 0px;
}
.item-sprite50.item8 {
    background-position: -50px -50px;
}
.item-sprite50.item9 {
    background-position: -50px -100px;
}
.item-sprite50.item10 {
    background-position: -50px -150px;
}
.item-sprite50.item11 {
    background-position: -50px -200px;
}
.item-sprite50.item12 {
    background-position: -50px -250px;
}
.item-sprite50.item13 {
    background-position: -100px 0px;
}
.item-sprite50.item14 {
    background-position: -100px -50px;
}
.item-sprite50.item15 {
    background-position: -100px -100px;
}
.item-sprite50.item16 {
    background-position: -100px -150px;
}
.item-sprite50.item17 {
    background-position: -100px -200px;
}
.item-sprite50.item18 {
    background-position: -100px -250px;
}
.item-sprite50.item19 {
    background-position: -150px 0px;
}
.item-sprite50.item20 {
    background-position: -150px -50px;
}
.item-sprite50.item21 {
    background-position: -150px -100px;
}
.item-sprite50.item22 {
    background-position: -150px -150px;
}
.item-sprite50.item23 {
    background-position: -150px -200px;
}
.item-sprite50.item24 {
    background-position: -150px -250px;
}
.item-sprite50.item25 {
    background-position: -200px 0px;
}
.item-sprite50.item26 {
    background-position: -200px -50px;
}
.item-sprite50.item27 {
    background-position: -200px -100px;
}
.item-sprite50.item28 {
    background-position: -200px -150px;
}
.item-sprite50.item29 {
    background-position: -200px -200px;
}
.item-sprite50.item30 {
    background-position: -200px -250px;
}
.item-sprite50.item31 {
    background-position: -250px 0px;
}
.item-sprite50.item32 {
    background-position: -250px -50px;
}
.item-sprite50.item33 {
    background-position: -250px -100px;
}
.item-sprite50.item34 {
    background-position: -250px -150px;
}
.item-sprite50.item35 {
    background-position: -250px -200px;
}
.item-sprite50.item36 {
    background-position: -250px -250px;
}
.item-sprite50.item37 {
    background-position: -300px 0px;
}
.item-sprite50.item38 {
    background-position: -300px -50px;
}
.item-sprite50.item39 {
    background-position: -300px -100px;
}
.item-sprite50.item40 {
    background-position: -300px -150px;
}
.item-sprite50.item41 {
    background-position: -300px -200px;
}
.item-sprite50.item42 {
    background-position: -300px -250px;
}
.item-sprite50.item43 {
    background-position: -350px 0px;
}
.item-sprite50.item44 {
    background-position: -350px -50px;
}
.item-sprite50.item45 {
    background-position: -350px -100px;
}
.item-sprite50.item46 {
    background-position: -350px -150px;
}
.item-sprite50.item47 {
    background-position: -350px -200px;
}
.item-sprite50.item48 {
    background-position: -350px -250px;
}
.item-sprite50.item49 {
    background-position: -400px 0px;
}
.item-sprite50.item50 {
    background-position: -400px -50px;
}
.item-sprite50.item51 {
    background-position: -400px -100px;
}
.item-sprite50.item52 {
    background-position: -400px -150px;
}
.item-sprite50.item53 {
    background-position: -400px -200px;
}
.item-sprite50.item54 {
    background-position: -400px -250px;
}
.item-sprite50.item55 {
    background-position: -450px 0px;
}
.item-sprite50.item56 {
    background-position: -450px -50px;
}
.item-sprite50.item57 {
    background-position: -450px -100px;
}
.item-sprite50.item58 {
    background-position: -450px -150px;
}
.item-sprite50.item59 {
    background-position: -450px -200px;
}
.item-sprite50.item60 {
    background-position: -450px -250px;
}
.item-sprite50.item61 {
    background-position: -500px 0px;
}
.item-sprite50.item62 {
    background-position: -500px -50px;
}
.item-sprite50.item63 {
    background-position: -500px -100px;
}
.item-sprite50.item64 {
    background-position: -500px -150px;
}
.item-sprite50.item65 {
    background-position: -500px -200px;
}
.item-sprite50.item66 {
    background-position: -500px -250px;
}
.item-sprite50.item67 {
    background-position: -550px 0px;
}
.item-sprite50.item68 {
    background-position: -550px -50px;
}
.item-sprite50.item69 {
    background-position: -550px -100px;
}
.item-sprite50.item70 {
    background-position: -550px -150px;
}
.item-sprite50.item71 {
    background-position: -550px -200px;
}
.item-sprite50.item72 {
    background-position: -550px -250px;
}
.item-sprite50.item73 {
    background-position: -600px 0px;
}
.item-sprite50.item74 {
    background-position: -600px -50px;
}
.item-sprite50.item75 {
    background-position: -600px -100px;
}
.item-sprite50.item76 {
    background-position: -600px -150px;
}
.item-sprite50.item77 {
    background-position: -600px -200px;
}
.item-sprite50.item78 {
    background-position: -600px -250px;
}
.item-sprite50.item79 {
    background-position: -650px 0px;
}
.item-sprite50.item80 {
    background-position: -650px -50px;
}
.item-sprite50.item81 {
    background-position: -650px -100px;
}
.item-sprite50.item82 {
    background-position: -650px -150px;
}
.item-sprite50.item83 {
    background-position: -650px -200px;
}
.item-sprite50.item84 {
    background-position: -650px -250px;
}
.item-sprite50.item85 {
    background-position: -700px 0px;
}
.item-sprite50.item86 {
    background-position: -700px -50px;
}
.item-sprite50.item87 {
    background-position: -700px -100px;
}
.item-sprite50.item88 {
    background-position: -700px -150px;
}
.item-sprite50.item89 {
    background-position: -700px -200px;
}
.item-sprite50.item90 {
    background-position: -700px -250px;
}
.item-sprite50.item91 {
    background-position: -750px 0px;
}
.item-sprite50.item92 {
    background-position: -750px -50px;
}
.item-sprite50.item93 {
    background-position: -750px -100px;
}
.item-sprite50.item94 {
    background-position: -750px -150px;
}
.item-sprite50.item95 {
    background-position: -750px -200px;
}
.item-sprite50.item96 {
    background-position: -750px -250px;
}
.item-sprite50.item97 {
    background-position: -800px 0px;
}
.item-sprite50.item98 {
    background-position: -800px -50px;
}
.item-sprite50.item99 {
    background-position: -800px -100px;
}
.item-sprite50.item100 {
    background-position: -800px -150px;
}
.item-sprite50.item101 {
    background-position: -800px -200px;
}
.item-sprite50.item102 {
    background-position: -800px -250px;
}
.item-sprite50.item103 {
    background-position: -850px 0px;
}
.item-sprite50.item104 {
    background-position: -850px -50px;
}
.item-sprite50.item105 {
    background-position: -850px -100px;
}
.item-sprite50.item106 {
    background-position: -850px -150px;
}
.item-sprite50.item107 {
    background-position: -850px -200px;
}
.item-sprite50.item108 {
    background-position: -850px -250px;
}
.item-sprite50.item109 {
    background-position: -900px 0px;
}
.item-sprite50.item110 {
    background-position: -900px -50px;
}
.item-sprite50.item111 {
    background-position: -900px -100px;
}
.item-sprite50.item112 {
    background-position: -900px -150px;
}
.item-sprite50.item113 {
    background-position: -900px -200px;
}
.item-sprite50.item114 {
    background-position: -900px -250px;
}
.item-sprite50.item115 {
    background-position: -950px 0px;
}
.item-sprite50.item116 {
    background-position: -950px -50px;
}
.item-sprite50.item117 {
    background-position: -950px -100px;
}
.item-sprite50.item118 {
    background-position: -950px -150px;
}
.item-sprite50.item119 {
    background-position: -950px -200px;
}
.item-sprite50.item120 {
    background-position: -950px -250px;
}
.item-sprite50.item121 {
    background-position: -1000px 0px;
}
.item-sprite50.item122 {
    background-position: -1000px -50px;
}
.item-sprite50.item123 {
    background-position: -1000px -100px;
}
.item-sprite50.item124 {
    background-position: -1000px -150px;
}
.item-sprite50.item125 {
    background-position: -1000px -200px;
}
.item-sprite50.item126 {
    background-position: -1000px -250px;
}
.item-sprite50.item127 {
    background-position: -1050px 0px;
}
.item-sprite50.item128 {
    background-position: -1050px -50px;
}
.item-sprite50.item129 {
    background-position: -1050px -100px;
}
.item-sprite50.item130 {
    background-position: -1050px -150px;
}
.item-sprite50.item131 {
    background-position: -1050px -200px;
}
.item-sprite50.item132 {
    background-position: -1050px -250px;
}
.item-sprite50.item133 {
    background-position: -1100px 0px;
}
.item-sprite50.item134 {
    background-position: -1100px -50px;
}
.item-sprite50.item135 {
    background-position: -1100px -100px;
}
.item-sprite50.item136 {
    background-position: -1100px -150px;
}
.item-sprite50.item137 {
    background-position: -1100px -200px;
}
.item-sprite50.item138 {
    background-position: -1100px -250px;
}
.item-sprite50.item139 {
    background-position: -1150px 0px;
}
.item-sprite50.item140 {
    background-position: -1150px -50px;
}
.item-sprite50.item141 {
    background-position: -1150px -100px;
}
.item-sprite50.item142 {
    background-position: -1150px -150px;
}
.item-sprite50.item143 {
    background-position: -1150px -200px;
}
.item-sprite50.item144 {
    background-position: -1150px -250px;
}
.item-sprite50.item145 {
    background-position: -1200px 0px;
}
.item-sprite50.item146 {
    background-position: -1200px -50px;
}
.item-sprite50.item147 {
    background-position: -1200px -100px;
}
.item-sprite50.item148 {
    background-position: -1200px -150px;
}
.item-sprite50.item149 {
    background-position: -1200px -200px;
}
.item-sprite50.item150 {
    background-position: -1200px -250px;
}
.item-sprite50.item151 {
    background-position: -1250px 0px;
}
.item-sprite50.item152 {
    background-position: -1250px -50px;
}
.item-sprite50.item153 {
    background-position: -1250px -100px;
}
.item-sprite50.item154 {
    background-position: -1250px -150px;
}
.item-sprite50.item155 {
    background-position: -1250px -200px;
}
.item-sprite50.item156 {
    background-position: -1250px -250px;
}
.item-sprite50.item157 {
    background-position: -1300px 0px;
}
.item-sprite50.item158 {
    background-position: -1300px -50px;
}
.item-sprite50.item159 {
    background-position: -1300px -100px;
}
.item-sprite50.item160 {
    background-position: -1300px -150px;
}
.item-sprite50.item161 {
    background-position: -1300px -200px;
}
.item-sprite50.item162 {
    background-position: -1300px -250px;
}
.item-sprite50.item163 {
    background-image: url("/images/chests2_miniatures/1.png");
    background-size: cover;
    background-position: 0 0;
}
.item-sprite50.item164 {
    background-image: url("/images/chests2_miniatures/2.png");
    background-size: cover;
    background-position: 0 0;
}
.item-sprite50.item165 {
    background-image: url("/images/chests2_miniatures/3.png");
    background-size: cover;
    background-position: 0 0;
}
.item-sprite50.item166 {
    background-image: url("/images/icons/ticket-wheel.png");
    background-size: cover;
    background-position: 0 0;
    width: 50px;
    height: 33px;
    position: relative;
    left: 5px;
    top: 12px;
}
.item-sprite50.item167 {
    background-image: url("/images/items/167.png");
    background-size: cover;
}

.item-sprite50.item168 {
    background-image: url("/images/items/168.png");
    background-size: cover;
}

.item-sprite50.item169 {
    background-image: url("/images/items/169.png");
    background-size: cover;
}

.item-sprite50.item170, .item-sprite50.item171, .item-sprite50.item172 {
    background-image: url("/images/items/170.png");
    background-size: cover;
}

.item-sprite50.item173, .item-sprite50.item174, .item-sprite50.item175, .item-sprite50.item180, .item-sprite50.item181 {
    background-image: url("/images/items/173.png");
    background-size: cover;
}

.item-sprite50.item176 {
    background-image: url("/images/items/176.png");
    background-size: cover;
}

.item-sprite50.item177, .item-sprite50.item178, .item-sprite50.item179 {
    background-image: url("/images/items/177.png");
    background-size: cover;
}


.reward-miniatures .reward-slot {
    width: 60px;
    height: 70px;
    display: inline-block;
    position: relative;
}

.reward-miniatures .reward-slot .counter {
    width: 100%;
    height: 24px;
    border-radius: 0 0 12px 12px;
    border-radius: 0 0 12px 12px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.reward-slot .icon {
    margin: 0 auto;
    position: relative;
    top: 2px;
}

.reward-miniatures.miniatures-type2 .reward-slot .counter {
    border-bottom: 1px solid #cecedd;
    background-color: #e8e9f7;
}

.reward-miniatures.miniatures-type2 .reward-slot {
    background-color: #ffffff;
    border-radius: 12px;
}

.reward-miniatures.miniatures-type3 .reward-slot .counter {
    border-bottom: 1px solid #cecedd;
    background-color: #e8e9f7;
}

.reward-miniatures.miniatures-type3 .reward-slot {
    background-color: #f3f3fb;
    border-radius: 12px;
}

.reward-slot.bg1 .counter {
    background-color: #b7dff5 !important;
    border-bottom: 1px solid #a1d1eb !important;
    color: #3caaff;
}

.reward-slot.bg2 .counter {
    background-color: #bafd7c !important;
    border-bottom: 1px solid #a6e56c !important;
    color: #1da719;
}

.reward-slot.bg3 .counter {
    background-color: #67e7ff !important;
    border-bottom: 1px solid #61d4e9 !important;
    color: #0095b1;
}

.reward-slot.bg4 .counter {
    background-color: #f5b5ff !important;
    border-bottom: 1px solid #ce99d7 !important;
    color: #e54fff;
}

.reward-slot.bg5 .counter {
    background-color: #fbeab3 !important;
    border-bottom: 1px solid #e3d29b !important;
    color: #cfa51d;
}

.reward-slot.bg6 .counter {
    background-color: #f9a49f !important;
    border-bottom: 1px solid #cf8a86 !important;
    color: #ff5b51;
}

.miniatures-type1 .reward-slot .counter {
    background: none !important;
    border-bottom: none !important;
}

.reward-miniatures .reward-slot .counter .value {
    position: relative;
    top: 2px;
    font-weight: bold;
    text-align: center;
}

.reward-slot.silver .value {
    color: #FD9643;
}

.reward-slot.gold .value, .reward-slot.royalPassExperience .value {
    color: #3caaff;
}

.reward-slot.experience .value {
    color: #FD9643;
}

.reward-slot.abilityExperience .value {
    color: #ec3cff;
}

.reward-slot .item-bg {
    width: 60px;
    height: 60px;
}

.reward-slot .item-sprite40 {
    top: 2px;
    left: 0;
    margin: 0 auto;
}

.common-icons-sprite {
    background-image: url("/images/ui/common-icons.png?v2");
}

.common-icons-sprite40 {
    background-size: 400px 40px;
    width: 40px;
    height: 40px;
}

.common-icons-sprite40.silver {
    background-position: 0 0;
}

.common-icons-sprite40.gold {
    background-position: -40px 0;
}

.common-icons-sprite40.experience {
    background-position: -280px 0;
}

.common-icons-sprite40.abilityExperience {
    background-position: -320px 0;
}

.common-icons-sprite40.royalPassExperience {
    background-position: -360px 0;
}

.common-icons-sprite30 {
    background-size: 300px 30px;
    width: 30px;
    height: 30px;
}

.common-icons-sprite30.book {
    background-position: -60px 0;
}

.common-icons-sprite30.note {
    background-position: -90px 0;
}

.common-icons-sprite30.mail-box {
    background-position: -120px 0;
}

.common-icons-sprite30.tick {
    background-position: -150px 0;
}

.common-icons-sprite30.cross {
    background-position: -180px 0;
}

#page-container .pagination-wrap {
    min-height: 35px;
}

ul.pagination {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 0 10px;
    border-bottom: 2px solid #e7e7ee;
}

ul.pagination li {
    list-style: none;
    display: inline-block;
    margin: 2px 0;
    border-radius: 6px;
}

ul.pagination li a {
    color: #C4CAD1;
}

ul.pagination li.active {
    background-color: #4f74f6;
}

ul.pagination li.active a, ul.pagination li.disabled {
    color: #fff;
    text-decoration: none !important;
}

ul.pagination a, li.disabled {
    padding: 5px 8px 5px 8px;
    display: inline-block;
}

@keyframes move {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 50%;
    }
}

.move50 {
    animation: 1s move forwards;
}

.messages-area .take-damage {
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    color: #fd4c5a;
    font-weight: bold;
    font-size: 22px;
    text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #FFF;
    font-family: 'Roboto', sans-serif;
}

.bounce-in-top {
    animation: 0.4s bounce-in-top forwards;
}

.evasion {
    animation: 0.25s rotate10-yo-yo forwards;
}

.character-left .evasion {
    animation: 0.25s rotate-10-yo-yo forwards;
}

.timer-info {
    width: 50px;
    height: 50px;
    background-color: #323b62;
    position: absolute;
}

.timer-info .content {
    background-color: #323b62;
}

.timer-info .content .time {
    color: #A6B4E8;
    font-weight: bolder;
    font-size: 10px;
    text-align: center;
    margin-top: 5px;
}

.timer-info .content .icon {
    width: 25px;
    height: 25px;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.timer-info .content .icon .bg {
    width: 25px;
    height: 25px;
    background-color: #262d4f;
    position: relative;
    transform: rotate(45deg);
    border-radius: 4px;
}

.timer-info .bottom-sprite {
    background-image: url(/images/ui/ui.png);
    background-size: 80px 70px;
    width: 50px;
    height: 11px;
    background-position-x: -19px;
    position: absolute;
    bottom: -10px;
}

.timer-info .time[data-countdown-soon="true"] {
    color: #ff515a;
    animation: 1s zoom-in-zoom-out infinite;
}

.timer-info .time[data-countdown-pause="true"] {
    animation: none;
}

.scale100_0 {
    animation: 0.2s scale100_0 linear forwards;
}

.boss-warning-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: url(/images/ui/glow-red.png);
    background-size: cover;
}

.boss-warning-container .ribbon-warning {
    height: 36px;
    width: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}

.boss-warning-container .ribbon-warning .decor {
    display: inline-block;
}

.boss-warning-container .ribbon-warning .text {
    color: #cf263b;
    font-weight: bold;
    display: inline-block;
    position: relative;
    top: -3px;
    font-size: 25px;
}

.boss-warning-container .ribbon-warning.top {
    top: 10px;
    animation: 10s ticker linear forwards;
}

.boss-warning-container .ribbon-warning.bottom {
    bottom: 10px;
    animation: 10s ticker-reverse linear forwards;
}

.boss-warning-container .center-container {
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.boss-warning-container .center-container .icon-block {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.boss-warning-container .center-container .icon-block .icon {
    position: relative;
    left: 3px;
    top: 5px;
}

.boss-warning-container .center-container .title-block {
    position: absolute;
    top: 50px;
    height: 70px;
    width: 238px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.boss-warning-container .center-container .title-block .title {
    position: absolute;
    top: 22px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    left: 0;
    right: 0;
}

.boss-warning-sprite {
    background: url('/images/ui/boss-warning.png') no-repeat top left;
    background-size: 640px 70px;
}

.boss-warning-sprite.boss-bg { background-position: 0 0; width: 135px; }
.boss-warning-sprite.boss-icon { background-position: -73px 0; width: 60px; height: 50px; }
.boss-warning-sprite.boss-ribbon { background-position: -136px 0; width: 236px; height: 70px }
.boss-warning-sprite.title-bg { background-position: -380px 0; width: 262px; height: 26px; }

.bounce-in-right {
    animation: bounce-in-right 0.5s ease  forwards;
}

.bounce-in-right-reverse {
    animation: bounce-in-right-reverse 0.5s ease  forwards;
}

.bounce-out {
    animation: bounce-out 0.5s ease  forwards;
}

.step-slider-sprite { background: url('/images/ui/step-sliders.png') no-repeat top left; width: 20px; height: 20px; background-size: 70px 20px   }
.step-slider-sprite.gray { background-position: 0 0; }
.step-slider-sprite.red { background-position: -25px 0; }
.step-slider-sprite.yellow { background-position: -50px 0; }

.page-container, #page-container {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

#territories-page {
    height: 100%;
}

#territory-page {
    height: 100%;
}


#level-up {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: white;
    z-index: 400;
}

#level-up .bg-yellow {
    height: 240px;
    width: 100%;
    background: rgb(255,229,167);
    background: linear-gradient(180deg, rgba(255,229,167,1) 0%, rgba(255,245,220,1) 100%);
    position: relative;
}

#level-up .bg-yellow .title-text {
    color: #9A6347;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    position: relative;
    top: 10px;
}

#level-up .mark-container {
    width: 180px;
    margin: 0 auto;
    position: relative;
}

#level-up .mark {
    width: 200px;
    height: 130px;
    background-image: url(/images/ui/level-up-mark.png);
    background-size: 200px 130px;
    position: absolute;
    top: 20px;
    left: -12px;
}

#level-up .deco1 {
    width: 140px;
    height: 140px;
    background-image: url(/images/ui/level-up-deco1.png);
    background-size: 140px;
    position: relative;
    top: 38px;
    animation: zoom-in-zoom-out 2s infinite;
    left: 20px;

}

#level-up .deco2 {
    width: 270px;
    height: 183px;
    background-image: url(/images/ui/level-up-deco2.png);
    background-size: 270px 183px;
    position: absolute;
    top: 18px;
    left: -51px;

}

#level-up .rotate {
    width: 270px;
    height: 270px;
    background-image: url(/images/ui/level-up-rotate.png);
    background-size: 270px;
    position: absolute;
    left: -42px;
    top: -45px;
    animation: 8s rotate360 linear infinite;
}

#level-up .level-up-title {
    color: #F8913F;
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 195px;
}

.material-button {
    width: 100%;
    height: 45px;
    border-radius: 12px;
    position: relative;
    font-weight: bold;
}

.material-button .text {
    position: absolute;
    top: 13px;
    font-weight: bold;
    text-align: center;
    left: 0;right: 0;
}

.material-button.mint {
    background-color: #92e8f6;
    border-bottom: 2px solid #67bdf4;
    color: #277ace;
}

.material-button.orange {
    background-color: #ffce7f;
    border-bottom: 2px solid #ff9a67;
    color: #ff5c5c;
}

.material-button.red {
    background-color: #ff7f7f;
    border-bottom: 2px solid #ec0404;
    color: #ffffff;
}

.material-buttons .material-button {
    margin: 5px 0;
}

.notification-alert {
    position: absolute;
    top: 250px;
    left: 10px;
    right: 10px;
    animation: 2s bounce-alert linear forwards;
    z-index: 5000;
}

.notification-alert .bg {
    border-radius: 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.94;
}

.notification-alert .text {
    padding: 15px;
    font-weight: bold;
    position: relative;
    text-align: center;
}

.notification-alert.notification-red .bg {
    background-color: #6f2939;
    border: 2px solid #972c41;
}

.notification-alert.notification-red .text {
    color: #FF7475;
}

.notification-alert.notification-green .bg {
    background-color: #1b5d4b;
    border: 2px solid #1d745a;
}

.notification-alert.notification-green .text {
    color: #43dd73;
}

.notification-alert.notification-blue .bg {
    background-color: #285282;
    border: 2px solid #2565a9;
}

.notification-alert.notification-blue .text {
    color: #5ab3ff;
}

.notification-alert.notification-yellow .bg {
    background-color: #835740;
    border: 2px solid #a06848;
}

.notification-alert.notification-yellow .text {
    color: #ffbf66;
}

.notification-alert.notification-gray .bg {
    background-color: #343e51;
    border: 2px solid #44546f;
}

.notification-alert.notification-gray .text {
    color: #b1bde1;
}

#dropped-chests-area .chest {
    animation: 0.7s drop-chest linear forwards;
    position: absolute;
    top: 105px;
    left: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background-size: 70px;
    margin: 0 auto;
}

#dropped-chests-area .chest.chest1 {
    background-image: url(/images/chests/1_0.png);
}

#dropped-chests-area .chest.chest2 {
    background-image: url(/images/chests/2_0.png);
}

#dropped-chests-area .chest.chest3 {
    background-image: url(/images/chests/3_0.png);
}

.index-menu-title {
    height: 26px;
    position: absolute;
    overflow: hidden;
}

.index-menu-title .bg {
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.index-menu-title .title {
    font-weight: bold;
    color: white;
    position: relative;
    display: inline;
    padding: 0 10px;
    top: 3px;
    font-size: clamp(9px, 2vw, 11px);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.index-menu-title .separator, .yellow-separator {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgb(255 216 149) 50%, rgba(0,0,0,0.1) 100%);
}

.index-menu-title .separator.top, .yellow-separator.top {
    top: 0;
}

.index-menu-title .separator.bottom, .yellow-separator.bottom {
    bottom: 0;
}
    /* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

@media (max-height: 670px) {
    .index-left-buttons {
        transform: scale(0.9);
        transform-origin: left top;
    }

    .index-bottom-buttons {
        transform: scale(0.9);
        transform-origin: center bottom;
    }
}

.index-left-buttons {
    position: absolute;
    top: 60px;
    left: 10px;
    right: 0;
    width: 60px;
}

.index-right-buttons {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 60px;
    transition: opacity 0.5s;
}

.index-bottom-buttons {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center
}

.button60.button-rectangle {
    width: 60px;
    height: 50px;
}

.button60.button-rectangle .button-content {
    position: absolute;
    bottom: 10px;
    line-height: normal;
    width: 100%;
}

.button60.button-rectangle .icon {
    left: 0;
    right: 0;
    margin: 0 auto;
    position: relative;
}

.button60.button-rectangle .label {
    font-size: 10px;
    position: relative;
    top: 2px;
}

#map {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;

    /*-webkit-touch-callout: none;

    */
    -moz-user-select: none;
    overscroll-behavior-x: none;

    width: 100%;
    height: calc(-140px + 100dvh);
    overflow: scroll hidden;
    /*scroll-behavior: smooth;*/
    cursor: default;
}

#map .ab-block100 {
    cursor: pointer;
}

#map .map-bg {
    background-image: url("/images/bg/index-menu4.jpg");
    aspect-ratio: 751 / 600;
    height: 100%;
    background-size: cover;
    position: relative;
}

#map #train-link {
    left: 8%;
    top: 18%;
    position: absolute;
    width: 20%;
    height: 19%;
}

#map #travel-link {
    position: absolute;
    width: 22%;
    height: 20%;
    left: 24%;
    top: 7%;

}

@keyframes bounce-ship {
    0%, 50%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-1px);
    }
    75% {
        transform: translateY(-0.5px);
    }
}

@keyframes bounce-move {
    0% {
        transform: translateX(0px) translateY(0px)
    }

    50% {
        transform: translateX(-30%) translateY(5px)
    }

    80% {
        transform: translateX(-50%) translateY(6px);
        height: 57px;
    }

    100% {
        transform: translateX(-54%) translateY(64px);

        height: 0;
    }
}

#map .ship {
    background-image: url("/images/bg/ship.png");
    width: 52px;
    height: 57px;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    animation: 3s bounce-ship linear infinite;
}

#map .bounce-move {
    animation: 10s bounce-move linear infinite;
}

#map .ship-container {
    position: absolute;
    left: 25%;
    top: 43%;
    width: 52px;
    height: 57px;
    overflow: hidden;
}

.index-bottom-buttons .button60 {
    color: white;
}

.widget-header .right-buttons {
    position: absolute;
    right: 5px;
    height: 26px;
    top: 7px;
}

.widget-header .right-buttons .button {
    width: 26px;
    height: 26px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 3px #e7e7ee;
}

.block {
    padding: 5px;
    position: relative;
}

@keyframes animation1 {
    from {background-position: 0px;}
    to {background-position: -2000px;}
}

.animation1 {
    width: 200px;
    height: 200px;
    background-image: url("/images/animations/1.png");
    animation: animation1 1s steps(10) infinite;
    position: absolute;
    z-index: 20000;
}

@keyframes animation2 {
    from {background-position: 0px;}
    to {background-position: -3600px;}
}

.animation2 {
    width: 300px;
    height: 283px;
    background-image: url("/images/animations/2.png");
    animation: animation2 1s steps(12) infinite;
    position: absolute;
    z-index: 20000;
    background-size: 3600px 283px;
}

@keyframes animation3 {
    from {background-position: 0px;}
    to {background-position: -3480px;}
}

.animation3 {
    width: 435px;
    height: 506px;
    background-image: url("/images/animations/3.png");
    animation: animation3 1s steps(8) infinite;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 50%;
    transform: translateX(-201px);
    left: -26px;
    top: -10px;
}

@keyframes animation4 {
    from {background-position: 0px;}
    to {background-position: -3640px;}
}

.animation4 {
    width: 280px;
    height: 280px;
    background-image: url("/images/animations/4.png");
    animation: animation4 1s steps(13) infinite;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@keyframes animation5 {
    from {background-position: 0px;}
    to {background-position: -3576px;}
}

.animation5 {
    width: 298px;
    height: 192px;
    background-image: url("/images/animations/5.png");
    animation: animation5 1s steps(12) infinite;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@keyframes animation6 {
    from {background-position: 0px;}
    to {background-position: -1570px;}
}

.animation6 {
    width: 314px;
    height: 259px;
    background-image: url("/images/animations/6.png");
    animation: animation6 0.5s steps(5) infinite forwards;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-iteration-count: 1
}

.character-area .animation6 {
    left: -80px !important;
    top: -40px !important;
}

@keyframes animation7 {
    from {background-position: 0px;}
    to {background-position: -468px;}
}

.animation7 {
    width: 156px;
    height: 74px;
    background-image: url("/images/animations/7.png");
    animation: animation7 0.4s steps(3) infinite forwards;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.character-area .animation7 {
    top: -65px !important;
}

@keyframes animation8 {
    from {background-position: 0px;}
    to {background-position: -1024px;}
}

.animation8 {
    width: 256px;
    height: 256px;
    background-image: url("/images/animations/8.png");
    animation: animation8 0.4s steps(4) infinite forwards;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-iteration-count: 1
}

.character-area .animation8 {
    top: 0px !important;
    left: -43px !important;
}

@keyframes animation9 {
    from {background-position: 0px;}
    to {background-position: -1092px;}
}

.animation9 {
    width: 182px;
    height: 306px;
    background-image: url("/images/animations/9.png");
    animation: animation9 0.4s steps(6) infinite forwards;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-iteration-count: 1
}

.character-area .animation9 {
    top: -65px !important;
    left: -50px !important;
}


@keyframes animation10 {
    from {background-position: 0px;}
    to {background-position: -1392px;}
}

@keyframes animation11 {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-60px);
    }
}

@keyframes animation12 {
    from {background-position: 0px;}
    to {background-position: -6000px;}
}

@keyframes animation13 {
    from {background-position: 0px;}
    to {background-position: -2510px;}
}

.animation10 {
    width: 232px;
    height: 205px;
    background-image: url("/images/animations/10.png");
    animation: animation10 0.4s steps(6) infinite forwards;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-iteration-count: 1
}

.animation11 {
    width: 160px;
    height: 217px;
    background-size: cover;
    background-image: url(/images/animations/11.png);
    animation: animation11 1s infinite forwards;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    animation-iteration-count: 1;
}

.animation12 {
    width: 400px;
    height: 400px;
    background-size: cover;
    background-image: url(/images/animations/12.png);
    animation: animation12 1s steps(15) infinite forwards;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    animation-iteration-count: 1;
}

.animation13 {
    width: 200px;
    height: 280px;
    background-size: cover;
    background-image: url(/images/animations/13.png);
    animation: animation13 1s steps(12) infinite forwards;
    position: absolute;
    z-index: 20000;
    background-repeat: no-repeat;
    background-position: center 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    animation-iteration-count: 1;
}


.animation-shield {
    width: 182px;
    height: 268px;
    position: absolute;
}

.animation-shield .shield {
    width: 100%;
    height: 100%;
    background-image: url("/images/animations/shield.png");
    background-size: cover;
    animation: 1s zoom-in-zoom-out002 linear infinite;
}

.animation-shield .glow {

}

.character-area .animation10 {
    top: 15px !important;
    left: -50px !important;
}

.player-battle-card {
    width: 100px;
    height: 130px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border-bottom: 2px solid #e2e2e9
}

.player-battle-card.empty {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%);
}

.player-battle-card.blue {
    background: linear-gradient(180deg, rgba(79,207,255,1) 0%, rgba(121,160,247,1) 100%);
}

.player-battle-card.green {
    background: linear-gradient(180deg, rgba(128,239,59,1) 0%, rgba(134,239,133,1) 100%);
}

.player-battle-card.red {
    background: linear-gradient(180deg, rgba(255, 79, 79, 1) 0%, rgba(247, 121, 121, 1) 100%) ;
}


.player-battle-card .decor {
    width: 200px;
    height: 44px;
    position: absolute;
    transform: rotate(-59deg);
    bottom: 57px;
    left: -44px;
}

.player-battle-card.empty .decor {
    background: linear-gradient(90deg, rgba(239, 239, 239, 1) 0%, rgba(239, 239, 239, 1) 100%);
}

.player-battle-card.blue .decor {
    background: linear-gradient(90deg, rgba(118,167,248,1) 0%, rgba(96,219,255,1) 100%);
}

.player-battle-card.green .decor {
    background: linear-gradient(90deg, rgba(141,240,131,1) 0%, rgba(199,243,67,1) 100%);
}

.player-battle-card.red .decor {
    background: linear-gradient(90deg, rgba(248, 118, 118, 1) 0%, rgba(255, 96, 96, 1) 100%) !important;
}

.player-battle-card .player-name {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 12px;
    right: 10px;
    overflow: hidden;
}


.player-battle-card .miniature-container {
    position: absolute;
    width: 55px;
    height: 55px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 33px;
}

.player-battle-card .character-miniature {
    width: 55px;
    height: 55px;
    background-size: 55px;
    border-radius: 12px;
}

.player-battle-card.empty .character-miniature {
    background-color: white;
}

.player-battle-card.empty .loading-container {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%)
}

.player-battle-card .level {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    text-align: center;
    bottom: -5px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #50708D;
    font-size: 11px;
    line-height: 20px;
}

.player-battle-card .bottom-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: white
}

.player-battle-card .bottom-container .icon {
    zoom:0.3;
    position: absolute;
    top: 14px;
    left: 50px;
}

.player-battle-card.empty .bottom-container .icon {
    display: none;
}

.player-battle-card .bottom-container .text {
    position: absolute;
    left: 40px;
    top: 6px;
    font-size: 12px;
    color: #7C8A97;
}

.player-battle-cards .player-battle-card {
    display: inline-block;
    margin: 5px 5px;
}

.row-vs {
    width: 100%;
    height: 115px;
    position: relative;
    left: 0;
    overflow: hidden
}

.row-vs .player-cell {
    width: 150px;
    height: 100%;
    position: absolute;
}

.row-vs .player-cell.right-cell {
    right: 0;
    top: 0;
}

.row-vs .player-cell.blue {
    background: linear-gradient(180deg, rgba(88,176,255,1) 0%, rgba(107,118,250,1) 100%);
}

.row-vs .player-cell.red {
    background: linear-gradient(180deg, rgba(254,107,116,1) 0%, rgba(252,74,89,1) 100%);
}

.row-vs .player-cell.green {
    background: linear-gradient(180deg, rgb(51 199 61) 0%, rgb(59 156 46) 100%)
}

.row-vs .player-cell .angle {
    position: absolute;
    right: -10px;
    width: 20px;
    height: 105%;
    background-color: #2c3560;
    top: -3px;
    rotate: 5deg;
}

.row-vs .player-cell.right-cell .angle {
    right: 0;
    left: -10px;
}

.row-vs .player-cell .angle .border {
    position: absolute;
    left: 0px;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: white;
}

.row-vs .player-cell.right-cell .angle .border {
    right: 0px;
    left: auto;
}

.row-vs .player-cell .info-container {
    position: absolute;
    width: 110px;
    height: 100%;
    top: 5px;
    left: 10px;
}

.row-vs .player-cell.right-cell .info-container {
    left: auto;
    right: 10px;
}

.row-vs .player-cell .info-container .player-name {
    color: white;
    font-weight: bold;
    font-size: 12px;
    position: relative
}

.row-vs .player-cell.right-cell {
    text-align: right;
}

.row-vs .player-cell .info-container .force {
    color: #bec2ff;
    font-weight: bold;
    font-size: 10px;
    position: relative;
}

.row-vs .player-cell .info-container .character-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 24px;
}

.row-vs .player-cell.right-cell .info-container .character-container {
    left: auto;
    right: 24px;
}

.row-vs .player-cell .info-container .character-miniature {
    width: 56px;
    height: 56px;
    background-size: 56px;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 2px;
}

.row-vs .vs-cell {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #262d50
}

.row-vs .vs-cell .label {
    position: relative;
    top: 20px;
    font-weight: bold;
    font-size: 22px;
    color: white;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

.rows-vs .row-vs {
    border-bottom: 3px solid black;
}

.rows-vs {
    border-top: 3px solid black;
}

.content-card {
    background-color: white;
    border-radius: 24px;
    padding: 10px 20px 30px 20px;
    border-bottom: 2px solid #e2e6eb;
}

.settings-row {
    padding: 10px 0 27px 0;
    border-bottom: 1px solid #e7e7e7
}

.settings-row .cell-left {
    width: 100px;
    float: left;
    color: #7C8A97
}

.settings-row .cell-content {
    margin-left: 130px;
}

.settings-row .cell-right {
    float: right;
    position: relative;
}

.forge-item-table {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: bold;
}

.forge-item-table .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.forge-item-table .row .improve-ceil {
    color: #00c36a;
    width: 50px;
}

.forge-item-table .row .up-ceil {
    opacity: 0;
}

.forge-item-table .row .ceil {
    position: relative;
}

.forge-item-table .row .ceil .star .star-mint {
    display: none;
}

.forge-item-table .row .ceil .star.has-level .star-mint {
    display: block;
}

.forge-item-table .row .ceil .star.has-level .star {
    display: none;
}

.forge-item-table .row .ceil.label {
    color: #8ca2d1;
    width: 60px;
}

.forge-item-table .row .ceil.value {
    width: 60px;
    text-align: center;
    color: #c5cfe4;
}

.forge-item-table .row .ceil.improve-icon {
    width: 20px;
    height: 20px;
}

.forge-item-table .row .ceil .icon {
    position: absolute;
    top: 0;
}

.forge-item-table .row .ceil .star-mint {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url(/images/icons/star-mint.png);
    background-size: cover;
    top: 0px;
}

.forge-item-progress-container .labels {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
}

.forge-item-progress-container .progress-bar {
    height: 12px;
    background-color: #8ca2d1;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.forge-item-progress-container .progress-bar .filler {
    height: 100%;
    background: linear-gradient(180deg, rgba(10,229,177,1) 0%, rgba(3,210,179,1) 100%);
}

.forge-item-progress-container .progress-bar .label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    font-weight: bold;
}

.forge-item-items-area {
    width: 100%;
    height: 190px;
    background-color: #f4f3fd;
    border-radius: 12px;
    overflow-y: scroll;
    margin-top: 5px;
}

.forge-item-container:has(a.select-item:active) {
    transform: scale(.9);
}

#loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 800;
}

#loading .dim {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.8;
    position: absolute;
}

#loading .icon {
    width: 42px;
    height: 70px;
    background-image: url("/images/icons/loading.png");
    background-size: cover;
    animation: 1s rotate360 infinite;
    position: absolute;
    top: 12px;
    right: 40px;
}

.loading-icon {
    width: 42px;
    height: 70px;
    background-image: url("/images/icons/loading.png");
    background-size: cover;
    animation: 1s rotate360 infinite;
}

#newConnect {
    width: 100%;
    height: 2000px;
    z-index: 50000;
    position: absolute;
    top: 0;
}

#newConnect .dim {
    width: 100%;
    height: 100%;
    background-color: #00000052;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    position: absolute;
}

.targets-cards-container {
    flex-grow: 1;
    overflow-y: auto;
}

.targets-cards-container .target-card {
    margin-bottom: 7px;
}

.targets-cards-container:last-child {
    margin-bottom: 0;
}

.target-card {
    width: 100%;
    height: 90px;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    border-bottom: 2px solid #e2e2e9;
    position: relative;
}

.target-card .target-container {
    height: 100%;
    width: 90px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.target-card .target-container .level-container {
    background-color: white;
    border-radius: 0 0 12px 0;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
}

.target-card .target-container .bottom-container {
    background-color: white;
    border-radius: 0 0 12px 0;
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.target-card .target-container .level-container .label {
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    color: #43536C;
    line-height: 26px;
}

.target-card .target-container.blue {
    background: linear-gradient(180deg, rgba(79,207,255,1) 0%, rgba(121,160,247,1) 100%);
}

.target-card .target-container.green {
    background: linear-gradient(180deg, rgba(128,239,59,1) 0%, rgba(134,239,133,1) 100%);
}

.target-card .target-container.empty {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%);
}

.target-card .target-container.red {
    background: linear-gradient(180deg, rgba(255, 79, 79, 1) 0%, rgba(247, 121, 121, 1) 100%);
}

.target-card .target-container .decor {
    width: 200px;
    height: 44px;
    position: absolute;
    transform: rotate(-59deg);
    bottom: 57px;
    left: -44px;
}

.target-card .target-container .miniature {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
}

.target-card .content {
    position: absolute;
    color: #515f92;
    top: 10px;
    left: 105px;
    right: 15px;
    font-weight: bold;
}

.target-card .target-container.blue .decor {
    background: linear-gradient(90deg, rgba(118,167,248,1) 0%, rgba(96,219,255,1) 100%);
}

.target-card .target-container.green .decor {
    background: linear-gradient(90deg, rgba(141,240,131,1) 0%, rgba(199,243,67,1) 100%);
}

.target-card .target-container.empty .decor {
    background: linear-gradient(90deg, rgba(239, 239, 239,1) 0%, rgba(239, 239, 239, 1) 100%);
}

.target-card .target-container.red .decor {
    background: linear-gradient(90deg, rgba(240, 131, 131, 1) 0%, rgba(255, 84, 84, 1) 100%);
}

.info-element {
    background-color: #f3f3fb;
    height: 32px;
    border-radius: 12px;
    padding: 1px 15px 1px 1px;
    width: auto;
    position: relative;
    display: inline-block;
}

.info-element .left-container {
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 12px 0 0 12px;
    margin-left: 0px;
    position: relative;
    display: inline-block;
}

.info-element .left-container .icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.info-element .content-container {
    height: 32px;
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    margin-left: 5px;
}

.bank-resource-icon.gold1 {
    width: 72px;
    height: 70px;
    background-image: url("/images/pay/gold1.png");
    background-size: cover;
}

.bank-resource-icon.gold2 {
    width: 100px;
    height: 70px;
    background-image: url("/images/pay/gold2.png");
    background-size: cover;
}

.bank-resource-icon.gold3 {
    width: 100px;
    height: 91px;
    background-image: url("/images/pay/gold3.png");
    background-size: cover;
}

.bank-resource-icon.gold4 {
    width: 100px;
    height: 99px;
    background-image: url("/images/pay/gold4.png");
    background-size: cover;
}

.popup-show-animation {
    animation: 0.2s zoom-in-zoom-out002 linear forwards;
}

.mission-widget-container {
    position: relative;
    height: 45px;
    animation: bounce-mission 2s ease  forwards;
}

.mission-widget-container .bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(43 52 89) -20%, transparent 60%);
    position: absolute;
    top: 0;
    left: 30px
}

.mission-widget-container .left-container {
    width: 45px;
    height: 100%;
    background-color: #3a4674;
    border-radius: 12px;
    position: relative;
}

.mission-widget-container .left-container .icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 2px;
}

.mission-widget-container .content {
    position: relative;
    top: 0;
    vertical-align: top;
    color: white;
    padding-left: 10px;
    padding-top: 5px;
}

.mission-widget-container .label {
    font-size: 12px;
    font-weight: bold;
}

.mission-widget-container .progress-bar {
    width: 100px;
    height: 14px;
    background-color: #3a4674;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-top: 3px;
}

.mission-widget-container .progress-bar .filler {
    height: 100%;
    background-color: #ff515a;
}

.mission-widget-container .progress-label {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 0;
    font-size: 10px;
    font-weight: bold;
}

.mission-widget-container .tick-icon {
    position: absolute;
    top: 0px;
    left: 7px;
    display: none;
}

.mission-widget-container.completed .tick-icon {
    display: block !important;
}

.company-logo {
    width: 250px;
    height: 250px;
    background-size: cover;
    background-image: url("/images/ui/company-logo.png");
    position: relative;
    animation: 1s opacity-show linear forwards;
}

.slide {
    margin: 20px auto;
    display: grid;
}

.slide-items {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background-color: white;
    padding: 45px 10px 30px 10px;
    grid-area: 1/1;
}

.slide-nav {
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    position: absolute;
    top: 25px;
    left: 5px;
    right: 5px;
}

.slide-nav button {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    opacity: 0;
    height: 360px;
    position: absolute;
    width: 50%;
}

.slide-nav button.slide-prev {
    left: 0;
}

.slide-nav button.slide-next {
    right: 0;
}

.slide-items > * {
    position: absolute;
    top: 0px;
    opacity: 0;
    pointer-events: none;
}

.slide-items > .active {
    position: relative;
    opacity: 1;
    pointer-events: initial;
}

.slide-thumb {
    display: flex;
    grid-column: 1 / 3;
}

.slide-thumb > span {
    flex: 1;
    display: block;
    height: 3px;
    background: #dfdddd;
    margin: 5px;
    border-radius: 3px;
    overflow: hidden;
}

.slide-thumb > span.active::after {
    content: '';
    display: block;
    height: inherit;
    background: #43536C;
    border-radius: 3px;
    transform: translateX(-100%);
    animation: thumb 8s forwards linear;
}

@keyframes thumb {
    to {
        transform: initial;
    }
}



.tutorial .index-left-buttons, .tutorial .index-right-buttons, .tutorial.tutorial-travel .index-bottom-buttons, .tutorial.tutorial-travel2 .index-bottom-buttons {
    display: none;
}



.arrow-blue-container {
    width: 45px;
    height: 50px;
    position: absolute;
    top: 0;
    z-index: 20;
}

.arrow-blue {
    background-image: url("/images/ui/arrow-blue.png");
    background-size: cover;
    width: 45px;
    height: 50px;
    position: absolute;
    animation: 1s bounce2 linear infinite;
}

.tutorial .game-overlay .hand {
    width: 50px;
    height: 48px;
    background-image: url('/images/ui/hand.png');
    background-size: cover;
    position: absolute;
    right: 40px;
    top: 200px;
    animation: 1s swipe linear infinite;
}

.tutorial .game-overlay .hand .swipe {
    background-image: url('/images/ui/swipe.png');
    background-size: cover;
    width: 64px;
    height: 12px;
    top: -15px;
    left: -30px;
    position: absolute;
}




.tutorial.tutorial-trainHealth #trainModal #category-damage,
.tutorial.tutorial-trainHealth #trainModal #category-armor,
.tutorial.tutorial-trainHealth #trainModal #category-evasion,
.tutorial.tutorial-trainHealth #trainModal #category-criticalDamage {
    opacity: 0.5;
}

.tutorial.tutorial-trainDamage #trainModal #category-health,
.tutorial.tutorial-trainDamage #trainModal #category-armor,
.tutorial.tutorial-trainDamage #trainModal #category-evasion,
.tutorial.tutorial-trainDamage #trainModal #category-criticalDamage {
    opacity: 0.5;
}

.tutorial.tutorial-trainArmor #trainModal #category-health,
.tutorial.tutorial-trainArmor #trainModal #category-damage,
.tutorial.tutorial-trainArmor #trainModal #category-evasion,
.tutorial.tutorial-trainArmor #trainModal #category-criticalDamage {
    opacity: 0.5;
}

.tutorial.tutorial-trainHealth #trainModal #category-damage a,
.tutorial.tutorial-trainHealth #trainModal #category-armor a,
.tutorial.tutorial-trainHealth #trainModal #category-evasion a,
.tutorial.tutorial-trainHealth #trainModal #category-criticalDamage a{
    display: none;
}

.tutorial.tutorial-trainArmor #trainModal #category-health a,
.tutorial.tutorial-trainArmor #trainModal #category-damage a,
.tutorial.tutorial-trainArmor #trainModal #category-evasion a,
.tutorial.tutorial-trainArmor #trainModal #category-criticalDamage a{
    display: none;
}

.tutorial.tutorial-tourn #menu-page .arrow-blue-container {
    transform: translate(42px, 0) rotate(180deg);
    top: 79%;

}

.tutorial.tutorial-mine #menu-page .game-overlay .arrow-blue-container {
    display: none;
}



.tutorial.tutorial-travel #menu-page #travel-link,
.tutorial.tutorial-travel2 #menu-page #travel-link,
.tutorial.tutorial-travel3 #menu-page #travel-link,
.tutorial.tutorial-campaignChests #menu-page #travel-link{
    z-index: 100;
}

.tutorial.tutorial-trainHealth #menu-page #train-link,
.tutorial.tutorial-trainDamage #menu-page #train-link,
.tutorial.tutorial-trainArmor #menu-page #train-link {
    z-index: 100;
}

.tutorial.tutorial-travel #territories-page #territory1 a,
.tutorial.tutorial-travel2 #territories-page #territory1 a,
.tutorial.tutorial-travel3 #territories-page #territory1 a,
.tutorial.tutorial-campaignChests #territories-page #territory1 a{
    z-index: 100;
}

/*
.tutorial.tutorial-travel #territory-page #stage1 a,
.tutorial.tutorial-travel2 #territory-page #stage2 a,
.tutorial.tutorial-travel3 #territory-page #stage3 a {
    z-index: 100;
}
 */

.tutorial.tutorial-travel #territory-page #stage1,
.tutorial.tutorial-travel2 #territory-page #stage2,
.tutorial.tutorial-travel3 #territory-page #stage3 {
    z-index: 100;
}

.tutorial.tutorial-travel #territory-page .territory-map,
.tutorial.tutorial-travel2 #territory-page .territory-map,
.tutorial.tutorial-travel3 #territory-page .territory-map {
    overflow-y: hidden !important;
}

.tutorial.tutorial-travel #map,
.tutorial.tutorial-travel2 #map,
.tutorial.tutorial-travel3 #map {
    overflow-x: hidden !important;
}

.tutorial.tutorial-missions #territory-page .scene-title a,
.tutorial.tutorial-missions #territory-page #missionsButton a,
.tutorial.tutorial-tourn #territory-page .scene-title a,
.tutorial.tutorial-equip #territory-page .scene-title a,
.tutorial.tutorial-trainHealth #territory-page .scene-title a,
.tutorial.tutorial-trainDamage #territory-page .scene-title a,
.tutorial.tutorial-trainArmor #territory-page .scene-title a  {
    z-index: 100;
}

.tutorial.tutorial-missions #territories-page .scene-title a,
.tutorial.tutorial-tourn #territories-page .scene-title a,
.tutorial.tutorial-mine #territories-page .scene-title a,
.tutorial.tutorial-equip #territories-page .scene-title a,
.tutorial.tutorial-trainHealth #territories-page .scene-title a,
.tutorial.tutorial-trainDamage #territories-page .scene-title a,
.tutorial.tutorial-trainArmor #territories-page .scene-title a {
    z-index: 100;
}

.tutorial.tutorial-missions #menu-page #missions-button,
.tutorial.tutorial-tourn #menu-page #tourn-link,
.tutorial.tutorial-equip #menu-page #bag-button {
    z-index: 100;
}

.tutorial.tutorial-campaignChests #territory-page .territory-royal {
    z-index: 100;
}

.tutorial.tutorial-travel3 #ability-superAttack-button {
    z-index: 100;
}

.tutorial.tutorial-travel .warrior-tips-container .tip-travel {
    display: block;
}

.tutorial.tutorial-travel2 .warrior-tips-container .tip-travel2 {
    display: block;
}

.tutorial.tutorial-travel3 .warrior-tips-container .tip-travel3 {
    display: block;
}

.tutorial .campaign-battle .game-overlay {
    display: none !important;
}

.tutorial.tutorial-travel3 .campaign-battle .game-overlay {
    display: block !important;
}

.tutorial.tutorial-campaignChests .warrior-tips-container .tip-campaignChests {
    display: block;
}

.tutorial.tutorial-missions .warrior-tips-container .tip-missions {
    display: block;
}

.tutorial.tutorial-equip .warrior-tips-container .tip-equip {
    display: block;
}

.tutorial.tutorial-tourn .warrior-tips-container .tip-tourn {
    display: block;
}


.tutorial.tutorial-travel .warrior-tips-container, .tutorial.tutorial-travel2 .warrior-tips-container, .tutorial.tutorial-travel3 .warrior-tips-container {
    top: 370px;
}

.tutorial.tutorial-equip .warrior-tips-container {
    bottom: auto;
    top: 200px;
}

.tutorial.tutorial-tourn .warrior-tips-container {
    bottom: auto;
    top: 200px;
}

.tutorial.tutorial-mine .warrior-tips-container {
    top: auto;
    bottom: 200px;
}

.tutorial.tutorial-missions #menu-page .warrior-tips-container {
    top: 100px;
}

.tutorial.tutorial-mine .warrior-tips-container .tip-mine {
    display: block;
}

.tutorial.tutorial-trainHealth .warrior-tips-container .tip-train {
    display: block;
}

.tutorial.tutorial-mine .hand {
    display: block;
}

.tutorial.tutorial-mine #modalBattles #mineCard .arrow-blue-container {
    display: block;
}

.tutorial.tutorial-mine #battles-block .arrow-blue-container {
    display: block;
}


.tutorial.tutorial-mine #menu-page .game-overlay:before {
    box-shadow: none;
}

.star-mint10 {
    width: 10px;
    height: 10px;
    background-image: url(/images/icons/star-mint.png);
    background-size: cover;
}

.star-yellow10 {
    width: 10px;
    height: 10px;
    background-image: url(/images/icons/star-yellow.png);
    background-size: cover;
}

.item-bg .improve-block {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 2px;
}

.item-bg .stripe-block {
    position: absolute;
    right: 0px;
    top: 0;
    background-color: #000000a8;
    bottom: 0;
    border-radius: 0 12px 12px 0;
    padding: 3px 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-bg .improve-block .star-yellow10 {
    margin: 0 auto;
}

.options-update-container {
    text-shadow: black 1px 1px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 23px;
    font-weight: bold;
    line-height: 24px;
    color: #39fd41;
    z-index: 5000;
}

.warrior-tips-container {
    position: absolute;
    left: 50px;
    right: 50px;
    background-color: white;
    border-radius: 50px 12px 12px 50px;
    padding: 10px 10px 10px 0;
    z-index: 20;
    pointer-events: auto;
}

.warrior-tips-container .warrior {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background-size: cover;
    background-image: url(/images/ui/woman-warrior.png);
    border-radius: 50%;
    border: 5px solid white;
    top: 50%;
    transform: translateY(-50%);
}

.warrior-tips-container .content {
    margin-left: 120px;
    font-weight: bold;
}

.warrior-tips-container .skip {
    position: absolute;
    bottom: 9px;
    right: 20px;
    width: 170px;
    text-align: right;
    font-size: 11px;
    pointer-events: auto;
}

.warrior-tips-container .skip a {
    background-color: white;
    height: 22px;
    padding-right: 20px;
    border-radius: 0 0 12px 12px;
}


#wheel .part {
    width: 60px;
    height: 80px;
    position: absolute;
    top: 22px;
}

#wheel .parts {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#wheel .part.part0 {
    left: 0;
    right: 0;
    margin: 0 auto;
}

#wheel .part.part7  {
    transform: rotate(45deg);
    right: 55px;
    top: 48px;
}

#wheel .part.part6  {
    transform: rotate(90deg);
    right: 31px;
    top: 108px;
}

#wheel .part.part5  {
    transform: rotate(135deg);
    right: 56px;
    top: 172px;
}

#wheel .part.part4  {
    transform: rotate(180deg);
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 22px;
    top: auto;
}

#wheel .part.part3 {
    transform: rotate(225deg);
    left: 56px;
    top: 172px;
}

#wheel .part.part2 {
    transform: rotate(270deg);
    left: 31px;
    top: 108px;
}

#wheel .part.part1 {
    transform: rotate(315deg);
    left: 55px;
    top: 48px;
}

#wheel .part .reward-miniatures {
    width: 60px;
    margin: 0 auto;
}

#wheel .part .reward-miniatures .counter .value{
    color: white;
}

.portrait-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.portrait-container .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
}

.portrait-container .bg .portrait {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
}

.portrait-container .frame {
    background-size: cover;
    width: 120%;
    height: 120%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
}

.portrait-container .online {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    bottom: 2px;
    right: 2px;
}

.portrait-container .online .dot {
    width: 6px;
    height: 6px;
    position: relative;
    left: 2px;
    top: 2px;
    background-color: #11e117;
    border-radius: 50%;
}

.user-character-container .bg.bg1 {
    background: linear-gradient(180deg, rgba(79,207,255,1) 0%, rgba(121,160,247,1) 100%);
}

.portrait-container .frame.frame1 {
    background-image: url(/images/portraits/frames/1.png);
}

.portrait-container .frame.frame2 {
    background-image: url(/images/portraits/frames/2.png);
}

.portrait-container .frame.frame3 {
    background-image: url(/images/portraits/frames/3.png);
}

.portrait-container .frame.frame4 {
    background-image: url(/images/portraits/frames/4.png);
}

.portrait-container .frame.frame5 {
    background-image: url(/images/portraits/frames/5.png);
}

.portrait-container .frame.frame6 {
    background-image: url(/images/portraits/frames/6.png);
}

.portrait-container .frame.frame7 {
    background-image: url(/images/portraits/frames/7.png);
}

.portrait-container .frame.frame8 {
    background-image: url(/images/portraits/frames/8.png);
}

.portrait-container .frame.frame9 {
    background-image: url(/images/portraits/frames/9.png);
}

.portrait-container .frame.frame10 {
    background-image: url(/images/portraits/frames/10.png);
}

.portrait-container .frame.frame11 {
    background-image: url(/images/portraits/frames/11.png);
}

.portrait-container .frame.frame12 {
    background-image: url(/images/portraits/frames/12.png);
}

.portrait-container .frame.frame13 {
    background-image: url(/images/portraits/frames/13.png);
}

.portrait-container .frame.frame14 {
    background-image: url(/images/portraits/frames/14.png);
}

.portrait-container .frame.frame15 {
    background-image: url(/images/portraits/frames/15.png);
}

.portrait-container .frame.frame16 {
    background-image: url(/images/portraits/frames/16.png);
}

.portrait-container.no-portrait .bg, .portrait-container.no-portrait .frame {
    filter: grayscale(1);
    opacity: 0.7;
}

.portrait-container .selected-icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10px;
    zoom: 0.3;
    display: none;
    z-index: 2;
}

.portrait-container.selected .selected-icon {
    display: block;
}

.portrait-container.selected a, .portrait-container.no-portrait a  {
    display: none;
}

.label-with-line {
    height: 28px;
    width: 100%;
    position: relative;
}

.label-with-line .line {
    width: 100%;
    height: 1px;
    background-color: #eeeff9;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.label-with-line .label {
    position: relative;
    border-radius: 12px;
    background-color: white;
    border: 1px solid #eeeff9;
    padding: 5px 10px;
    color: #8b9cab;
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
}

.scene-title-container {
    position: relative;
}

.scene-title-container .right-buttons {
    position: absolute;
    right: 5px;
    top: 2px;
}

.scene-title-container .right-buttons .icon-button-container {
    width: 35px;
    height: 35px;
    display: inline-block;
    position: relative;
}



.profile-40buttons {
    position: relative;
    margin-top: -30px;
}

.profile-40buttons .button-rectangle {
    width: 40px;
    height: 35px;
}

.profile-40buttons .button-rectangle .icon {
    zoom: 0.30;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%)
}

.profile-40buttons .button-rectangle .symbol {
    position: absolute;
    color: white;
    font-weight: bold;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 15px;
    text-shadow: -1px -1px 0 #ffa154, 1px -1px 0 #fe9c51, -1px 1px 0 #fea154, 1px 1px 0 #fe9a50;
    top: 50%;
    transform: translateY(-50%);
}

.profile-40buttons .button-rectangle.white-button .icon {
    opacity: 0.6;
}

.notifications-notes-container .separator {
    margin: 5px 0;
    width: 100%;
    height: 1px;
    background-color: #e2e1e5;
}

.notifications-notes-container .separator:last-child {
    display: none;
}

.notification-note-container.not-read {
    background-color: #f0ffe7;
}

.loading-ui {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    animation: 1s rotate360 linear infinite;
}

.loading-ui.gray {
    background-image: url("/images/ui/loading-gray.png");
}

.battle-target-miniature {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 2px solid white;
    border-radius: 50%;
    position: relative;
}

.battle-target-miniature.attacking {
    border: 2px solid #fc4c5b;
}

.battle-target-miniature.selected {
    border: 2px solid #fce64c;
}

.battle-target-miniature.dead .skull {
    display: block;
}

.battle-target-miniature.dead a {
    display: none;
}

.battle-target-miniature .skull {
    display: none;
    width: 25px;
    height: 50px;
    background-image: url(/images/ui/skull.png);
    background-size: cover;
    position: absolute;
    top: -13px;
    left: 2px;
}

.battle-target-miniature .attack {
    display: none;
    zoom:0.35;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 15px;
}

.battle-target-miniature.dead .attack {
    display: none;
}

.battle-target-miniature.attacking .attack {
    display: block;
}

.battle-target-miniature.hit .attack {
    animation: 0.3s zoom-in-zoom-out forwards linear;
}

.battle-kill {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-weight: bold;
    width: 300px;
    height: 80px;
    background-size: cover;
    line-height: 84px;
    animation: 2s battle-kill-animation linear forwards;
}

.battle-kill.battle-kill-red {
    background-image: url("/images/ui/kill-red.png");
}

.battle-kill.battle-kill-blue {
    background-image: url("/images/ui/kill-blue.png");
}

.battle-kill.battle-kill-purple {
    background-image: url("/images/ui/kill-purple.png");
}

.battle-kill.battle-kill-orange {
    background-image: url("/images/ui/kill-orange.png");
}

.location-preview-container {
    position: relative;
    border-radius: 13px;
    margin: 0 auto 10px auto;
    -webkit-perspective: 600px;
    aspect-ratio: 648 / 220;
}

.location-preview-container .pv-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
}


.location-preview-container .illustration {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.location-preview-container .illustration.teamBattle {
    background-image: url(/images/title/teamBattle.jpg);
}

.location-preview-container .illustration.combat {
    background-image: url(/images/title/combat.jpg);
}

.location-preview-container .illustration.ladder {
    background-image: url(/images/title/ladder.jpg);
}

.location-preview-container .illustration.clanBattle {
    background-image: url(/images/title/clanBattle.jpg);
}

.location-preview-container .illustration.stock {
    background-image: url(/images/title/stock.jpg);
}

.location-preview-container .illustration.mine {
    background-image: url(/images/title/mine.jpg);
}

.location-preview-container .illustration.campaign-easy {
    background-image: url(/images/title/complexity-easy.jpg);
}

.location-preview-container .illustration.campaign-medium {
    background-image: url(/images/title/complexity-medium.jpg);
}

.location-preview-container .illustration.campaign-hard {
    background-image: url(/images/title/complexity-hard.jpg);
}

.location-preview-container.blocked .illustration {
    filter: grayscale(1);
}

.location-preview-container .title-container {
    color: white;
    position: absolute;
    bottom: 0;
}

.location-preview-container .title-container .title {
    background-color: black;
    padding: 5px 10px 5px 5px;
    letter-spacing: 1px;
    font-weight: normal;
    border-radius: 0 10px 0;
}

.location-preview-container .timer-container {
    position: absolute;
    right: 0px;
    bottom: 0px;
    color: #ffea7c;
    background-color: #00000052;
    padding: 5px 10px;
    text-shadow: 1px 1px black;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 9px 0 0 9px;
}

.location-preview-container.blocked .attention {
    display: block;
}

.location-preview-container .attention {
    display: none;
    position: absolute;
    color: red;
    font-weight: bold;
    left: 10px;
    margin: 0 auto;
    text-align: center;
    top: 10px;
}

.location-preview-container .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 13px;
    overflow: hidden;
}

.location-preview-container .card-face.back {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(205 205 205) 100%);
}

.location-preview-container .card-face.back .text {
    color: black;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 1px;
    left: 10px;
    right: 10px;
}

.location-preview-container .pv-card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.location-preview-container .pv-card.is-flipped .button-rectangle a {
    pointer-events: none;
}

.wagon-coins-area {
    position: absolute;
    bottom: 250px;
    width: 100px;
    height: 150px;
}

.wagon-coins-area.center-area {
    left: 0;
    right: 0;
    margin: 0 auto
}

.wagon-coins-area.left-area {
    left: 20px;
}

.wagon-coins-area.right-area {
    right: 20px;
}

@keyframes dropAndSpin {
    0% {
        transform: rotate3d(0, 1, 0, 0deg) scale(0);
        opacity: 1;
    }

    10% {
        transform:  rotate3d(0, 1, 0, 200deg) scale(1);
    }

    30% {
        opacity: 1;
    }

    60% {
        transform: rotate3d(0, 1, 0, 1000deg) scale(1);
    }
    100% {
        transform: rotate3d(0, 1, 0, 1100deg) scale(0);
    }
}

.wagon-coins-area .icon {
    width: 40px;
    height: 40px;
    background-image: url("/images/icons/silver.png");
    background-size: cover;
    animation: 1.5s dropAndSpin linear forwards;
    position: revert;
}

.wagon-coins-area .coin {
    transform-origin: center;
    transition: transform 1.5s;
    position: absolute;
}

#abilityExperienceContainer .abilityExperience {
    transition: transform 0.8s;
    position: absolute;
}

.game-side-notifications-container {
    position: absolute;
    top: 70px;
    right: 0px;
    transition: opacity 0.5s;
    z-index: 2;
}


.game-side-notifications-container .notification-container {
    width: 100%;
    background: linear-gradient(90deg, rgb(0 0 0 / 77%) 0%, rgb(0 0 0 / 0%) 100%);
    border-radius: 8px;
    height: 36px;
    margin-bottom: 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.game-side-notifications-container .notification-container .left-part {
    width: 36px;
    height: 100%;
    border-radius: 8px;
    background-color: black;
    position: relative;
}

.game-side-notifications-container .notification-container .text {
    color: white;
    font-size: 12px;
    margin-left: 10px;
}

.right-arrow-container {
    position: absolute;
    right: 20px;
    top: 250px;
    animation: 3s right-arrow-shaking linear infinite;
    transition: opacity 0.5s;
}

.temp-shop-item {
    position: relative;
    display: inline-block;
}

.temp-shop-item .price {
    position: absolute;
    background-color: #ffffff36;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    width: 100%;
    height: 20px;
    top: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    line-height: 21px;
    text-shadow: 0px 0px 5px #919191;
}

.temp-shop-item .shop-item-counter {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background-color: white;
    top: 0;
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
}

.temp-shop-item:has(a:active) {
    transform: scale(.9);
}

.offer-container .illustration {
    aspect-ratio: 640/250;
    background-size: cover;
    background-position: center 0;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 12px;
}

.offer-container {
    position: relative;
}

.offer-container .illustration.offer1 {
    background-image: url("/images/title/offer1.jpg");
}

.offer-container .illustration.offer2 {
    background-image: url("/images/title/offer2.jpg");
}

.offer-container .illustration.offer3 {
    background-image: url("/images/title/offer3.jpg");
}

.offer-container .illustration.offer6 {
    background-image: url("/images/title/offer6.jpg");
}

.offer-container .offer-name {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 1px;
    color: #2d4778;
    text-align: center;
    margin: 10px 0;
}

.offer-container .offer-description {
    color: #92A4B4;
    text-align: center;
    letter-spacing: 0.5px;
}

.offer-container .offer-timer {
    color: #2d4778;
    display: inline;
    background-color: white;
    padding: 5px;
    border-radius: 10px 0;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    right: 0px;
    font-weight: bold;
}

.offer-container .button-rectangle {
    margin: 0 auto;
    margin-top: 20px;
    z-index: 1000;
}

.preload-resources-modal {
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    top: 0;
    z-index: 10000;
}

.preload-resources-modal .index-bg {
    position: absolute;
    width: 100%;
    height: 100dvh;
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
}

#preloadResources {
    display: none;
}

.clan-medal {
    background-size: cover;
    height: 50px;
}

.clan-medal.medal1 {
    background-image: url("/images/clan/medals/1.png");
    width: 38px;
}

.clan-medal.medal2 {
    background-image: url("/images/clan/medals/1.png");
    width: 38px;
}

.clan-medal.medal2 {
    background-image: url("/images/clan/medals/2.png");
    width: 26px;
}

.clan-medal.medal3 {
    background-image: url("/images/clan/medals/3.png");
    width: 32px;
}

.clan-medal.medal4 {
    background-image: url("/images/clan/medals/4.png");
    width: 34px;
}

.clan-medal.medal5 {
    background-image: url("/images/clan/medals/5.png");
    width: 30px;
}

.clan-medal.medal6 {
    background-image: url("/images/clan/medals/6.png");
    width: 46px;
}

.stats-icon-cell {
    width: 35px;
    height: 35px;
    border-radius: 7px;
    overflow: hidden;
}

.stats-icon-cell.red-cell {
    background: rgb(249,100,100);
    background: linear-gradient(180deg, rgba(250,109,109,1) 0%, rgba(248,92,92,1) 100%);
}

.stats-icon-cell.green-cell {
    background: rgb(21,218,143);
    background: linear-gradient(180deg, rgba(43,227,160,1) 0%, rgba(14,215,139,1) 100%);
}

.stats-icon-cell.blue-cell {
    background: rgb(77,144,240);
    background: linear-gradient(180deg, rgba(75,181,231,1) 0%, rgba(78,137,241,1) 100%);
}

.stats-icon-cell.orange-cell {
    background: rgb(255,145,97);
    background: linear-gradient(180deg, rgba(255,153,97,1) 0%, rgba(255,142,96,1) 100%);
}

.stats-icon-cell .icon {
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    animation: none;
}

.navy-color-filter {
    filter: invert(49%) sepia(16%) saturate(795%) hue-rotate(182deg) brightness(91%) contrast(87%);
}

.gray-color-filter {
    filter: invert(98%) sepia(1%) saturate(5614%) hue-rotate(186deg) brightness(100%) contrast(74%);
}

.green-color-filter {
    filter: invert(46%) sepia(87%) saturate(437%) hue-rotate(98deg) brightness(101%) contrast(105%);
}

.center-xy {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.news-container {
    position: absolute;
    top: 70px;
    left: 30px;
    right: 30px;
    text-align: center;
    background-color: #f3f3fb;
    border-radius: 12px;
    padding: 20px 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 77%) 0%, rgb(0 0 0 / 0%) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: -1px 0 30px black;
    animation: 0.4s scale0_110_100 linear forwards;
}

.clan-activity.low .filler {
    background-color: #ff515a;
}

.clan-activity.low .text-low {
    display: block !important;
}

.clan-activity.medium .filler {
    background-color: #ffa251;
}

.clan-activity.medium .text-medium {
    display: block !important;
}

.clan-activity.high .filler {
    background-color: #67e97a;
}

.clan-activity.high .text-high {
    display: block !important;
}

.first-letter-mark::first-letter {
    color: #e11414;
    font-weight: bold;
    font-size: 22px;
}

.dropdown-container {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #2bc1ff;
}

.dropdown-container.disabled {
    opacity: 0.3;
}

.dropdown-container.disabled a {
    display: none;
}

.dropdown-container.light {
    border: 1px solid #e4e6f2;
}

.dropdown-container .list-item {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #2bc1ff;
    color: white;
    overflow: hidden;
    font-weight: bold;
    line-height: 27px;
    position: relative;
}

.dropdown-container.light .list-item {
    border-bottom: 1px solid #e4e6f2;
    color: #43536C;
}

.dropdown-container .list-item:last-child {
    border: none;
}

.dropdown-container .list-item.selected {
    border-top: 1px solid #2bc1ff;
    border-radius: 6px;
    background-color: #3f3f3f;
}

.dropdown-container.light .list-item.selected {
    border-top: 1px solid #e4e6f2;
    background-color: white;
    opacity: 1;
}

.drop-items {
    position: absolute;
    z-index: 5001;
    width: 100%;
    top: 190px;
}

.drop-items .reward-slot {
    position: absolute;
    margin: 0 auto;
    right: 0;
    top: 0;
}

.overflow-hidden {
    position: relative;
    overflow: hidden;
}

#globalGameContainer.portal .index-container #auth-buttons {
    display: none;
}

#globalGameContainer.portal .index-container #loading-wheel {
    display: block !important;
}

#modalChest.bg1 {
    background: linear-gradient(180deg, rgba(214,228,239,1) 0%, rgba(221,233,242,1) 100%);
}

#modalChest.bg3 {
    background: linear-gradient(180deg, rgba(255,139,93,1) 0%, rgba(255,108,125,1) 100%);
}

.territory-map {


    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;

    /*-webkit-touch-callout: none;

    */
    -moz-user-select: none;
    overscroll-behavior-y: auto;
    scroll-behavior: auto !important;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: calc(-96px + 100vh);
    height: calc(-96px + 100dvh);
}

.territory-map .bg {
    background-position: center 0;
    background-size: cover;
    width: 400px;
    height: 1509px;
}

.territory-map.territory1 .bg {
    background-image: url("/images/territories/map/1_2.jpg");
}

.territory-map.territory2 .bg {
    background-image: url("/images/territories/map/2.jpg");
}

.territory-map.territory3 .bg {
    background-image: url("/images/territories/map/3.jpg");
}

.territory-map.territory4 .bg {
    background-image: url("/images/territories/map/4.jpg");
}

.territory-map.territory5 .bg {
    background-image: url("/images/territories/map/5.jpg");
}

.territory-map.territory6 .bg {
    background-image: url("/images/territories/map/6.jpg");
}

.territory-stages-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.territory-stages-container .territory-stage-container {
    position: absolute;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid white;
}

.territory-stages-container .territory-stage-container.green {
    background: linear-gradient(180deg, #abe08b 0%, #5bed5f 100%);
}

.territory-stages-container .territory-stage-container.purple {
    background: linear-gradient(180deg, #8b9ce0 0%, #5b78ed 100%);
}

.territory-stages-container .territory-stage-container.gray-no-frame {
    background: linear-gradient(180deg, #efefef 0%, #dfdfdf 100%);
}

.territory-stages-container .territory-stage-container.red-no-frame {
    background: linear-gradient(180deg, #e08b8b 0%, #ed5b5b 100%);
}

.territory-stages-container .territory-stage-container .level {
    font-weight: bold;
    text-align: center;
    color: white;
    font-size: 17px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 0;
    right: 0;
}

.territory-stages-container .territory-stage-container.gray-no-frame .level, .territory-stages-container .territory-stage-container.red-no-frame .level {
    text-shadow: 1px 2px rgba(0, 0, 0, 0.59);
}

.territory-stages-container .territory-stage-container .locker-icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 1px;
}

.territory-stages-container .territory-stage-container .boss-icon {
    position: absolute;
    top: -18px;
}

#slides, #slides .full-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    background-color: black;

}

#slides .full-slide .bg {
    height: 100%;
    background-size: cover;
    background-position: center 0;
    left: 0;
    top: 0;
}

#slides .full-slide .bg1 {
    background-image: url(/images/stories/s1.jpg);
    animation: 0.5s opacity-show linear forwards;
    opacity: 0;
}

#slides .full-slide .bg2 {
    background-image: url(/images/stories/s2.jpg);
    animation: 0.6s opacity-show linear forwards;
    opacity: 0;
}

#slides .full-slide .bg3 {
    background-image: url(/images/stories/s3.jpg);
    animation: 0.6s opacity-show linear forwards;
    opacity: 0;
}

#slides .full-slide .bg4 {
    background-image: url(/images/stories/s4.jpg);
    animation: 0.6s opacity-show linear forwards;
    opacity: 0;
}

#slides .full-slide .bg5 {
    background-image: url(/images/stories/s5.jpg);
    animation: 0.6s opacity-show linear forwards;
    opacity: 0;
}

#slides .full-slide .text-container {
    position: absolute;
    padding: 20px;
    top: 0;
    text-align: left;
    margin: 0 auto;
    left: 0;
    right: 0;
}

#slides .full-slide .text {
    color: white;
    font-weight: bold;
    font-size: 17px;
    text-shadow: 1px 2px black;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.49);
}

.help-tips-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

.help-tips-container .dim {
    background-color: black;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    position: absolute;
}

.help-tips-container .tip {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.help-tips-container .tip .text {
    font-weight: bold;
    color: white;
    padding: 0 20px;
    text-align: center;

    position: absolute;
}

.campaign-battle.help-tips .help-tips-container{
    display: block;
}

.campaign-battle.help-tips .tap-to-next-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.campaign-battle.help-tips .tap-to-next {
    position: absolute;
    color: #a7a7a7;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

.help-tips-container .arrow {
    position: absolute;
}

.campaign-battle.help-tips.tip1 .slider-with-mark {
    z-index: 1;
}

.campaign-battle.help-tips.tip2 .timer-info {
    z-index: 1;
}

.campaign-battle.help-tips.tip3 #attack-button {
    z-index: 1;
}

.campaign-battle.help-tips.tip3 #attack-button a {
    display: none;
}

.campaign-battle.help-tips.tip1 .help-tips-container .tip1 {
    display: block;
}

.campaign-battle.help-tips.tip2 .help-tips-container .tip2 {
    display: block;
}

.campaign-battle.help-tips.tip3 .help-tips-container .tip3 {
    display: block;
}

.campaign-battle.help-tips.tip1 .help-tips-container .tip .text {
    top: 80px;
}

.campaign-battle.help-tips.tip2 .help-tips-container .tip .text {
    top: 90px;
}

.campaign-battle.help-tips.tip3 .help-tips-container .tip .text {
    bottom: 185px;
}

.campaign-battle.help-tips.tip1 .help-tips-container .arrow {
    margin: 0 auto;
    top: 55px;
    left: 0;
    right: 0;
}

.campaign-battle.help-tips.tip2 .help-tips-container .arrow {
    top: 65px;
    left: 15px;
}

.campaign-battle.help-tips.tip3 .help-tips-container .arrow {
    margin: 0 auto;
    bottom: 155px;
    left: 0;
    right: 0;
}

.help-tips-container .arrow-top {
    transform: rotate(-90deg);
}

.help-tips-container .arrow-bottom {
    transform: rotate(90deg);
}

.click-tip {
    background-color: #3a4674;
    padding: 10px;
    border-radius: 12px;
    color: white;
    box-shadow: 1px 1px 6px #758deb;
    font-size: 12px;
    letter-spacing: 0.5px;
    animation: 0.25s popup-show-animation;
    position: absolute;
    right: 15px;
    word-break: break-word;
    border: 1px solid #5a6aa9;
    min-width: 150px;
    max-width: 80%;
    left: 20px;
    z-index: 100;
}

.click-tip .angle {
    width: 16px;
    height: 16px;
    background-color: #3A4674;
    position: absolute;
}

.click-tip .angle.top {
    bottom: -5px;
    transform: rotate(45deg);
}

.click-tip .angle.bottom {
    top: -5px;
    transform: rotate(45deg);
}

.game-logo {
    width: 180px;
    height: 177px;
    background-size: cover;
}

body.ru .game-logo {
    background-image: url("/images/ui/logo_ru.png");
}

body.en .game-logo {
    background-image: url("/images/ui/logo_en.png");
}

body.tr .game-logo {
    background-image: url("/images/ui/logo_tr.png");
}

body.yandex * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


#modalVictory {
    overflow: hidden;
}

@media only screen and (min-width: 824px) {

    body {
        transform-origin: top;
    }

    .body-side {
        background: url(/images/body-side.png) ;
        width: 212px;
        height: 600px;
        background-size: cover;
        overflow: hidden;
        position: absolute;
        opacity: 0.1;
    }

    .body-side.side-left {
        left: -212px;
    }

    .body-side.side-right {
        transform: scaleX(-1);
        right: -212px;
    }


    .body-light {
        box-shadow: 0px 0px 32px #4b4b4b;
        width: 100%;
        height: 99%;
        position: absolute;
        opacity: 0.3;
    }

}

.overflow-hidden-y {
    overflow-y: hidden !important;
}

#profile-room {
    position: relative;
    width: auto;
    height: 34vmax;
    background-image: url(/images/bg/profile1.jpg);
    top: 0;
    aspect-ratio: 800 / 533;
    background-position: center 0;
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    min-height: 250px;
    max-height: 400px;
}

.dialogs-container {
    height: calc(-157px + 100vh);
    height: calc(-157px + 100dvh);
    overflow: auto;
}

#windows {
    flex-grow: 1;
    overflow-y: auto;
}

#heroes {
    position: relative;
    top: 150px;
}

#heroes .character-area {
    left: auto;
    right: auto;
    height: 44vmax !important;
    width: auto !important;
    max-height: 434px !important;
}

#heroes .character-area.character-left {
    left: 0;
}

#heroes .character-area.character-right {
    right: 0;
}

#targets-container .character-area {
    left: 0;
    right: 0;
    height: 45vmax !important;
    width: auto !important;
    max-height: 526px !important;
}

#targets-container {
    position: relative;
    top: 63px;
}

.game-overlay {
    display: none;
}

#tutorial-container  .game-overlay {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#tutorial-container.tutorial-travel .game-overlay,
#tutorial-container.tutorial-travel1 .game-overlay,
#tutorial-container.tutorial-travel2 .game-overlay,
#tutorial-container.tutorial-travel3 .game-overlay,
#tutorial-container.tutorial-missions .game-overlay,
#tutorial-container.tutorial-equip .game-overlay,
#tutorial-container.tutorial-tourn .game-overlay,
#tutorial-container.tutorial-mine .game-overlay,
#tutorial-container.tutorial-campaignChests .game-overlay {
    display: block;
}

#tutorial-svg-container {

}

#page-container.royal-page {
    background-color: #f3f3fb;
}

#page-container.royal-page .scene-title .label {
    font-size: clamp(12px, 2vw, 17px);
}

#page-container.royal-page .royal-header .status {
    font-size: clamp(9px, 2vw, 14px);
    position: absolute;
    right: 0;
    top: 0
}

#modalManager .character-area62 {
    aspect-ratio: auto;
    width: 200px;
    height: 312px;
}

#page-container.wagon #targets-container {
    height: 100%;
}

#page-container.wagon .character-area78 {
    width: 32vmax !important;
    height: auto !important;
    max-height: auto;
    bottom: 270px;
}

a,
button,
div,
span,
img,
p,
h1, h2, h3, h4, h5, h6,
input,
label,
textarea,
svg,
canvas {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#modalRequirePermissions .permissions-character {
    background-image: url(/images/title/requirePermissions.png);
    aspect-ratio: 2 / 3;
    z-index: 0;
    position: absolute;
    top: auto;
    background-size: contain;
    height: 60vmax;
    max-height: 401px;
    width: auto;
    bottom: 165px;
    left: 50%;
    transform: translateX(-50%);
}

.filter-red {
    filter: grayscale(100%) brightness(53%) sepia(105%) hue-rotate(-30deg) saturate(1000%) contrast(1);
}

.company-complexity {
    display: flex; flex-direction: row
}

.company-complexity-easy > :nth-child(1),
.company-complexity-medium > :nth-child(1),
.company-complexity-medium > :nth-child(2),
.company-complexity-hard > :nth-child(1),
.company-complexity-hard > :nth-child(2),
.company-complexity-hard > :nth-child(3)
{
    filter: grayscale(100%) brightness(53%) sepia(105%) hue-rotate(-30deg) saturate(1000%) contrast(1);
}

#modalComplexity .gray-button {
    width: 75px;
}

#modalComplexity .blur {
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: none;
    color: white;
}

#modalComplexity .blocked .blur  {
    display: flex !important;
}

#modalComplexity .blocked .button-rectangle {
    display: none;
}

#modalComplexity.complexity-easy .popup-content > :nth-child(1) .blue-button,
#modalComplexity.complexity-medium .popup-content > :nth-child(2) .blue-button,
#modalComplexity.complexity-hard .popup-content > :nth-child(3) .blue-button
{
    display: none !important;
}