@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Orbitron:wght@400;700;900&display=swap');

* {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    outline: none;
}

select {
    font-family: inherit !important;
}

select option {
    font-family: inherit !important;
    font-size: inherit !important;
}

.iti__flag {
    background-image: url("../images/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../images/flags@2x.png");
    }
}

.hide {
    display: none;
}

.checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #1b135e;
    border-radius: 2px;
    position: relative;
    user-select: none;
    cursor: pointer;
}

p .checkbox {
    margin-top: 1px;
    margin-right: 12px;
}

.checkbox i {
    position: absolute;
    top: -4px;
    left: -2px;
    font-size: 28px;
    color: #e8cb3c;
    display: none;
}

.checkbox.active i {
    display: block;
}

:root {
    --yellow: #e8cb3c;
    --neon-text-color: #ff0000;
    --neon-text-blue: #9b7cff;
}

.yellow {
    color: #e8cb3c !important;
}

.modal {
    position: fixed;
    display: unset;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 600px;
    background: #0c0922;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 9999;
    border-radius: 8px;
    border: 2px solid #ccc;
    display: none;
    padding: 10px;
}

.modal .fa-times {
    position: absolute;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: white;
    color: #333;
    top: -15px;
    right: -15px;
    text-align: center;
}

.modal:after {
    position: absolute;
    content: '';
    width: 300px;
    height: 150px;
    top: -75px;
    left: 50%;
    background: url(../images/logo-muonline.png) top left no-repeat;
    background-size: 100% auto;
    filter: grayscale(0);
    transform: translateX(-50%);
    display: none;
}

.modal-shadow {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 999;
    display: none;
}

.modal-alerts {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background: white;
    padding: 20px;
    z-index: 9999;
    border-radius: 6px;
    box-shadow: #000 4px 5px 10px 1px;
    max-width: 350px;
    /*transition: all .2s ease-in-out;*/
    animation: scaling .5s ease-in-out forwards;
}

.modal .modal-content {
    float: left;
    width: 100%;
    color: white;
}

@keyframes scaling {
    0% {
        transform: translateY(-50%) translateX(-50%) scale(0);
    }

    50% {
        transform: translateY(-50%) translateX(-50%) scale(1.2);
    }

    100% {
        transform: translateY(-50%) translateX(-50%) scale(1);
    }
}

.modal.confirmacao-email {
    width: 700px;
}

.modal-alerts .modal-line {
    float: left;
    width: 100%;
    text-align: center;
}

.modal-alerts .modal-line i {
    line-height: 80px;
    font-size: 40px;
}

.modal-alerts .modal-line h2 {
    font-size: 30px;
    color: #6C7E8A;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    font-weight: normal;
}

.modal-alerts .modal-line p {
    font-size: 16px;
    font-weight: lighter;
    color: #6C7E8A;
    padding: 0 10px;
}

.modal-alerts .close-alert {
    display: inline-block;
    padding: 8px 15px;
    color: white;
    font-size: 16px;
    font-weight: normal;
    margin-top: 20px;
    border-radius: 5px;
}

.modal-alerts.erro i {
    color: #F65656;
}

.modal-alerts.erro .close-alert {
    background: #F65656;
}

.modal-alerts.erro .close-alert:hover {
    background: #f43535;
}

.modal-alerts.info i {
    color: #4177d3;
}

.modal-alerts.info .close-alert {
    background: #4177d3;
}

.modal-alerts.info .close-alert:hover {
    background: #3724de;
}

.modal-alerts.alerta i {
    color: #E4C337;
}

.modal-alerts.alerta .close-alert {
    background: #E4C337;
}

.modal-alerts.alerta .close-alert:hover {
    background: #d1a90c;
}

.message {
    float: left;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.message.sucesso {
    background: #DFF0D8;
    color: #3C765E;
    border: 1px solid #3C765E;
}

.message.sucesso a {
    color: #3C765E;
    text-decoration: underline;
}

.message.sucesso a:hover {
    text-decoration: none;
}

.message.info {
    background: #D9EDF7;
    color: #31708F;
    border: 1px solid #31708f;
}

.message.info p {
    color: #31708F !important;
    font-size: 13px !important;
}

.message.alerta {
    background: #FCF8E3;
    color: #8A6D3B;
    border: 1px solid #8A6D3B;
}

.message.erro {
    background: #F2DEDE;
    color: #A94442;
    border: 1px solid #A94442;
}

.modal-messages {
    float: left;
    width: 100%;
    padding: 5px;
}

.modal-messages-static {
    float: left;
    width: 100%;
    padding: 5px;
}

a {
    color: #3724de;
}

a:hover {
    color: #e8cb3c;
}

.margin0 {
    margin: 0 !important;
}

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

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

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

.left {
    float: left;
}

.right {
    float: right;
}

.no-border-left {
    border-left: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-border-top {
    border-top: 0 !important;
}

.no-border {
    border: 0 !important;
}

.hidden {
    display: none;
}

.m5 {
    margin: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.p10 {
    padding: 10px;
}

.p20 {
    padding: 20px;
}

.wauto {
    width: auto !important;
}

.w100 {
    width: 100% !important;
}

.w90 {
    width: 90% !important;
}

.w80 {
    width: 80% !important;
}

.w70 {
    width: 70% !important;
}

.w60 {
    width: 60% !important;
}

.w50 {
    width: 50% !important;
}

.w40 {
    width: 40% !important;
}

.w30 {
    width: 30% !important;
}

.w20 {
    width: 20% !important;
}

.w10 {
    width: 10% !important;
}

.w33 {
    width: 33.33% !important;
}

.w25 {
    width: 25% !important;
}

.text-removed {
    text-decoration: line-through;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-justified {
    text-align: justify;
    text-justify: inter-word;
}

.flex {
    display: flex !important;
}

.j-c-center {
    justify-content: center;
}

p.flex a {
    margin: 0 5px;
}

.forms label {
    padding: 5px;
}

.forms label span.title {
    float: left;
    width: 100%;
    color: #fff;
    font-size: 16px;
    margin-bottom: 6px;
}

.forms label span.small {
    font-size: 12px;
    float: left;
    width: 100%;
    margin-bottom: 6px;
    color: #666;
}

.forms label input[type=text],
.forms label input[type=email],
.forms label input[type=password],
.forms label input[type=number],
.forms label select,
.forms label textarea {
    padding: 8px;
    border: 0;
    background: #1b135e;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
}

.forms label.flex button {
    padding: 0 10px;
    color: #3724de;
    background: #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

.forms label.flex input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.iti {
    width: 100%;
}

.iti__flag-container {
    background: #f0f0f0;
    z-index: 5;

    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px;
    outline: none;
}

.forms label.celular-label input {
    padding-left: 55px;
    overflow: hidden;
    outline: none;
}

.forms label.celular-label input::-webkit-input-placeholder {
    color: #ccc;
}

.forms label textarea {
    resize: vertical;
}

.forms label input:focus {
    border-color: #FDCF1C;
}


.forms.form-etapas form {
    float: left;
    width: 100%;
    display: none;
}

.forms.form-etapas fieldset {
    float: left;
    width: 100%;
}

.forms.form-etapas form:first-child {
    display: block;
}

html {
    height: 100%;
    overflow-y: scroll;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

#wrap-background {
    display: flex;
    width: 100%;
    flex: 1 0 auto;
    flex-wrap: wrap;

    background: #0d0733 url(../images/bg-top.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
}

#wrap-background.halloween {
    background: #010F2C url(../images/bg-halloween.jpg);
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

#wrap-background.black-friday {
    display: flex;
    width: 100%;
    flex: 1 0 auto;
    flex-wrap: wrap;

    background: #000000 url(../images/bg-black-friday.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
}

.bruxinha,
.black-november {
    position: absolute;
    top: 50px;
    left: 0;
    width: 150px;
    height: 159px;
    background: url(../images/bruxinha.png);
    background-size: 100%;
    animation: floating 6s ease-in-out infinite;
}

.black-november {
    width: 200px;
    background: none;
    animation: none;
    transform: rotate(-30deg);
}

.black-november .text {
    display: flex;
    font-family: 'Poiret one', sans-serif;
    width: 100%;
    font-size: 35px;
    font-weight: lighter;
    color: white;
    text-transform: uppercase;
    animation: flicker 1.5s infinite alternate;
}

.black-november .text.black {
    font-size: 60px;
}

.black-november .text.november {
    animation: flickerblue 1.5s infinite alternate;
}

.black-november .text.week {
    animation: flickerblue 1.5s infinite alternate;
    font-size: 70px;
}

.black-november .text.friday {
    animation: flickerblue 1.5s infinite alternate;
    font-size: 60px;
}

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

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

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

@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {

        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 1rem var(--neon-text-color),
            0 0 2rem var(--neon-text-color),
            0 0 3rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 5rem var(--neon-text-color);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        box-shadow: none;
    }
}

@keyframes flickerblue {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {

        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 1rem var(--neon-text-blue),
            0 0 2rem var(--neon-text-blue),
            0 0 3rem var(--neon-text-blue),
            0 0 4rem var(--neon-text-blue),
            0 0 5rem var(--neon-text-blue);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        box-shadow: none;
    }
}

#wrap-background.xmas {

    background: #0B0917 url(../images/bg-xmas.jpg);
    background-size: 100% auto;
    background-position: top -80px center;
    background-repeat: no-repeat;
    position: relative;
}

.moon {
    position: absolute;
    top: -130px;
    left: -250px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
    background: url(../images/moon.png) center center no-repeat;
    background-size: 100%;
}

.santa {
    display: flex;
    width: 205px;
    height: 74px;
    background: url(../images/santa.png);
    background-size: 100%;
    animation: fly 3s ease-in-out infinite;
}

@keyframes fly {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

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

.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@-webkit-keyframes snowflakes-shake {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }

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

@keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px)
    }

    50% {
        transform: translateX(80px)
    }

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

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
}

.snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
}

.snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s, 1s;
    animation-delay: 1s, 1s
}

.snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 6s, .5s;
    animation-delay: 6s, .5s
}

.snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s, 2s;
    animation-delay: 4s, 2s
}

.snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s, 2s;
    animation-delay: 2s, 2s
}

.snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 8s, 3s;
    animation-delay: 8s, 3s
}

.snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 6s, 2s;
    animation-delay: 6s, 2s
}

.snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 2.5s, 1s;
    animation-delay: 2.5s, 1s
}

.snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s, 0s;
    animation-delay: 1s, 0s
}

.snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s, 1.5s;
    animation-delay: 3s, 1.5s
}

.mega-sorteio {
    position: absolute;
    top: 22px;
    left: -35px;
    width: 245px;
    height: 255px;
    background: url(../images/mega-sorteio-2025.png);
    background-size: 100%;
}

.btn {
    border: 0;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-right: 5px;
    font-size: 15px;
    font-weight: normal;
    outline: none;
}

.btn.medium {
    padding: 8px 12px;
    font-weight: normal;
}

.btn.btn-gold {
    background: linear-gradient(to bottom, #e8cb3c, #c48713);
    color: #010E2A;
    cursor: pointer;
}

.btn.btn-gold:hover {
    background: linear-gradient(to bottom, #c48713, #e8cb3c);
}


.btn.btn-silver {
    background: linear-gradient(to bottom, #fff, #ccc);
    color: #010E2A;
    cursor: pointer;
}

.btn.btn-silver:hover {
    background: linear-gradient(to bottom, #ccc, #fff);
}

#barra-logado {
    float: left;
    width: 100%;
    background: #0c0922;
    border-bottom: 1px solid #3724de;
    position: relative;
}

#barra-logado:after {
    position: absolute;
    content: '';
    top: calc(100% + 1px);
    width: 100%;
    height: 1px;
    background: #000;
}

#barra-logado p {
    float: right;
    color: white;
    line-height: 60px;
}

#barra-logado .acao {
    display: inline-block;
    margin-left: 10px;
    position: relative;
}

.tooltip {
    position: relative !important;
}

.tooltip::after {
    position: absolute;
    content: attr(alt);
    /*width:63px;*/
    padding: 5px;
    background: black;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    color: white;
    font-family: Tahoma;
    font-size: 10px;
    z-index: 9999 !important;
    display: none;
    text-align: center;
    white-space: no-wrap;
    font-weight: normal;
}

.tooltip:hover:after {
    display: block;
}

#wrap-site,
.center {
    margin: 0 auto;
    width: 960px;
    min-width: 960px;
}

#header {
    float: left;
    width: 100%;
}

#header #header-top {
    float: left;
    width: 100%;
    height: 300px;
    position: relative;
}



#header #header-top .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 100;
}

#header #menu {
    float: left;
    width: 100%;
    background: linear-gradient(to bottom, rgba(184, 48, 201, 0.4), rgba(81, 66, 251, 0.4));
    border-radius: 13px;
    padding: 0 5%;
    position: relative;
    border: 2px solid rgba(255, 255, 255, .2);
    border-top-width: 1px;
}

#header #menu .download-client {
    position: absolute;
    right: 0;
    top: -65px;
    width: 250px;
    height: 190px;
    background: url(../images/downloadbtn.png);
    background-size: 100%;
}

#header #menu .download-client:hover {
    background: url(../images/downloadbtn-hover.png);
}

#header #menu ul {
    float: left;
    width: 100%;
}

#header #menu ul li {
    float: left;
    position: relative;
}

#header #menu ul li.live-btn.active a {
    color: red;
    position: relative;
}

#header #menu ul li.live-btn.active a:before {
    display: inline-block;
    position: relative;
    margin: 0 5px 0 0;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: red;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

#header #menu ul li a {
    float: left;
    line-height: 70px;
    padding: 0 15px;
    text-transform: uppercase;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

#header #menu ul li a:hover {
    background: linear-gradient(to bottom, rgba(81, 66, 251, 0.6), rgba(184, 48, 201, 0.6));
}

#header #menu ul li.sub:hover>a {
    color: #e8cb3c;
}

#header #menu ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 250px;
    background: linear-gradient(to bottom, rgba(184, 48, 201, 0.9), rgba(81, 66, 251, 0.9));
    z-index: 9999;
    padding: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-top: 0;
    display: none;
}

#header #menu ul li:hover>ul {
    display: block;
}


#header #menu ul li ul li {
    float: left;
    width: 100%;
}

#header #menu ul li ul li:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: radial-gradient(rgba(255, 255, 255, .7) 5%, transparent 60%);
}

#header #menu ul li ul li:first-child {
    border-top: 0;
}

#header #menu ul li ul li:last-child {

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden;
    border-bottom: 0;
}

#header #menu ul li ul li a {
    float: left;
    width: 100%;
    line-height: 40px;
}

#header #menu ul li ul li a:hover {
    background: none;
    color: #e8cb3c;
}

#conteudo {
    float: left;
    width: 100%;
    padding: 10px;
    margin-top: 70px;
    background: #0c0922;
    border: 4px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-image-source: linear-gradient(#3724de, #1a1452);
}

#conteudo.relative {
    position: relative !important;
    overflow: hidden;
}

#conteudo #conteudo-left {
    float: left;
    width: calc(100% - 280px);
    padding: 0 10px;
}

.title-content,
.subtitle-content {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    padding: 8px 0;
    color: #e8cb3c;
    position: relative;
    margin-bottom: 30px;
}

.subtitle-content {
    font-size: 18px;
    margin-bottom: 20px;
}

.title-content:before {
    position: absolute;
    content: '';
    top: 100%;
    width: 100%;
    left: 0;
    height: 15px;
    background: url(../images/title-divider.png);
    background-position: center center;
    background-repeat: no-repeat;
    filter: invert(1);
}

.title-content.no-division {
    margin-bottom: 20px;
}

.title-content.no-division:before {
    display: none;
}


#conteudo #conteudo-left>p,
p.wellcome-text {
    float: left;
    width: 100%;
    color: #ebebeb;
    margin-top: 10px;
    font-size: 14px;
}

.wellcome {
    margin-bottom: 30px;
}

h2.ornamento {
    float: left;
    width: 100%;
    font-size: 20px;
    height: 20px;
    text-align: center;
    font-family: "Bree Serif";
    color: #fff;
    position: relative;
    margin-bottom: 30px;
    text-shadow: #000 0 1px 0;
    font-weight: normal;
}

h2.ornamento:before {
    position: absolute;
    content: '';
    width: 118px;
    height: 48px;
    background: url(../images/s1.png);
    top: 50%;
    left: -10px;
    transform: scale(0.8) translateY(-50%);
}

h2.ornamento:after {
    position: absolute;
    content: '';
    width: 118px;
    height: 48px;
    background: url(../images/s1.png);
    top: -50%;
    right: -20px;
    transform: scale(0.7) rotate(180deg);
}

#conteudo-left #gens-stats {
    float: left;
    width: 100%;
    text-align: center;
    /*margin-top:30px;*/
}

#conteudo-left #gens-stats #gens-background {
    display: inline-block;
    width: 530px;
    height: 185px;
    background: url(../images/bg-gens.png) no-repeat center center;
    position: relative;
}

#gens-background .duprian-qtd,
#gens-background .vanert-qtd {
    position: absolute;
    bottom: 20px;
    left: 120px;
    color: #BD9E7F;
    font-size: 12px;
}

#gens-background .vanert-qtd {
    left: initial;
    right: 120px;
}

#castle-siege {
    float: left;
    width: 100%;
    margin-top: 30px;

    position: relative;
}

#castle-siege .castle-siege-wrap {
    float: left;
    width: 100%;
    padding: 15px;

    background: url(../images/bg-siege.jpg);
    background-position: top right;
    background-size: cover;
    position: relative;
    box-shadow: inset 0px 0px 17px 22px rgba(1, 8, 34, 1);

    padding-top: 30px;
    padding-left: 20px;
}

#castle-siege .guild-symbol-wrap {
    float: left;
    width: 120px;
    text-align: center;
    color: #e8cb3c;
}

#castle-siege .guild-symbol {
    float: left;
    width: 100%;
    padding: 8px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    margin-bottom: 8px;
}

#castle-siege .guild-symbol img {
    float: left;
    width: 100%;
    position: relative;
}

#castle-siege .guild-info-wrap {
    float: left;
    width: 100%;
    padding: 10px;
    font-family: "Bree Serif";
}

#castle-siege .guild-info {
    float: left;
    width: calc(100% - 120px);
    padding: 0 30px;
}

#castle-siege .guild-info p {
    font-family: "Bree Serif";
    float: left;
    width: 100%;
    color: #e8cb3c;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    font-size: 18px;
    text-shadow: #000 0 1px 2px;
}

#castle-siege .guild-info h3 {
    float: left;
    width: 100%;
    color: #fff;
    font-family: "Arial";
    margin-bottom: 5px;
    font-size: 17px;
    text-shadow: #000 0 1px 2px;
}


#castle-siege .gens {
    position: absolute;
    top: 50%;
    right: 210px;
    width: 60px;
    height: 66px;
    transform: translateY(-50%) scale(1.2);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: initial;
}

#castle-siege .gens.vanert {
    background-image: url(../images/gens-v.png);
}

#castle-siege .gens.duprian {
    background-image: url(../images/gens-d.png);
}

