:root {
    --cascade-main-color: #fff;
    --cascade-second-color: #F2B011;
    --cascade-gradient: linear-gradient(90deg, #3937FC 0%, #F1B204 100%);
}

.highlighted {
    font-weight: 900;
}

span.first-item-text {
    background-image: url(/static/event/2022/halloween/img/MainView/ic_qty_minigame_1.png);
    height: 2em;
    background-size: 100% 100%;
    display: inline-block;
    background-repeat: no-repeat;
    width: 2em;
    vertical-align: middle;
}

span.second-item-text {
    background-image: url(/static/event/2022/halloween/img/MainView/ic_qty_minigame_2.png);
    height: 2em;
    background-size: 100% 100%;
    display: inline-block;
    background-repeat: no-repeat;
    width: 2em;
    vertical-align: middle;
}

span.third-item-text {
    background-image: url(/static/event/2022/halloween/img/MainView/ic_qty_minigame_3.png);
    height: 2em;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    width: 2em;
    vertical-align: middle;
}

#pet-bank-glow, #bank-lock-icon, .reward-preview, #menu-bottom-decoration {
    pointer-events: none;
    user-select: none;
}

#inner-grid #home-event::before {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    border-radius: 30px;
}

#inner-grid #home-event h3, #inner-grid #home-event p#event-label {
    position: relative;
}


.cascade-event-popup .flavr-overlay {
    overflow: hidden;
}

.cascade-event-popup.flavr-container .flavr-fixer {
    margin: 250px auto 60px;
}

.cascade-event-popup .flavr-fixer .flavr-outer .flavr-content .flavr-message {
    padding: 0 !important;
    overflow: visible;
    text-align: left !important;
}

/* Bouton close */
.cascade-event-popup .flavr-button.close {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_close.png) !important;
    width: 114px !important;
    height: 109px !important;
    background-color: transparent !important;
    border: none !important;
    font-size: 15px !important;
    top: -10px !important;
    right: 30px !important;
    border-radius: 0 !important;
    transition: none !important;
    animation: none !important;
}

.cascade-event-popup .flavr-button.close:hover {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_close_hover.png) !important;
}

.cascade-event-popup .flavr-button.close:before {
    content: none !important;
}

/* Titres */
.cascade-event-popup .flavr-fixer .flavr-outer h3 {
    color: var(--cascade-main-color);
    text-align: left;
    font: normal normal 900 20px/28px Alegreya Sans;
    text-transform: uppercase;
}

/* Texte */
.cascade-event-popup .flavr-fixer .flavr-outer p.popup-text {
    margin: 10px 0 !important;
    color: var(--cascade-main-color);
    text-align: left;
    font: normal normal bold 16px/20px Alegreya Sans;
}

.cascade-event-popup .flavr-fixer .flavr-outer p.popup-text.center {
    text-align: center;
}

/* Background type 1  */
.cascade-event-popup.bg1 .flavr-fixer .flavr-outer {
    background-color: transparent;
    border: none;
    background-image: url(/static/event/2022/halloween/img/Popup/bg_0.png);
    width: 798px;
    height: 570px;
}

.cascade-event-popup.bg1 .close {
    right: 56px !important;
    top: 32px !important;
}

/* Background type 2  */
.cascade-event-popup.bg2 .flavr-fixer .flavr-outer {
    background-color: transparent;
    border: none;
    background-image: url(/static/event/2022/halloween/img/Popup/bg_2.png);
    width: 700px;
    height: 452px;
    padding: 126px 223px 50px 232px;
}

.cascade-event-popup.bg2 .close {
    right: 75px !important;
    top: 22px !important;
}

/* Container des boutons */
.cascade-event-popup .flavr-fixer .flavr-outer .button-container {
    display: flex;
    justify-content: space-evenly;
}