#noticias {
    float: left;
    width: 100%;
    padding-left: 65px;
}

#noticias-sumario {
    float: left;
    width: 100%;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

#noticias-sumario ul {
    float: left;
    width: 100%;
}

#noticias-sumario ul li {
    display: inline-block;
}

#noticias-sumario ul li:not(:last-child) {
    margin-right: 10px;
}

#noticias-sumario ul li .bolinha {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2955ad;
    border: 2px solid transparent;
}

#noticias-sumario ul li .bolinha.vermelho {
    background: #EC5463;
}

#noticias-sumario ul li .bolinha.amarelo {
    background: #FCCE54;
}

#noticias-sumario ul li .bolinha.verde {
    background: #42CB6F;
}

#noticias ul {
    position: relative;
    float: left;
    width: 100%;
    padding-left: 20px;
}

#noticias ul:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    border-left: 2px dashed #fff;
}

#noticias ul li {
    float: left;
    width: 100%;
    background-color: #1a1452;
    padding: 10px;
    position: relative;
    box-shadow: 0 0 4px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .08);
    border-radius: 5px;
}

#noticias ul li:not(:last-child) {
    margin-bottom: 30px;
}

#noticias ul li:before {
    position: absolute;
    content: '';
    top: 0;
    left: -20px;
    width: 2px;
    height: 100%;
    background: white;
}

#noticias ul li:after {
    position: absolute;
    top: 0;
    left: -25px;
    width: 8px;
    height: 8px;
    background: #2955ad;
    content: '';
    border: 2px solid transparent;
    border-radius: 50%;
}

#noticias ul li.manutencao:after {
    background: #EC5463;
}

#noticias ul li.evento:after {
    background: #FCCE54;
}

#noticias ul li.changelog:after {
    background: #42CB6F;
}

#noticias ul li .data {
    position: absolute;
    top: 0;
    left: -85px;
    color: white;
    font-size: 10px;
    font-weight: bold;
}

#noticias ul li p {
    font-size: 13px;
    color: #fff;
}

#conteudo #sidebar-stats {
    float: left;
    width: 280px;
    padding: 0 0 10px 10px;
}

#conteudo #sidebar-stats .sidebar-block {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

#conteudo #sidebar-stats .sidebar-block .title-block {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: 18px;
    color: white;
    font-weight: normal;
    padding: 5px 10px;
    text-align: center;
    position: relative;
    z-index: 99;
    font-family: "Bree Serif";
}

#conteudo #sidebar-stats .sidebar-block .title-block:before {
    position: absolute;
    content: '';
    width: 50px;
    height: 48px;
    background: url(../images/s1.png);
    top: -6px;
    left: -10px;
    transform: scale(0.7);
    z-index: -1;
}

#conteudo #sidebar-stats .sidebar-block .title-block:after {
    position: absolute;
    content: '';
    width: 50px;
    height: 48px;
    background: url(../images/s1.png);
    top: -6px;
    right: -10px;
    transform: scale(0.7) rotate(180deg);
    z-index: -1;

}

#conteudo #sidebar-stats .sidebar-block .block-content {
    float: left;
    width: 100%;
}

#conteudo #sidebar-stats .sidebar-block .block-content ul {
    float: left;
    width: 100%;
}

#conteudo #sidebar-stats .sidebar-block .block-content ul li {
    float: left;
    width: 100%;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
}

.sidebar-block .block-content ul li .col {
    float: left;
    padding: 5px 0 5px 10px;
    font-size: 12px;
}

.gens-info {
    display: flex;
    width: 100%;
    padding-top: 30px;
}

.gens-info li {

    width: 50%;
    flex-wrap: wrap;
}

.gens-info li .gens-logo,
.gens-info li .gens-points {
    display: flex;
    justify-content: center;
    width: 100%;
}

.gens-info li .gens-logo {
    margin-bottom: 10px;
}

.gens-info li .gens-points {
    color: white;
}


.off {
    color: #91140C !important;
    font-weight: bold !important;
}

.on {
    color: #19aa0f !important;
    font-weight: bold !important;
}

.badge {
    display: block;
    width: 15px;
    height: 15px;
    background: #ccc;
    float: left;
    margin-right: 8px;
}

.badge.top1 {
    background: url(../images/rank_ouro.gif) top left no-repeat;
    background-size: cover;
}

.badge.top2 {
    background: url(../images/rank_prata.gif) top left no-repeat;
    background-size: cover;
}

.badge.top3 {
    background: url(../images/rank_bronze.gif) top left no-repeat;
    background-size: cover;
}

.sidebar-block .block-content ul li .col-1 {
    background: #1a1452;
    color: white;
    position: relative;

    width: 45%;
}

.sidebar-block .block-content ul li .col-1:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    border: 14px solid #fff;
    border-left: 5px solid #1a1452;

    border-right: 0;
    background: blue;
}

.sidebar-block .block-content ul li .col-2 {
    background: #fff;

    width: 55%;
}


.sidebar-block .form-login p {
    width: 100%;
    color: white;
    margin: 8px 0;
}

.sidebar-block .form-login label {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.sidebar-block .form-login label span {
    float: left;
    width: 40px;
    line-height: 40px;

    text-align: center;
    color: white;
    background: #1a1452;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.sidebar-block .form-login label input {
    float: left;
    width: calc(100% - 40px);
    line-height: 40px;
    padding: 0 10px;
    border: 0;
    outline: none;
    color: #666;
    font-size: 15px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*page*/
#page {
    float: left;
    width: 100%;
    padding: 0 10px 10px 10px;
}

#page p {
    color: white;
    font-size: 14px;
    padding: 0 5px;
    margin-bottom: 10px;
}

.flex-box-divider {
    display: flex;
    width: 100%;
}

.box-info {
    float: left;
    border: 1px solid #021249;
    padding: 15px;
}

.box-info .box-header {
    float: left;
    width: 100%;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #021249;
    margin-bottom: 15px;
}

.box-info .box-header span {
    color: white;
    font-size: 20px;
}

.box-info .box-header span b {
    color: #3724de;
}

.box-info .box-header i {
    position: relative;
    background: #3724de;
    color: #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 15px;
    left: 0;
    top: 3px;
    margin-right: 5px;
}

.box-info .box-header i:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.box-info .info-contents {
    float: left;
    width: 100%;
}

.box-info .info-contents ul {
    float: left;
    width: 100%;
}

.box-info .info-contents ul li {
    float: left;
    width: 100px;
    margin-right: 1%;
}

.box-info .info-contents ul li .image-mirror {
    float: left;
    width: 100%;
    padding: 5px 5px 10px 5px;
    text-align: center;
    /*min-height:80px;*/
}

.box-info .info-contents ul li .image-mirror img {
    display: inline-block;
    max-width: 60px;
}

.box-info .info-contents ul li .image-mirror img.radius-white {
    border-radius: 3px;
    background: white;
}

.box-info .info-contents ul li .download-btn {
    float: left;
    width: 100%;
    border-radius: 3px;
    background: #091c2d;
    color: #4191da;
    text-align: center;
    padding: 8px 0;
}

.box-info .info-contents ul li .download-btn:hover {
    background: #4191da;
    color: #091c2d;
}

.box-info .info-contents ul li .descricao {
    display: flex;
    width: 100%;
    color: white;
}

.box-info .info-contents ul li .descricao span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 11px;
    line-height: unset;
    height: 65px;
    text-align: center;
    padding: 5px 0;
}

.box-info .info-contents.drivers {
    text-align: center;
}

.box-info .info-contents.drivers li {
    display: inline-block;
    float: none;
    margin: 0 !important;
}

.table-divider {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.table-divider .w50:first-child {
    padding-right: 10px;
}

.table-divider .w50:last-child {
    padding-left: 10px;
}

.table {
    float: left;
    width: 100%;
    color: white;
    text-align: center;
    border-collapse: collapse;
}

.table tr td.info {
    text-align: left;
    padding-left: 7px;
}

.table tr td.place img {
    float: left;
    margin-left: 7px;
    width: 16px;
    max-height: 16px;
    margin-top: 7px;
}

.table tr td.place {
    width: 60px;
    background: linear-gradient(to right, #1a1452, transparent);
}

.table tr td,
.table tr th {
    padding: 7px 0;
}

.table tr td {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

.table tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: #100c35;
}

.table.smaller-font {
    font-size: 13px;
}

.table.right-border th,
.table.right-border td {
    border-right: 1px solid #999;
}

.table.right-border th:last-child,
.table.right-border td:last-child {
    border-right: 0;
}

/*Xchange*/
.table.xchange tbody:hover,
.table.xchange tr.hover,
.table.xchange th.hover,
.table.xchange td.hover,
.table.xchange tr.hoverable:hover {
    background-color: #100c35;
}

.table.xchange th,
.table.xchange td {
    border: 1px solid #1a1452 !important;
}

.table.xchange th {
    border-top: 0 !important;
}

.table.xchange th:first-child,
.table.xchange td:first-child {
    border-left: 0 !important;
}

.table.xchange th:last-child,
.table.xchange td:last-child {
    border-right: 0 !important;
}

/*Ranking page*/

.place_1,
.place_2,
.place_3 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: #000 0 1px 0;
}

.place_1 {
    font-size: 25px;
}

.place_2 {
    font-size: 20px;
}

.table.ranking td,
.table.dark-border td,
.table.dark-border th {
    border-color: #1a1452;
}

.table.ranking td .fa-user {
    color: #ebebeb;
}

.table.ranking td .fa-user.active {
    color: #19aa0f;
}

.table.ranking .logo-guild {
    max-width: 32px;
}

.table.ranking .ally {
    display: inline-block;
    width: 100%;
    font-size: 13px;
    color: #e8cb3c;
}

.table.ranking td .flag img {
    width: 16px;
    max-height: 16px;
}

#filtros-ranking {
    float: left;
    width: 100%;
    padding: 15px 0;
    text-align: center;
}

/*#filtros-ranking .filtros-center{
    display:inline-block;
}
#filtros-ranking .filtros-center select{
    padding:8px;
    outline:none;
    margin:0 5px;
    min-width:200px;
    background:white;
}
#filtros-ranking .filtros-center select option{
    padding:5px;
}*/
#filtros-ranking .filtros-center label {
    padding-right: 10px;
}

#filtros-ranking .filtros-center label:last-child {
    padding-right: 0;
}

#filtros-ranking .filtros-center select {
    /*padding: 10px;*/
    width: 100%;
    background: white;
}

.pagamento {
    float: left;
    width: 56px;
    height: 39px;
    background: url(../images/pagseguro.png) top left no-repeat;
    margin-right: 13px;
    margin-bottom: 10px;
    background-position: -1px -29px;
}

.pagamento:hover {
    filter: grayscale(0);
}

.pagamento.visa {
    background-position: -72px -29px;
}

.pagamento.mastercard {
    background-position: -142px -29px;
}

.pagamento.diners {
    background-position: -212px -29px;
}

.pagamento.amex {
    background-position: -282px -29px;
}

.pagamento.hipercard {
    background-position: -352px -29px;
}

.pagamento.aura {
    background-position: -422px -29px;
}

.pagamento.elo {
    background-position: -492px -29px;
}

.pagamento.pleno {
    background-position: -562px -29px;
}

.pagamento.personal {
    background-position: -632px -29px;
}

.pagamento.brasil {
    background-position: -1px -86px;
}

.pagamento.fortbrasil {
    background-position: -72px -86px;
}

.pagamento.paggo {
    background-position: -142px -86px;
}

.pagamento.bradesco {
    background-position: -212px -86px;
}

.pagamento.itau {
    background-position: -282px -86px;
}

.pagamento.bb {
    background-position: -352px -86px;
}

.pagamento.banrisul {
    background-position: -422px -86px;
}

.pagamento.hsbc {
    background-position: -492px -86px;
}

.pagamento.boleto {
    background-position: -562px -86px;
}

.pagamento.pincode {
    background-position: -632px -86px;
}

.contribuicao {
    float: left;
    width: 100%;
    padding: 30px 0;
    text-align: center;
}

.contribuicao .contribuir-btn {
    display: inline-block;
    padding: 5px;
    background: linear-gradient(to bottom, #2a6cdd, #3724de);
    border-radius: 5px;
}

.contribuicao .contribuir {
    display: inline-block;
    color: white;
    font-size: 16px;
    padding: 12px 18px;
    background: #3724de;
    border-radius: 5px;
    position: relative;
}

.contribuicao .contribuir-btn:hover {
    background: linear-gradient(to bottom, #4793f7, #3724de);
}

.etapa {
    float: left;
    width: 100%;
    display: none;
}

.etapa:first-child {
    display: block;
}

.etapa-download {
    display: flex;
    width: 100%;
    gap: 10px;
}

.next-download {
    cursor: pointer;
}

.next-download:hover {
    background: #100c35;
}

.etapa-download .download-option {
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 8px;
    border: 1px solid #021249;
    position: relative;
}

.download-option .tag {
    display: none;
    position: absolute;
    top: 20%;
    width: calc(100% + 20px);
    left: 0;
    transform: translateX(-15px);
    border: 1px solid #000;
    padding: 4px;
    border-top-left-radius: 2px;

    background: #0c0922;
    box-shadow: 9px 32px 29px -13px rgba(0, 0, 0, 0.75);
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    text-transform: none;
    z-index: 9999;
}

.download-option:hover .tag {
    display: flex;
}

.etapa-download .download-option img {
    max-width: 60%;
    display: inline-flex;
    margin: 15px 0;
}

.etapa-download .download-option h2,
.etapa-download .download-option h3,
.etapa-download .download-option h4 {
    display: flex;
    width: 100%;
    font-weight: normal;
    margin-bottom: 15px;
}

.etapa-download .download-option h2 {
    justify-content: center;
    color: white;
}

.etapa-download .download-option h3 {
    justify-content: center;
    color: white;
    font-size: 20px;
}

.etapa-download .download-option h4 {
    justify-content: start;
    color: #e8cb3c;
    font-size: 18px;
}

.requisitos-download {
    border-radius: 8px;
}

.etapas {
    display: flex;
    width: 100%;
    color: white;
    position: relative;
    z-index: 3;
    padding: 20px 10px;
    counter-reset: step;
}

.etapas li {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 13px;
    cursor: pointer;
}

.etapas li:before {
    display: block;
    content: counter(step);
    counter-increment: step;
    color: white;
    width: 30px;
    line-height: 30px;
    background: #5142fb;
    margin: 0 auto 10px auto;
    border-radius: 50%;
}

.etapas li:after {
    position: absolute;
    content: '';
    top: 15px;
    left: -50%;
    z-index: -1;
    width: 100%;
    height: 2px;
    background: #5142fb;
}

.etapas li:first-child:after {
    content: none;
}

.etapas li.active:before {
    background: #e8cb3c;
    color: #222;
}

.etapas li.active:after {
    background: #e8cb3c !important;
}

.select-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
}

.select-box {
    display: flex;
    width: 80%;
    margin-bottom: 10px;
    position: relative;
    justify-content: space-between;
}

.generic-select,
.item-selected {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 80px);
    background: white;
    list-style-type: none;
    flex-wrap: wrap;
    z-index: 9999;
}

.generic-select {
    max-height: 292px;
    display: none;
    overflow-y: auto;
}

.generic-select::-webkit-scrollbar-track {
    border: 1px solid #ccc;
    background-color: #ebebeb;
    /*#010619;*/
}

.generic-select::-webkit-scrollbar {
    width: 10px;
    background-color: #010619;
}

.generic-select::-webkit-scrollbar-thumb {
    background-color: #3724de;
}

.item-selected {
    position: initial;
}

.select-box .btn {
    width: 66px;
    border-radius: 0;
    padding: 8px 0;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.select-box .btn span {
    text-align: center;
    width: 100%;
    font-size: 16px;
}

.select-box .btn .fa {
    font-size: 18px;
}

.item-selected li:after {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    content: '';
    border: 6px solid transparent;
    border-top-color: #2b2b2b;
    border-bottom: 0;
}

.generic-select li,
.item-selected li {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    color: #2b2b2b;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    position: relative;
    height: 55px;
}

.item-selected li {
    height: 100%;
}

.generic-select li .logo-gateway,
.item-selected li .logo-gateway {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
}

.generic-select li .logo-gateway img,
.item-selected li img {
    width: 100%;
    max-width: 40px;
}

.generic-select li .meio-pagamento,
.item-selected li .meio-pagamento {
    padding-left: 10px;
}

.generic-select li .meio-pagamento p,
.item-selected li .meio-pagamento p {
    color: #333 !important;
    padding: 0 !important;
}

.generic-select li:hover {
    background: #f0f0f0;
}


.generic-select li h3,
.item-selected li h3 {
    font-size: 17px;
    display: flex;
    align-items: center;
    font-weight: bold;
    width: 100%;
}

.generic-select li p,
.item-selected li p {
    font-size: 14px;
    padding-bottom: 3px;
}

.generic-select li h3 span,
.item-selected li h3 span {
    display: inline-flex;
    background: #00a651;
    margin-left: 5px;
    color: white;
    padding: 1px 3px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 11px;
    border-radius: 2px;
}

.generic-select li h3 span.red,
.item-selected li h3 span.red {
    background: red;
}

.player-confirm {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

.player-confirm .player-image {
    text-align: center;
    width: 100%;
    justify-content: center;
}

.player-confirm .player-info {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    width: 100%;
}

.player-confirm .player-info .player-guild,
.player-confirm .player-info .player-name {
    width: 100%;
    font-size: 15px;
    color: white;
}

.player-confirm .player-info .player-guild {
    color: #E7CB3B;
}

.detalhes-contribuicao {
    float: left;
    width: 100%;
    text-align: center;
    color: white;
    padding: 30px 0;
}

.detalhes-contribuicao h3 {
    float: left;
    width: 100%;
    color: #e8cb3c;
    font-size: 17px;
    font-weight: normal;
    margin-bottom: 10px;
}

/*Pagina info*/
.next-prev,
.next-prev-child {
    float: left;
    width: 100%;
    color: white;
    text-align: center;
    padding: 15px;
    position: relative;
}

.next-prev .proximo,
.next-prev .anterior {
    position: absolute;
    top: 15px;
    line-height: 60px;
    font-size: 20px;
    left: 15px;
    width: 60px;
    cursor: pointer;
}

.next-prev .proximo:hover,
.next-prev .anterior:hover {
    background: #2a69d6;
}

.next-prev .proximo {
    left: initial;
    right: 15px;
}

.next-prev .item,
.next-prev-child .item {
    float: left;
    width: 100%;
    display: none;
}

.next-prev .item.active,
.next-prev-child .item.active {
    display: block;
}

.next-prev .item .item-header {
    float: left;
    width: 100%;
    line-height: 60px;
    background: #3724de;
}

.next-prev .item .item-content {
    float: left;
    width: 100%;

    max-height: 590px;
    overflow: auto;
}

.next-prev .item .item-content::-webkit-scrollbar-track {
    border: 1px solid black;
    background-color: #010619;
}

.next-prev .item .item-content::-webkit-scrollbar {
    width: 10px;
    background-color: #010619;
}

.next-prev .item .item-content::-webkit-scrollbar-thumb {
    background-color: #3724de;
}

.next-prev .table.fix-alignment thead th {
    padding-right: 100px;
    background: #010610;
}


/*********** PAINEL ***********/
#page.painel {
    padding-top: 10px;
}

#menu-painel {
    float: left;
    width: 250px;
}