.cascade-event-popup .flavr-fixer .flavr-outer .button-container.vertical {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* Glows */
.cascade-event-popup .flavr-message > *:not(.glow) {
    position: relative;
    z-index: 1;
}

.cascade-event-popup .flavr-message .glow {
    mix-blend-mode: overlay;
}

/* Jauges */
.cascade-event-popup .gauge-decoration-container {
    position: relative;
    pointer-events: none;
    display: flex;
    justify-content: center;
}

.cascade-event-popup .gauge-decoration-container .cascade-gauge {
    box-shadow: 0 0 3px #FFFFFF;
    border-radius: 15px;
    max-width: 310px;
    height: 26px;
    position: absolute;
    left: 17px;
    top: 39px;
    transition: width ease-in-out 300ms;
}

/* Jauge serveur */
.cascade-event-popup .server-reward-gauge-decoration-container {
    position: relative;
    width: 286px;
}

.cascade-event-popup .server-reward-percentage {
    text-align: center;
    font: normal normal bold 15px/15px Alegreya Sans;
    color: #051831;
    text-transform: uppercase;
    position: absolute;
    top: 30px;
    right: -40px;
}

.cascade-event-popup .server-reward-gauge-decoration-container .server-reward-gauge-decoration {
    position: absolute;
    left: -5px;
    z-index: 0;
}

.cascade-event-popup .server-reward-gauge-container {
    background: url(/static/event/2022/halloween/img/Popup/Gauge/ServerReward/bg_gauge.png);
    width: 286px;
    height: 72px;
    position: relative;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    z-index: 100;
}

.cascade-event-popup .server-reward-gauge-container::before {
    content: '';
    background: url(/static/event/2022/halloween/img/Popup/Gauge/ServerReward/deco_gauge_origin.png);
    width: 82px;
    height: 48px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.cascade-event-popup .server-reward-gauge {
    position: absolute;
    transition: width ease-in-out 300ms;
    background: transparent var(--cascade-gradient) 0% 0% no-repeat padding-box;
    box-shadow: 0 0 6px #FFFFFF;
    left: 48px;
    height: 19px;
    top: 29px;
}

/* Jauge de progression minijeu */
.cascade-event-popup .gauge-container {
    background-image: url(/static/event/2022/halloween/img/Common/Gauge/MainView/bg_gauge.png);
    background-size: cover;
    width: 338px;
    height: 97px;
}

.cascade-event-popup .cascade-gauge {
    box-shadow: 0 0 3px #ffffff;
    border-radius: 11px;
    max-width: 341px;
    height: 23px;
    position: absolute;
    left: 18px;
    top: 40px;
}

.cascade-event-popup .gauge-container::before {
    content: '';
    width: 76px;
    height: 68px;
    position: absolute;
    left: -37px;
    z-index: 2;
    top: 17px;
}

.cascade-event-popup .gauge-container.gauge1 .cascade-gauge {
    background: transparent linear-gradient(270deg, #A2BBFF 0%, #357CCE 100%) 0 0 no-repeat padding-box;
}

.cascade-event-popup .gauge-container.gauge1::before {
    background-image: url(/static/event/2022/halloween/img/Common/Gauge/MainView/deco_gauge_1_origin.png);
}

.cascade-event-popup .gauge-container.gauge2 .cascade-gauge {
    background: transparent linear-gradient(270deg, #DAA2FF 0%, #BE53D8 100%) 0 0 no-repeat padding-box;
}

.cascade-event-popup .gauge-container.gauge2::before {
    background-image: url(/static/event/2022/halloween/img/Common/Gauge/MainView/deco_gauge_2_origin.png);
}

.cascade-event-popup .gauge-container.gauge3 .cascade-gauge {
    background: transparent linear-gradient(270deg, #A2FFBE 0%, #53D89A 100%) 0 0 no-repeat padding-box;
}

.cascade-event-popup .gauge-container.gauge3::before {
    background-image: url(/static/event/2022/halloween/img/Common/Gauge/MainView/deco_gauge_3_origin.png);
}

.cascade-event-popup .gauge-container .inner-stars {
    z-index: 1;
    position: relative;
    top: 0;
    left: 2px;
}

/* Illustration */
.reward-illustration-popup .flavr-fixer .flavr-outer {
    border: none !important;
    overflow: hidden;
    min-width: initial;
}

.reward-illustration-popup .flavr-fixer .flavr-outer .flavr-content .flavr-message {
    padding: 0;
    line-height: initial;
}

.reward-illustration-popup .flavr-fixer .flavr-outer .flavr-content .flavr-message img {
    max-height: calc(100vh - 220px);
    max-width: 80vw;
    display: block;
}

.reward-illustration-popup .flavr-fixer .flavr-outer .flavr-toolbar {
    padding: 0;
}

.reward-illustration-popup .flavr-button.close {
    background: url(/static/event/2022/halloween/img/Common/Buttons/btn_close.png) !important;
    width: 114px !important;
    height: 109px !important;
    box-shadow: none !important;
    border: none !important;
    transition: background-image ease-in-out 200ms !important;
    animation: none !important;
    top: -40px !important;
    right: -60px !important;
}

.reward-illustration-popup .flavr-button.close:hover {
    background: url(/static/event/2022/halloween/img/Common/Buttons/btn_close_hover.png) !important;
}

.reward-illustration-popup .flavr-button.close::before {
    display: none;
}

.cascade-event-popup.flavr-container.intro-popup .flavr-fixer .flavr-outer {
    padding: 120px 96px 0 288px;
}

.cascade-event-popup.flavr-container.intro-popup #intro-pnj {
    position: absolute;
    left: -27px;
    top: -7px;
    pointer-events: none;
}

.cascade-event-popup.flavr-container.intro-popup .flavr-fixer .flavr-outer h3 {
    margin-bottom: 32px;
}

.cascade-event-popup.flavr-container.intro-popup .flavr-fixer .flavr-outer a.cascade-event-button.btn1 {
    margin-top: 38px;
    margin-left: 22px;
}

.cascade-event-button {
    transition: background ease-in-out 300ms;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    background-repeat: no-repeat;
}

.cascade-event-button.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.cascade-event-button.btn1 {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_1.png);
    width: 170px;
    height: 60px;
    text-align: center;
    font: normal normal bold 16px/55px Alegreya Sans SC;
    color: #FFFFFF;
    text-shadow: 0 0 5px #00000099;
    text-transform: uppercase;
    padding: 0 0 5px 0;
}

.cascade-event-button.btn1:not(.disabled):hover {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_1_hover.png);
}

.cascade-event-button.btn1:not(.disabled).active {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_1_hover.png);
}


.cascade-event-button.btn2 {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_2.png);
    width: 170px;
    height: 60px;
    text-align: center;
    font: normal normal bold 16px/55px Alegreya Sans SC;
    color: #FFFFFF;
    text-shadow: 0 0 5px #00000099;
    text-transform: uppercase;
    padding: 0 0 5px 0;
}