/**/
#menu-painel ul {
    float: left;
    width: 100%;
    padding-right: 5px;
}

#menu-painel li {
    float: left;
    width: 100%;
    /*border-bottom:1px solid #1a1452;*/
    position: relative;
    margin-bottom: 1px;
}

#menu-painel li:after {
    position: absolute;
    content: '';
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    height: 1px;
    background: radial-gradient(#1a1452 5%, transparent 60%);
}

#menu-painel li a {
    float: left;
    width: 100%;
    line-height: 30px;
    padding-left: 30px;
    color: white;
    font-size: 15px;
    position: relative;
}

#menu-painel li a i {
    position: absolute;
    top: 7px;
    left: 5px;
}

#menu-painel li a:hover {
    background: linear-gradient(to right, #1a1452, transparent 70%);
}

#painel-content {
    float: left;
    width: calc(100% - 250px);
}

#painel-content .resumo-conta {
    color: white;
    float: left;
    width: 100%;
}

#painel-content .resumo-conta li {
    display: flex;
    width: 100%;
    margin: 0;
    margin-bottom: 15px;
    font-size: 13px;
    align-items: center;
}

#painel-content .resumo-conta li b {
    color: #e8cb3c;
    font-weight: normal;
    margin-right: 5px;
}

#painel-content .resumo-conta li .jewel {
    display: inline-flex;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    justify-content: center;
}

#painel-content .resumo-conta li .jewel img {
    object-fit: contain;
    object-position: center;
}

#painel-content .resumo-conta li .flag img {
    margin-left: 7px;
    width: 16px;
    max-height: 16px;
    margin-top: 7px;
}

#painel-content .resumo-conta.resumo-append {
    display: flex;
    background: #1a1452;
}

#painel-content .resumo-conta.resumo-append li {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    height: 70px;
}

#painel-content .resumo-conta.resumo-append li p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.presentes {
    color: #19aa0f;
    display: flex;
    width: 100%;
    margin: 40px 0 30px 0;
}

.presentes li {
    float: left;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    font-size: 15px;
    padding: 20px 0;
    border: 1px solid transparent;
}

.presentes li.destaque {
    background: #020d35;
    color: #e8cb3c;
    border-color: #3724de;
    border-radius: 4px;
    position: relative;

    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.presentes li.destaque span {
    color: #fff;
    font-size: 14px;
    position: absolute;
    line-height: 22px;
    position: absolute;
    left: -1px;
    top: -22px;
    background: #3724de;
    width: calc(100% + 2px);
    border: 1px solid #3724de;
    border-bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.presentes li i {
    display: inline-block;
    margin-right: 5px;
}

/****Pagina de tutoriais****/

.video-tutorial {
    float: left;
    width: 100%;
    padding: 20px;
    border: 1px solid #1a1452;
    display: none;
}

.video-tutorial .video {
    float: left;
    position: relative;
    width: 560px;
    height: 315px;
}

.video-tutorial .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-tutorial .descricao {
    float: left;
    width: calc(100% - 560px);
    padding: 0 0 0 10px;
}


.video-tutorial .descricao p {
    font-size: 17px !important;
}

.tutoriais-list {
    float: left;
    width: 100%;
}

.tutoriais-list li {
    display: flex;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #1a1452;
}

.tutoriais-list li:last-child {
    border-bottom: 0;
}

.tutoriais-list li .tutorial-left {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 150px);
}

.tutoriais-list li .tutorial-left h2 {
    display: flex;
    width: 100%;
    color: var(--yellow);
    font-size: 22px;
    font-weight: lighter;
    margin-bottom: 5px;
}

.tutoriais-list li .tutorial-left p {
    display: flex;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.tutoriais-list li .tutorial-right {
    display: flex;
    width: 150px;
    border-left: 1px solid #1a1452;
    border-right: 1px solid #1a1452;
    align-items: center;
    justify-content: center;
}

.tutoriais-list li .tutorial-right .btn {
    display: flex;
    align-self: center;
    justify-content: center;
    margin: 0 !important;
}

.forms.form-code label {
    text-align: center;
}

.forms.form-code .placeholder,
.forms.form-code .placeholder1,
.forms.form-code .placeholder2,
.forms.form-code .placeholder3,
.forms label .pidvalue {
    display: inline-block;
    width: 150px !important;
    border-radius: 0 !important;
    text-align: center;
    font-size: 20px !important;
    letter-spacing: 2px !important;
    border-bottom: 1px solid white !important;
    margin-bottom: 10px !important;
    background: none !important;
}

.forms.form-code .placeholder::-webkit-input-placeholder,
.forms.form-code .placeholder1::-webkit-input-placeholder,
.forms.form-code .placeholder2::-webkit-input-placeholder,
.forms.form-code .placeholder3::-webkit-input-placeholder,
.pidvalue::-webkit-input-placeholder {
    font-size: 40px !important;
    letter-spacing: 2px;
    color: white;
}

.digits-left {
    font-size: 13px;
}


/*Style da area de video principal dos tutoriais*/

#video-wrap {
    float: left;
    width: 100%;
    margin-top: 70px;
    border: 2px solid #3724de;
}


#video-wrap #video-dados {
    float: left;
    width: 100%;
    padding: 20px;
    background: #3724de;
}

#video-wrap #video-dados h2 {
    float: left;
    width: 100%;
    font-size: 20px;
    color: var(--yellow);
    font-weight: normal;
    border-bottom: 1px solid #010822;
    line-height: 50px;
    margin-bottom: 10px;
}

#video-wrap #video-dados p {
    color: white;
    font-size: 14px;
}


#video-wrap #video-dados h2 .views {
    float: right;
    font-size: 18px;
}

#video-area {
    float: left;
    width: 100%;
    background: #5142fb;
}

.mais-vistos {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mais-vistos li {
    display: flex;
    width: 32.5%;
    overflow: hidden;
    margin-bottom: 10px;
}

.mais-vistos li .list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mais-vistos li:last-child {
    margin-right: 0;
}

.mais-vistos li .thumbnail-wrap {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    cursor: pointer;
}

.mais-vistos li .thumbnail-wrap .thumbnail,
.mais-vistos li .thumbnail-wrap .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mais-vistos li .thumbnail-wrap .fa-play {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    transform: translateX(-50%) translateY(-50%);
    color: white;
    z-index: 9999;
    opacity: .5;
}

.mais-vistos li .thumbnail-wrap:hover .fa-play {
    opacity: 1;
}

.mais-vistos li .video-info {
    width: 100%;
    padding: 15px;
    background: #fff;
    flex: 1 0 auto;
}

.mais-vistos li .video-info h3 {
    float: left;
    width: 100%;
    font-size: 17px;
    font-weight: normal;
    margin-bottom: 10px;
    color: #000;
}

.mais-vistos li .video-info p {
    padding: 0 !important;
    color: #666 !important;
}

.staff {
    float: left;
    width: 100%;
}

.staff li {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    overflow: initial !important;
    cursor: pointer;
}


.staff li .icone {
    float: left;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px;
    position: relative;
}

.staff li .icone:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    white-space: nowrap;
    padding: 2px 5px;
    content: attr(data-label);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 80%, transparent);
    border: .5px solid white;
    color: white;
    font-weight: normal;
    font-size: 12px;
    z-index: 9999;
    border-radius: 2px;
    display: none;
}

.staff li .icone:hover:before {
    display: block;
}

.staff li .icone.young {
    background-image: url(../images/staff/young.png);
}

.staff li .icone.miss {
    background-image: url(../images/staff/miss.png);
}

.staff li .icone.powerful {
    background-image: url(../images/staff/powerful.png);
}

.staff li .icone.momer {
    background-image: url(../images/staff/momer.png);
}

.staff li .icone.stryke {
    background-image: url(../images/staff/stryke.png);
}

.staff li .membro {
    float: left;
    width: calc(100% - 40px);
    line-height: 40px;
    color: white !important;
    padding: 0 10px 0 20px;
    position: relative;
    font-size: 15px;
    font-weight: normal;
}

.staff li .membro:after {
    position: absolute;
    content: '';
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #91140C;
}

.staff li .membro.on:after {
    background: #19aa0f;
}

.destaque-conqueror {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-top: 30px;
    margin-bottom: 30px;
}

.destaque-conqueror ul {
    display: flex;
    width: 100%;
}

.destaque-conqueror ul li {
    width: 25%;
}

.destaque-conqueror ul li .rank-heading {
    display: flex;
    width: 100%;
    height: 62px;
    background: #01155C;
    flex-wrap: wrap;
    align-content: center;
    color: white;
}

.destaque-conqueror ul li:nth-child(1) .rank-heading {
    background: #010A29;
}

.destaque-conqueror ul li:nth-child(2) .rank-heading {
    background: #010F3D;
}

.destaque-conqueror ul li:nth-child(3) .rank-heading {
    background: #01124E;
}

.destaque-conqueror ul li .rank-heading .rank-category,
.destaque-conqueror ul li .rank-heading p {
    display: flex;
    justify-content: center;
    width: 100%;
}

.destaque-conqueror ul li .rank-heading .rank-category {
    font-size: 18px;
}

.destaque-conqueror ul li .rank-heading p {
    font-size: 13px;
}

.destaque-conqueror ul li .rank-player-image {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 0;
}

.destaque-conqueror ul li .rank-player-info {
    display: flex;
    width: 100%;
    color: white;
    flex-wrap: wrap;
}

.destaque-conqueror ul li .rank-player-info .player-guild,
.destaque-conqueror ul li .rank-player-info .player-name {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 15px;
}

.destaque-conqueror ul li .rank-player-info .player-guild {
    font-size: 13px;
    color: #E7CB3B;
}

.destaque-conqueror ul li.inactive {
    filter: grayscale(1);
}

/*** Footer ***/
#footer {
    float: left;
    width: 100%;
}

#footer #footer-content {
    float: left;
    width: 100%;
    padding: 20px 0;
    color: white;
}

#footer #footer-content p {
    font-size: 13px;
}

#footer #footer-content .footer-info {
    float: left;
    width: 75%;
}

#footer #footer-content .footer-info p {
    padding-right: 15px;
    line-height: 19px;
}


#footer #footer-content h2 {
    font-size: 20px;
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

#footer #footer-content h2 span {
    color: #3724de;
}

#footer #footer-content .footer-social {
    float: left;
    width: 25%;
}

#footer #footer-content .social-icons {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#footer #footer-content .footer-social a {
    color: white;
}

#footer #footer-content .footer-social a:hover {
    color: white;
}

#footer #footer-content .footer-social i {
    display: flex;
    text-align: center;
    font-size: 20px;
    width: 35px;
    height: 35px;
    background: #2a238c;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

#footer #footer-content .footer-social i:hover {

    background: #5050ff;
}

.outcome::after {
    content: "-";
}

.income::after {
    content: "+";
}

/*Sorteio regulamento*/
.box-info .box-header .download-regulamento {
    color: #333;
    position: relative;
    padding-left: 30px;
}

.box-info .box-header .download-regulamento i {
    position: absolute;
    top: 4px;
    left: 6px;
    background: none;
    color: #333;
}


.sorteio-regulamento {
    float: left;
    width: 100%;
    background: #525659;
    height: 500px;
    overflow-y: scroll;
    padding: 40px 0;
}

.sorteio-regulamento .regulamento-page {
    display: block;
    margin: 0 auto;
    width: 800px;
    height: 1150px;
    background: white;
    padding: 60px 100px;
    margin-bottom: 20px;
}

.sorteio-regulamento .regulamento-page .main-title-small {
    font-size: 12px;
    font-weight: normal;
    line-height: 10px;
}

.sorteio-regulamento .regulamento-page .main-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 50px;
}


.sorteio-regulamento .regulamento-page p {
    display: block;
    width: 100%;
    color: #333 !important;
    font-size: 13px !important;
    margin-bottom: 15px !important;
}

.sorteio-regulamento .regulamento-page h3 {
    float: left;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    margin-bottom: 20px;
}

.sorteio-regulamento .regulamento-page ul li {
    width: 100%;
    padding-left: 20px;
}

.premiacoes td span {
    color: #e8cb3c;
}

.premiacoes .items tr:nth-child(3) {
    font-size: 15px;
}

.premiacoes .items tr:nth-child(4) {
    font-size: 20px;
}

.forms label.button-right {
    display: flex;
    padding: 0;
}

.forms label.button-right input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.forms label.button-right button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.texto-divulgacao-wrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
}

.texto-divulgacao-wrap button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: .5;
    display: none;
}

.texto-divulgacao-wrap button:hover {
    opacity: 1;
}

.texto-divulgacao-wrap:hover button {
    display: block;
}

.texto-divulgacao {
    width: 100%;
    background: #1a1452;
    border-radius: 5px;
    color: white;
    resize: none;
    min-height: 120px;
    padding: 10px;
    outline: none;
}

.live-status {
    display: inline-block;
    padding: 5px 8px;
    background: #ccc;
    color: #333 !important;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 14px !important;
    border-radius: 4px;
    margin-right: 8px;
}

.live-status.on {
    background: red;
    color: #fff !important;
}

.table.accounts td .fa-user {
    color: #ebebeb;
}

.table.accounts td .fa-user.active {
    color: #19aa0f;
}


/*Mudanças 06/12/2020*/

/*Style pertinente ao modal player*/

.modal-char-info {
    position: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    top: 50%;
    left: 50%;
    width: 680px;
    height: 400px;
    background: #222222;
    border-radius: 8px;
    z-index: 9999;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    color: white;
    box-shadow: #000 0 1px 10px;
    display: none;
}

.modal-char-info .close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: rotate(45deg);
    cursor: pointer;
}

.modal-char-info.char-dk {
    background: url(../images/profile/bg-dk.jpg) top left no-repeat;
}

.modal-char-info.char-mg {
    background: url(../images/profile/bg-mg.jpg) top left no-repeat;
}

.modal-char-info.char-dl {
    background: url(../images/profile/bg-dl.jpg) top left no-repeat;
}

.modal-char-info.char-elf {
    background: url(../images/profile/bg-elf.jpg) top left no-repeat;
}

.modal-char-info.char-sum {
    background: url(../images/profile/bg-sum.jpg) top left no-repeat;
}

.modal-char-info.char-rf {
    background: url(../images/profile/bg-rf.jpg) top left no-repeat;
}

.modal-char-info.char-dw {
    background: url(../images/profile/bg-dw.jpg) top left no-repeat;
}

.modal-char-info.char-gl {
    background: url(../images/profile/bg-gl2.jpg) top left no-repeat;
}

.modal-char-info.char-rw {
    background: url(../images/profile/bg-rw.jpg) top left no-repeat;
}

.modal-char-info.char-sl {
    background: url(../images/profile/bg-sl.jpg) top left no-repeat;
}

.modal-char-info.char-gc {
    background: url(../images/profile/bg-gc.jpg) top left no-repeat;
}

.modal-char-info .char-info-wrap {
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
    padding: 30px;
}

.modal-char-info .char-info-wrap h3 {
    font-size: 23px;
    width: 100%;
}

.modal-char-info .char-info-wrap h3 strong {
    font-weight: normal;
    position: relative;
}

.modal-char-info .char-info-wrap h3 strong:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;

}

.modal-char-info .char-info-wrap h3.vanert strong:before {
    background: url(../images/gens_vanert.png);
    background-size: cover;
}

.modal-char-info .char-info-wrap h3.duprian strong:before {
    background: url(../images/gens_duprian.png);
    background-size: cover;
}

.modal-char-info .char-info-wrap h3 .pais {
    position: absolute;
    top: 50%;
    right: -35px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
}

.modal-char-info .char-info-wrap h3 .pais img {
    width: 30px;
}

.modal-char-info .char-info-wrap .classe {
    width: 100%;
    font-size: 14px;
    font-weight: lighter;
}


.char-info-wrap .char-info-geral {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 15px;
}

.char-info-wrap .char-info-geral .line {
    display: flex;
    width: 100%;
    font-size: 14px;
}

.char-info-wrap .char-info-geral .line .col {
    width: 50%;
    padding: 5px;
}

.char-info-wrap .char-info-geral .line .col.info {
    text-align: right;
}

.char-info-wrap .char-info-geral .line .col.val {
    padding-left: 10px;
    text-align: left;
}


.char-info-wrap .char-info-geral .line.guild {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 25px;
}

.char-info-wrap .char-info-geral .line.guild .guild-image {
    display: flex;
    width: 50px;
    padding: 5px;
    background: rgba(0, 0, 0, .5);
    border-radius: 3px;
    margin-right: 10px;
}

.char-info-wrap .char-info-geral .line.guild .guild-image img {
    width: 100%;
}

.char-info-wrap .char-info-geral .line.guild .ally-line {
    color: #E7CB3B;
    margin-bottom: 4px;
}

.char-info-wrap .char-info-geral .line.guild p {
    width: 100%;
}



/*Style pertinente ao modal guild*/

.modal-guild {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 680px;
    height: 400px;
    transform: translateY(-50%) translateX(-50%);
    z-index: 999;
    background: #000 url(../images/bg-siege.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    border-radius: 8px;


    color: white;
    box-shadow: #000 0 1px 10px;

    display: none;
    justify-content: flex-start;
    align-items: flex-start !important;
    padding: 60px 60px 60px 0;
    flex-wrap: wrap;
}

.modal-guild .close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: rotate(45deg);
    cursor: pointer;
}

.modal-guild .guild-content {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start !important;
}

.modal-guild .guild-content .guild-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start !important;
    width: 50%;
    padding: 20px;
}

.modal-guild .guild-content .guild-col.players {
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
}

.guild-col.players h3 {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    text-align: center;
}


.guild-col.players ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start !important;

    height: 250px;
    overflow-y: scroll;
}

.guild-col.players ul li {
    padding: 3px;
    width: 100%;
    cursor: pointer;
}

.guild-col.players ul li:hover {
    color: #e8cb3c;
}

.guild-col.players ul::-webkit-scrollbar {
    width: 10px;
}

.guild-col.players ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #000;
    -webkit-border-radius: 10px;
    background: #000;
    border-radius: 10px;
}

.guild-col.players ul::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #333;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    padding: 5px;
}

.modal-guild .guild-content .guild-col.info {
    padding: 0;
}

.guild-col.info .guild-image-wrap {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    justify-content: center;
}

.guild-col.info .guild-image {
    display: flex;
    width: 150px;
    height: 100%;
    padding: 8px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
}

.guild-col.info .guild-image img {
    width: 100%;
}

.guild-col.info ul {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
}

.guild-col.info ul li {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}

.guild-col.info ul li:first-child {
    width: 100%;
}

.guild-col.info ul li span {
    width: 100%;
    text-align: center;
}

.guild-col.info span.guild-data {
    color: #e8cb3c;
    margin-bottom: 5px;
}