.cascade-event-button.btn2:not(.disabled):hover {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_2_hover.png);
}

.cascade-event-button.btn2:not(.disabled).active {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_2_hover.png);
}

.cascade-event-button.btn3 {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_3.png);
    width: 200px;
    height: 46px;
    text-align: center;
    font: normal normal bold 16px/40px Alegreya Sans SC;
    color: #FFFFFF;
    text-shadow: 0 0 5px #00000099;
    text-transform: uppercase;
}

button.cascade-event-button.btn3 {
    line-height: 16px;
}

.cascade-event-button.btn3:not(.disabled):hover {
    background-image: url(/static/event/2022/halloween/img/Common/Buttons/btn_3_hover.png);
}

.cascade-event-button.mall-button {
    background-image: url(/static/event/2022/halloween/img/Menu/Main/btn_mall.png);
    width: 200px;
    height: 46px;
    text-align: center;
    font: normal normal bold 16px/40px Alegreya Sans SC;
    color: #FFFFFF;
    text-shadow: 0 0 5px #00000099;
    text-transform: uppercase;
}

.cascade-event-button.mall-button:not(.disabled):hover {
    background-image: url(/static/event/2022/halloween/img/Menu/Main/btn_mall_hover.png);
}

.cascade-event-button.help-button {
    background-image: url(/static/event/2022/halloween/img/Help/btn.png);
    width: 50px;
    height: 50px;
}

.cascade-event-button.help-button:not(.disabled):hover {
    background-image: url(/static/event/2022/halloween/img/Help/btn_hover.png);
}

.generic-event-center-panel.cascade-event .paginator-container .paginator-pagination-container .paginator-pagination-page,
.cascade-pagination-page {
    background: url(/static/event/2022/halloween/img/Common/Buttons/btn_radio_off.png);
    width: 36px;
    height: 36px;
    border-radius: 100%;
    cursor: pointer;
    border: none;
    box-shadow: none;
    margin: 0 -6px;
}

.generic-event-center-panel.cascade-event .paginator-container .paginator-pagination-container .paginator-pagination-page.active,
.cascade-pagination-page.active {
    background: url(/static/event/2022/halloween/img/Common/Buttons/btn_radio_on.png);
}