span.show-detalhes-player,
span.show-detalhes-guild {
    cursor: pointer;
}

a.link-white {
    color: white;
}

a.link-white:hover {
    color: #e8cb3c;
}

a.link-golden {
    color: #e8cb3c;
}

a.link-golden:hover {
    color: white;
}

.modal-alerts.sucesso {
    width: 300px;
}

.modal-alerts.sucesso i {
    color: #0dbf6c;
}

.modal-alerts.sucesso .close-alert {
    background: #0dbf6c;
}

.modal-alerts.sucesso .close-alert:hover {
    background: #0dbf6c;
}

.modal-alerts.confirmar {
    width: 320px;
}

.modal-alerts.confirmar .modal-line i {
    color: #3c75d8;
}

.modal-alerts .close-alert.btn-yes {
    background: #3724de;
    margin-right: 5px;
}

.modal-alerts .close-alert.btn-yes:hover {
    background: #3c75d8;
}

.modal-alerts .close-alert.btn-no {
    background: #333;
}

.modal-alerts .close-alert.btn-no:hover {
    background: #222;
}

/*styles referente a tela de meus itens*/
tbody.itens-list tr {
    display: none !important;
}

tbody.itens-list tr.active {
    display: table-row !important;
}

.tag {
    display: inline-flex;
    background: #3724de;
    margin-left: 5px;
    color: white;
    padding: 1px 3px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 11px;
    border-radius: 2px;
}

.tag.green {
    background: #00a651;
}

.tag.red {
    background: red;
}

.tag.telegram {
    background: #119af5;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.tag.telegram span {
    vertical-align: middle;
    padding-right: 4px;
}

.tag.eventtime {
    display: inline-grid;
    background: #00a651;
    margin: 5px;
    width: 30%;
}

.kitup-itens {
    height: 70px;
}

.kitup-subtotal {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.kitup-subtotal span {
    color: olive;
}

.kitup-modal .etapas {
    float: left;
    width: 100%;
    color: white;
    padding: 20px 10px;
    counter-reset: step;
}

.kitup-modal .etapas li {
    float: left;
    width: 33.33%;
    text-align: center;
    position: relative;
    font-size: 13px;
    cursor: pointer;
}

.kitup-modal .etapas li:before {
    display: block;
    content: counter(step);
    counter-increment: step;
    color: white;
    width: 30px;
    line-height: 30px;
    background: #5142fb;
    margin: 0 auto 10px auto;
    border-radius: 50%;
}

.kitup-modal .etapas li:after {
    position: absolute;
    content: '';
    top: 15px;
    left: -50%;
    z-index: -1;
    width: 100%;
    height: 2px;
    background: #5142fb;
}

.kitup-modal .etapas li:first-child:after {
    content: none;
}

.kitup-modal .etapas li.active:before {
    background: #e8cb3c;
    color: #222;
}

.kitup-modal .etapas li.active:after {
    background: #e8cb3c;
}

/* Bank */
.bank table {
    width: 1500px;
}

/* Sort Table */
.sort-table thead th:not(.unsortable) {
    cursor: pointer;
}

.sort-table thead th:not(.unsortable)::after {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    color: #3724de;
    float: right;
    padding-top: 4px;
    padding-right: 6px;
}

.sort-table thead th.asc::after {
    content: "\f0de";
    font-family: "Font Awesome 5 Free";
    color: #e8cb3c;
}

.sort-table thead th.desc::after {
    content: "\f0dd";
    font-family: "Font Awesome 5 Free";
    color: #e8cb3c;
}

.pix-copiaecola-wrap {
    display: flex;
    width: 100%;
    position: relative;
}

.pix-copiaecola-wrap button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: .5;
    display: none;
}

.pix-copiaecola-wrap button:hover {
    opacity: 1;
}

.pix-copiaecola-wrap:hover button {
    display: block;
}

.pix-copiaecola {
    width: 100%;
    background: #1a1452;
    color: white;
    resize: none;
    min-height: 50px;
    padding: 10px;
    outline: none;
}

.category-filters {
    padding: 5px 0;
    position: relative;
}

.category-filters-button {
    display: inline-flex;
    width: 100%;
    background-color: #1b135e;
    color: white;
    padding: 10px 8px;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
}

.category-filters-button i {
    display: none;
}

.category-filters-button .fa-chevron-down {
    display: block;
}

.category-filters-button.active {
    background-color: #2a238c;
}

.category-filters-button.active .fa-chevron-down {
    display: none
}

.category-filters-button.active .fa-chevron-up {
    display: block
}

.category-filters-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 5px;
    background: white;
    max-height: 300px;
    overflow-y: auto;
}

.category-filters-list li {
    padding: 5px 0;
    font-size: 15px;
}

.category-filters-list li input {
    display: inline-flex;
    margin-right: 10px;
}

.category-filters-list.active {
    display: block;
}

.pix-countdown {
    border-top: 1px solid #021249;
    margin-top: 20px;
    padding-top: 10px;
    text-align: center;
}

/* Animação Dia dos Namorados */
.heart {
    position: absolute;
    bottom: -50px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: float linear infinite;
    opacity: 0.7;
}

.heart:nth-child(1) {
    width: 30px;
    height: 30px;
    left: 10%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 25s;
    animation-delay: 0s;
}

.heart:nth-child(2) {
    width: 30px;
    height: 30px;
    left: 20%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 20s;
    animation-delay: 0s;
}

.heart:nth-child(3) {
    width: 20px;
    height: 20px;
    left: 30%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 30s;
    animation-delay: 2s;
}

.heart:nth-child(4) {
    width: 20px;
    height: 20px;
    left: 40%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 35s;
    animation-delay: 2s;
}

.heart:nth-child(5) {
    width: 25px;
    height: 25px;
    left: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 28s;
    animation-delay: 4s;
}

.heart:nth-child(6) {
    width: 25px;
    height: 25px;
    left: 60%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 33s;
    animation-delay: 4s;
}

.heart:nth-child(7) {
    width: 15px;
    height: 15px;
    left: 70%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 35s;
    animation-delay: 1s;
}

.heart:nth-child(8) {
    width: 15px;
    height: 15px;
    left: 80%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 40s;
    animation-delay: 1s;
}

.heart:nth-child(9) {
    width: 40px;
    height: 40px;
    left: 90%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 22s;
    animation-delay: 3s;
}

.heart:nth-child(10) {
    width: 18px;
    height: 18px;
    left: 95%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 28s;
    animation-delay: 5s;
}

.heart:nth-child(11) {
    width: 30px;
    height: 30px;
    left: 10%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 40s;
    animation-delay: 0s;
}

.heart:nth-child(12) {
    width: 30px;
    height: 30px;
    left: 20%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 35s;
    animation-delay: 0s;
}

.heart:nth-child(13) {
    width: 20px;
    height: 20px;
    left: 30%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 45s;
    animation-delay: 2s;
}

.heart:nth-child(14) {
    width: 20px;
    height: 20px;
    left: 40%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 50s;
    animation-delay: 2s;
}

.heart:nth-child(15) {
    width: 25px;
    height: 25px;
    left: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 43s;
    animation-delay: 4s;
}

.heart:nth-child(16) {
    width: 25px;
    height: 25px;
    left: 60%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 48s;
    animation-delay: 4s;
}

.heart:nth-child(17) {
    width: 15px;
    height: 15px;
    left: 70%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 50s;
    animation-delay: 1s;
}

.heart:nth-child(18) {
    width: 15px;
    height: 15px;
    left: 80%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 55s;
    animation-delay: 1s;
}

.heart:nth-child(19) {
    width: 40px;
    height: 40px;
    left: 90%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 38s;
    animation-delay: 3s;
}

.heart:nth-child(20) {
    width: 18px;
    height: 18px;
    left: 95%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    animation-duration: 43s;
    animation-delay: 5s;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-1000vh) rotate(360deg);
        opacity: 0;
    }
}

#banner-sorteio {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    animation: pulse-soft 3s infinite;
}

.btn-sorteio {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 15px;
    color: white;
    text-decoration: none;
    margin-left: 10px;
    transition: all 0.3s;
}

.btn-sorteio:hover {
    background: rgba(255,255,255,0.3);
}

.top-banner {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 12px 20px;
    z-index: 9998;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.top-banner .banner-text {
    color: #00d4ff;
    font-size: 14px;
    font-weight: 500;
}

.top-banner .banner-highlight {
    color: #ffd700;
    font-weight: bold;
}

.top-banner .banner-buttons {
    display: flex;
    gap: 10px;
}

.top-banner .btn-pass {
    padding: 8px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.top-banner .btn-lite {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: white;
}

.top-banner .btn-premium {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    color: #1a1a2e;
}

.top-banner .btn-pass:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.banner-parcelamento {
    background: linear-gradient(135deg, #00a650 0%, #00d563 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 166, 80, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.banner-parcelamento h3 {
    margin: 0 0 8px 0;
    font-size: 1.4em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.banner-parcelamento p {
    margin: 0;
    font-size: 1em;
    opacity: 0.95;
}

.banner-parcelamento .destaque {
    font-size: 1.8em;
    font-weight: bold;
    color: #ffeb3b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin: 5px 0;
}

.banner-parcelamento.compacto {
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 5px;
}

.banner-parcelamento.compacto h3 {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.banner-parcelamento.compacto .destaque {
    font-size: 1.3em;
}

/* Estilo para select customizado */
.select-ranking-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-ranking-premiado {
    appearance: none;
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 10px 40px 10px 35px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 200px;
}

.select-ranking-premiado:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

.select-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.option-premiado {
    font-weight: bold;
}

.destaque-premiado {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    to { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6); }
}

/* Painel de Informações da Temporada */
.temporada-info {
    background: linear-gradient(135deg, #16103d 0%, #252052 100%);
    color: white;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.temporada-info:hover {
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.temporada-info::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shine-temporada 4s infinite;
}

.temporada-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.temporada-header h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.temporada-header h2::before {
    content: "🏆";
    font-size: 1.2em;
}

.toggle-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    color: white;
    backdrop-filter: blur(10px);
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.toggle-btn.expanded {
    background: rgba(255, 107, 107, 0.8);
    border-color: rgba(255, 107, 107, 1);
}

.toggle-btn.expanded:hover {
    background: rgba(255, 107, 107, 1);
}

.temporada-content {
    padding: 0 20px 20px 20px;
    display: none;
    position: relative;
    z-index: 2;
}

.aviso-premiacao {
    background: rgba(255, 193, 7, 0.2);
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    animation: pulse-aviso 3s infinite;
}

@keyframes pulse-aviso {
    0% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
    100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
}

.premiacoes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.premiacao-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 15px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s;
}

.premiacao-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
}

.posicao {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.premio {
    font-size: 0.95em;
    opacity: 0.9;
}

.ranking-box-info {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ranking-box-info h4 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #ffd700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drops-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.drops-table th,
.drops-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.drops-table th {
    background: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    color: #ffd700;
}

.drops-table td {
    font-size: 0.9em;
}

.item-raro {
    color: #ff6b6b;
    font-weight: bold;
}

.item-comum {
    color: #4ecdc4;
}

.item-especial {
    color: #ffd700;
    font-weight: bold;
}

@keyframes shine-temporada {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@media (max-width: 768px) {
    .temporada-header {
        padding: 15px;
    }

    .temporada-header h2 {
        font-size: 1.3em;
    }

    .temporada-content {
        padding: 0 15px 15px 15px;
    }

    .toggle-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .premiacoes-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .aviso-premiacao {
        font-size: 1em;
        padding: 12px;
    }
}

/* Semana da Independência */

.independence-banner {
    position: relative;
    width: 100%;
    height: 80px;
    background: linear-gradient(135deg, #1a4b3a 0%, #2d5016 25%, #4a6741 50%, #2d5016 75%, #1a4b3a 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid #ffd700;
}

.independence-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(0, 128, 0, 0.1) 0%, transparent 50%),
        linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.05) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.independence-banner-content {
    display: flex;
    align-items: center;
    gap: 25px;
    z-index: 2;
}

.independence-main-title {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 1px;
    animation: glow2 2s ease-in-out infinite alternate;
}

@keyframes glow2 {
    from { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.5); }
    to { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.8); }
}

.independence-event-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.independence-event-title {
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.independence-wcoin-bonus {
    font-family: 'Orbitron', monospace;
    font-size: 15px;
    font-weight: 900;
    color: #ff6b35;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    animation: pulse2 1.5s ease-in-out infinite;
}

@keyframes pulse2 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.independence-banner-buttons {
    display: flex;
    gap: 12px;
    z-index: 2;
}

.independence-banner-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.independence-btn-ranking {
    background: linear-gradient(45deg, #4a90e2, #357abd);
    color: white;
    border: 2px solid #357abd;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.independence-btn-ranking:hover {
    background: linear-gradient(45deg, #357abd, #2968a3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
}

.independence-btn-wcoin {
    background: linear-gradient(45deg, #ffd700, #ffb347);
    color: #2d5016;
    border: 2px solid #ffd700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    animation: goldPulse 2s ease-in-out infinite;
}

@keyframes goldPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6); }
}

.independence-btn-wcoin:hover {
    background: linear-gradient(45deg, #ffb347, #ff8c00);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.7);
}

.independence-banner-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.independence-banner-btn:hover::before {
    left: 100%;
}

/* Responsividade */
@media (max-width: 768px) {
    .independence-banner {
        height: auto;
        min-height: 70px;
        padding: 12px 20px;
        flex-direction: column;
        gap: 10px;
    }

    .independence-banner-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .independence-main-title {
        font-size: 18px;
    }

    .independence-event-info {
        gap: 15px;
    }

    .independence-event-title {
        font-size: 14px;
    }

    .independence-wcoin-bonus {
        font-size: 13px;
    }

    .independence-banner-buttons {
        gap: 8px;
    }

    .independence-banner-btn {
        padding: 8px 16px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .independence-banner {
        padding: 10px 15px;
    }

    .independence-main-title {
        font-size: 16px;
    }

    .independence-event-info {
        flex-direction: column;
        gap: 5px;
    }

    .independence-event-title {
        font-size: 13px;
    }

    .independence-wcoin-bonus {
        font-size: 12px;
    }

    .independence-banner-buttons {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }

    .independence-banner-btn {
        width: 100%;
        padding: 8px 12px;
        font-size: 10px;
    }
}

/* MS */

.mysterious-stone-section {
    position: relative;
}

.stone-promo-badge {
    background: linear-gradient(45deg, #ff4757, #ff3838);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0 auto 10px auto;
    width: 95%;
    text-align: center;
    display: block;
    animation: stonePulse 2s infinite;
}

@keyframes stonePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.stone-selector {
    background: linear-gradient(135deg, #0f0a2e 0%, #1a1452 100%);
    color: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 10px;
    border: 1px solid #2a238c;
}

.quantity-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.qty-label {
    font-weight: bold;
    color: #ffd93d;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-controls input {
    color: white !important;
}

.qty-btn {
    background: linear-gradient(45deg, #2a238c 0%, #1a1452 100%);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(26, 20, 82, 0.4);
}

.qty-btn:hover {
    background: linear-gradient(45deg, #3724de 0%, #2a238c 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(55, 36, 222, 0.5);
}

#stone-qty {
    width: 70px;
    height: 35px;
    text-align: center;
    font-size: 1.1rem;
    border: 2px solid #ffd93d;
    border-radius: 8px;
    background: rgba(26, 20, 82, 0.3);
    color: white;
}

.price-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 25px;
}

.tier {
    padding: 12px 15px;
    border-radius: 10px;
    background: rgba(15, 10, 46, 0.6);
    border: 1px solid rgba(42, 35, 140, 0.4);
    text-align: center;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.tier.active {
    background: linear-gradient(45deg, #ffd93d, #ffb347);
    color: #0f0a2e;
    font-weight: bold;
    transform: scale(1.02);
    border: 2px solid #ffd93d;
}

.tier-discount {
    color: #2ecc71;
    font-weight: bold;
}

.order-summary {
    background: rgba(15, 10, 46, 0.8);
    border: 1px solid rgba(42, 35, 140, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(42, 35, 140, 0.3);
}

.summary-row:last-child {
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.original-price {
    color: #999;
    text-decoration: line-through;
    opacity: 0.8;
}

.savings {
    color: #2ecc71;
    font-weight: bold;
}

.stone-buy-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    background: linear-gradient(45deg, #2a238c 0%, #3724de 100%);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(42, 35, 140, 0.4);
}

.stone-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(55, 36, 222, 0.6);
    background: linear-gradient(45deg, #3724de 0%, #5050ff 100%);
}

@media (max-width: 768px) {
    .quantity-section {
        flex-direction: column;
        gap: 10px;
    }

    .price-tiers {
        grid-template-columns: 1fr;
    }
}

/* Banner Esquenta */

.esquenta-top-banner {
    font-family: 'Arial', sans-serif !important;
    background: linear-gradient(135deg, #2a238c 0%, #1a1452 50%, #0f0a2e 100%);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid #3724de;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.esquenta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.esquenta-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 50px;
}

.esquenta-banner-text {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

.esquenta-banner-title {
    font-family: 'Arial', sans-serif !important;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.esquenta-banner-offer {
    font-family: 'Arial', sans-serif !important;
    font-size: 1.1rem;
    color: #5050ff;
    font-weight: 600;
    background: rgba(80, 80, 255, 0.1);
    padding: 4px 12px;
    border-radius: 15px;
    border: 1px solid rgba(80, 80, 255, 0.3);
}

.esquenta-banner-subtitle {
    font-family: 'Arial', sans-serif !important;
    font-size: 0.95rem;
    color: #c0c4ff;
    font-weight: 500;
}

.esquenta-banner-buttons {
    display: flex;
    gap: 12px;
}

.esquenta-btn {
    font-family: 'Arial', sans-serif !important;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.esquenta-btn-primary {
    background: linear-gradient(45deg, #3724de 0%, #5050ff 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(55, 36, 222, 0.4);
}

.esquenta-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(55, 36, 222, 0.6);
    background: linear-gradient(45deg, #5050ff 0%, #3724de 100%);
}

.esquenta-btn-secondary {
    background: rgba(192, 196, 255, 0.1);
    color: #c0c4ff;
    border: 1px solid rgba(192, 196, 255, 0.3);
}

.esquenta-btn-secondary:hover {
    background: rgba(192, 196, 255, 0.2);
    border-color: rgba(192, 196, 255, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .esquenta-banner-content {
        flex-direction: column;
        gap: 12px;
        min-height: auto;
        padding: 8px 0;
    }

    .esquenta-banner-text {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .esquenta-banner-title {
        font-size: 1.2rem;
    }

    .esquenta-banner-offer {
        font-size: 1rem;
    }

    .esquenta-banner-subtitle {
        font-size: 0.85rem;
    }

    .esquenta-banner-buttons {
        justify-content: center;
    }

    .esquenta-btn {
        font-size: 0.85rem;
        padding: 6px 14px;
    }
}

@media (max-width: 480px) {
    .esquenta-banner-text {
        gap: 6px;
    }
    
    .esquenta-banner-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .esquenta-btn {
        width: 100%;
        max-width: 200px;
    }
}