/*--------------    piggybank event button     --------------*/
@spritesheet piggybanc_sprite {
    src: interface/large/event_button4.rttex;
    /* For high dpi screens, designates the scaling it is intended to be shown at. */
    resolution: 1x;
    /**
	   The following specifies a list of sprite names and associated rectangles into the image given above.
	   Any sprite given here can be specified in a decorator. Their names must be globally unique.
	   Rectangles are specified as: x y width height. With the origin assumed to be at the top left corner.
	*/
    piggybank_icon_empty: 0px 256px 128px 128px;
    piggybank_icon_base: 128px 256px 128px 128px;
    piggybank_icon_full: 256px 256px 128px 128px;
    scrollbank_icon: 384px 0px 128px 128px;
}

.event_item .state0 .piggybank {
    decorator: image(piggybank_icon_empty);
}

.event_item .state1 .piggybank {
    decorator: image(piggybank_icon_base);
}

.event_item .state2 .piggybank {
    decorator: image(piggybank_icon_full);
}

/*--------------    Scrollbank event button     --------------*/

.scrollbank {
    decorator: image(scrollbank_icon);
}

.scrollbank .label{
     margin-top: 38dp;
     margin-left: 30dp;
     width: 41dp;
 /*background: rgba(24, 107, 139, 255);*/

}


@spritesheet progress_bars_background_sprite
{
	src: interface/large/gui_event_progress_bar_bg.rttex;
    progress-border: 0px 0px 17px 13px;
    progress-inner: 8px 6px 2px 2px;
}

@spritesheet progress_bars_foreground_sprite
{
	src: interface/large/gui_event_progress_bar_fg.rttex;
    progress-fill-border: 0px 0px 17px 13px;
    progress-fill-inner: 8px 6px 2px 2px;
}

.lifeAndProgress{
    width: 100%;
    height: 100%;
    display: inline-block;
}

.progressBar { 
	decorator: ninepatch(progress-border, progress-inner);
	width: 67%;
	height: 14%;
    margin-top: 72%;
    margin-left: 19%;
    display: inline-block;
}

.progressBar fill {
	decorator: ninepatch(progress-fill-border, progress-fill-inner);
	/* padding ensures that the decorator has a minimum width when the value is zero */
	padding-left: 1dp;
    margin: 1dp;
    margin-bottom: 2dp;
}

/*--------------    Mailbox event button     --------------*/

@spritesheet mailbox_button_sprite {
    src: interface/large/event_button4.rttex;
    resolution: 1x;
    mailbox_button_icon_no_mail: 0px 384px 128px 128px;
    mailbox_button_icon_with_mail: 128px 384px 128px 128px;
    notification_icon_circle: 256px 384px 128px 128px;
}

.event_item .state0 .mailbox {
    decorator: image(mailbox_button_icon_no_mail);
}

.event_item .state1 .mailbox {
    decorator: image(mailbox_button_icon_with_mail);
}

/*-------------------------------------------------------------------------------*/

/*--------------    Auction event button     --------------*/

@spritesheet auction_button_sprite {
    src: interface/large/event_button5.rttex;
    resolution: 1x;
    auction_button_icon: 256px 0px 128px 128px;
    active_auction_button_icon: 0px 0px 128px 128px;
    auction_button_text_panel: 0px 218px 128px 28px;
    auction_button_text_panel_inner: 32px 230px 2px 2px;
    auction_button_arrow_open: 128px 0px 128px 128px;
    auction_button_arrow_close: 128px 128px 128px 128px;
}

.auction .label {
    margin-top: 60dp;
    font-size: 12dp;
    decorator: ninepatch(auction_button_text_panel, auction_button_text_panel_inner);
}

.event_item .state0 .auction {
    decorator: image(auction_button_icon);
}

.activeauction .itemIdIcon {
    display: block;
    width: 40%;
    height: 40%;
    position: absolute;
    margin-top: 14%;
    margin-left: 15%;
}

.activeauction .label {
    margin-top: 60dp;
    decorator: ninepatch(auction_button_text_panel, auction_button_text_panel_inner);
}

.activeauction .arrow {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: 0%;
    margin-left: 0%;
    decorator: image(auction_button_arrow_close);
}

.open .activeauction .arrow {
    decorator: image(auction_button_arrow_open);
}

.activeauction {
    decorator: image(active_auction_button_icon);
}

/*-------------------------------------------------------------------------------*/
/*--------------                   Active Auction button panel                     --------------*/

#activeAuctionButtonPanel {
    display: block;
    position: absolute;
    width: 605dp;
    clip: always;
    overflow-x: hidden;
    visibility: hidden;
    margin-left: 6dp;
    padding-left: 6dp;
    margin-top: -20dp;
}

#activeAuctionButtonPanel.visible {
    display: block;
    transition: visibility 0.01s linear-in;
    visibility: visible;
}

#activeAuctionButtonPanel.hidden {
    transition: visibility display 0.01s 0.2s linear-in;
    visibility: visible;
    display: none;
}

* #activeAuctionButtonPanel #panelContent,
.full-hide #activeAuctionButtonPanel.visible #panelContent,
.petbattle-hide #activeAuctionButtonPanel.visible #panelContent,
.hide #activeAuctionButtonPanel.visible #panelContent {
    width: 580dp;
    transition: margin-left 0.2s linear-out;
    margin-left: -830dp;
}

#activeAuctionButtonPanel.visible #panelContent {
    transition: margin-left 0.2s linear-in;
    margin-left: 0dp;
}

#activeAuctionButtonPanel #panelContent .content {
    padding: 10dp 10dp 15dp 7dp;
    width: 580dp;
    display: flex;
    align-items: center;
    justify-content: space-between;
    decorator: tiled-box( blue_panel_tl, blue_panel_t, blue_panel_tr, blue_panel_cl, blue_panel_c, blue_panel_cr, blue_panel_bl, blue_panel_b, blue_panel_br );
    image-color: rgba(135, 184, 204, 255);
}

#activeAuctionButtonPanel #panelContent .frame {
    z-index: -1;
    position: absolute;
    top: 0dp;
    bottom: 0dp;
    background-color: rgba(39, 125, 159, 225);
    width: 590dp;
    margin: 5dp 5dp 5dp 5dp;
}

#activeAuctionButtonPanel #panelSearchContent .content {
    width: 80dp;
    height: 80dp;
    display: flex;
    position: absolute;
    top: 0dp;
    left: 605dp;
    align-items: center;
    justify-content: space-between;
    decorator: tiled-box( blue_panel_tl, blue_panel_t, blue_panel_tr, blue_panel_cl, blue_panel_c, blue_panel_cr, blue_panel_bl, blue_panel_b, blue_panel_br );
    image-color: rgba(135, 184, 204, 255);
}

#activeAuctionButtonPanel #panelSearchContent .frame {
    z-index: -1;
    position: absolute;
    top: 0dp;
    bottom: 0dp;
    background-color: rgba(255, 125, 159, 225);
    width: 80dp;
    height: 80dp
}

#activeAuctionButtonPanel #panelContent table {
    width: 580dp;
    font-size: 20dp;
    column-gap: 10dp;
}

#activeAuctionButtonPanel #panelContent table #item-name {
    font-size: 24dp;
    word-break: break-word;
    padding-bottom: 5dp;
}

#activeAuctionButtonPanel #panelContent table #bid-end-time {
    font-size: 16dp;
    padding-bottom: 5dp;
}

#activeAuctionButtonPanel #panelContent table #bid-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

#activeAuctionButtonPanel #panelContent table #bid-buttons #bid-label {
    font-size: 17dp;
    height: 20dp;
}

@spritesheet auction-button-sprites {
    src: interface/large/gui_auction_btn.rttex;
    resolution: 1x;
    auction-button-bg: 0px 0px 32px 32px;
    auction-button-bg-inner: 15px 15px 2px 2px;
}

#activeAuctionButtonPanel #panelContent table #bid-buttons .img-button {
    decorator: ninepatch(auction-button-bg, auction-button-bg-inner);
    margin-right: 10dp;
    width: 30dp;
    height: 35dp;
}

#activeAuctionButtonPanel #panelContent table #bid-buttons .img-button .label {
    font-size: 20dp;
    line-height: 15dp;
    margin-top: 8dp;
    display: block;
    width: auto;
    font-effect: none;
}

#activeAuctionButtonPanel #panelContent table #bid-buttons .img-button .loader {
    margin-top: 4dp;
}

#activeAuctionButtonPanel #panelContent table #bid-buttons #bid-buttons-container.hidden,
#activeAuctionButtonPanel #panelContent table #bid-buttons .img-button .hidden {
    display: none;
}

#activeAuctionButtonPanel #panelContent table tr:nth-child(4) {
    background-color: rgba(81, 154, 188, 255);
    vertical-align: middle;
    padding-bottom: 5dp;
    padding-top: 5dp;
}

#activeAuctionButtonPanel #panelContent table #col-1 {
    width: 330dp;
    padding-left: 10dp;
}

#activeAuctionButtonPanel #panelContent table #col-2 {
    width: auto;
    vertical-align: middle;
}

#activeAuctionButtonPanel #panelContent table #available-wl {
    vertical-align: middle;
}

#wls_panel {
    display: inline;
}

#wls_panel .panel {
    width: 130dp;
    height: 35dp;
    decorator: ninepatch(gems_panel_bg, gems_panel_bg_inner);
    display: inline-block;
    vertical-align: top;
    margin-left: 10dp;
}

#wls_panel #wl_left_panel {
    width: 35dp;
    height: 33dp;
    background-color: rgba(121, 194, 222, 255);
    border-top-left-radius: 6dp;
    border-bottom-left-radius: 6dp;
    margin-left: -1dp;
    margin-right: 8dp;
    display: inline-block;
}

#wls_panel #wl_left_panel #wl_icon {
    width: 43dp;
    height: 43dp;
    decorator: image(interface/large/gui_world_lock_icon.rttex);
    margin: auto;
}

#wls_panel #wl_right_panel {
    font-size: 21dp;
    font-weight: bold;
    line-height: 25dp;
    display: inline-block;
    vertical-align: top;
    margin-top: 4dp;
}

#wls_panel #plus_button {
    display: inline-block;
    width: 35dp;
    height: 35dp;
    decorator: image(interface/large/gui_buy_plus.rttex);
    vertical-align: top;
	sound-on-click: true;
}

#wls_panel #plus_button:active {
    image-color: #aaa;
}

#available-wl #search-button {
    display: inline-block;
    width: 35dp;
    height: 35dp;
    decorator: ninepatch(auction-button-bg, auction-button-bg-inner);
    image-color: rgba(121, 194, 222, 255);
    vertical-align: top;
	sound-on-click: true;
}

@spritesheet auction-search-sprite {
    src: interface/large/gui_inv_tab_icons.rttex;
    resolution: 1x;
    auction_search_icon: 128px 180px 64px 60px;
}



#available-wl #search-button #search-icon{
    display: block;
    width: 40dp;
    height: 40dp;
    padding: 0;
    position: relative;
    margin: auto;
    margin-top: -3dp;
    decorator: image(auction_search_icon);
}

#available-wl #search-button *:active {
		filter: brightness(0.85);
}


/*-------------------------------------------------------------------------------*/
/*--------------                   FTUE button                     --------------*/
@spritesheet ftue_button_sprite {
    src: interface/large/ftue_buttons.rttex;
    resolution: 1x;
    ftue_button_icon_closed: 0px 0px 128px 128px;
    ftue_button_icon_opened: 128px 0px 128px 128px;
    ftue_button_icon_call: 256px 0px 128px 128px;
    ftue_phone_icon_call: 0px 128px 128px 128px;
    ftue_scroll_icon_call: 256px 384px 128px 128px;
    notification_icon_image: 256px 256px 128px 128px;
}

@spritesheet ftue_panel_sprite {
    src: interface/large/ftue_buttons_toggle.rttex;
    /* For high dpi screens, designates the scaling it is intended to be shown at. */
    resolution: 1x;
    /**
	   The following specifies a list of sprite names and associated rectangles into the image given above.
	   Any sprite given here can be specified in a decorator. Their names must be globally unique.
	   Rectangles are specified as: x y width height. With the origin assumed to be at the top left corner.
	*/
    ftue_switcher_icon_off: 0px 0px 256px 128px;
    ftue_switcher_icon_on: 0px 128px 256px 128px;
}

.notification_exclamation {
    position: absolute;
    width: 48dp;
    height: 48dp;
    decorator: image(notification_icon_image);
    margin-left: -8dp;
    margin-top: -8dp;
}

.notification_circle {
    position: absolute;
    width: 48dp;
    height: 48dp;
    decorator: image(notification_icon_circle);
    margin-left: -8dp;
    margin-top: -8dp;
}

.notification_text {
    position: absolute;
    width: 48dp;
    height: 48dp;
    text-align: center;
    line-height: 48dp;
    vertical-align: middle;
    font-size: 16dp;
}

#scroll .notification_exclamation {
    margin-left: -18dp;
    margin-top: -18dp;
}

.ftuebutton {
    overflow-x: visible;
}

.ftue-hide .event_item {
    display: none;
}

.ftue-hide #FTUEButton {
    display: block;
}

.event_item .closed .ftuebutton {
    decorator: image(ftue_button_icon_closed);
}

.event_item .opened .ftuebutton {
    decorator: image(ftue_button_icon_opened);
}

.event_item .call .ftuebutton {
    decorator: image(ftue_button_icon_call);
}

@spritesheet BasePanel {
    src: game/gui_box_white.rttex;
    /* For high dpi screens, designates the scaling it is intended to be shown at. */
    resolution: 1x;
    /**
	   The following specifies a list of sprite names and associated rectangles into the image given above.
	   Any sprite given here can be specified in a decorator. Their names must be globally unique.
	   Rectangles are specified as: x y width height. With the origin assumed to be at the top left corner.
	*/
    blue_panel_tl: 0px 0px 15px 15px;
    blue_panel_t: 15px 0px 2px 15px;
    blue_panel_tr: 17px 0px 15px 15px;
    blue_panel_cl: 0px 15px 15px 2px;
    blue_panel_c: 15px 15px 2px 2px;
    blue_panel_cr: 17px 15px 15px 2px;
    blue_panel_bl: 0px 17px 15px 15px;
    blue_panel_b: 15px 17px 2px 15px;
    blue_panel_br: 17px 17px 15px 15px;
}

#ftueButtonPanel {
    display: block;
    position: absolute;
    width: 472dp;
    clip: always;
    overflow-x: hidden;
    visibility: hidden;
    margin-left: 6dp;
    padding-left: 6dp;
}

    #ftueButtonPanel.visible {
        display: block;
        transition: visibility 0.01s linear-in;
        visibility: visible;
    }

    #ftueButtonPanel.hidden {
        transition: visibility display 0.01s 0.2s linear-in;
        visibility: visible;
        display: none;
    }

* #ftueButtonPanel #panelContent,
.full-hide #ftueButtonPanel.visible #panelContent,
.petbattle-hide #ftueButtonPanel.visible #panelContent,
.hide #ftueButtonPanel.visible #panelContent {
    width: 550dp;
    transition: margin-left 0.2s linear-out;
    margin-left: -600dp;
}

    #ftueButtonPanel.visible #panelContent {
        transition: margin-left 0.2s linear-in;
        margin-left: 0dp;
    }

    #ftueButtonPanel #panelContent .content {
        padding: 10dp;
        width: 350dp;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

        #ftueButtonPanel #panelContent .frame {
            z-index: -1;
            position: absolute;
            top: 0dp;
            bottom: 0dp;
            background-color: rgba(39, 125, 159, 170);
            width: 358dp;
            margin: 5dp 5dp 5dp 5dp;
            border-radius: 7dp;
        }

    #ftueButtonPanel #description {
        font-size: 18dp;
        padding: 4dp;
        padding-right: 8dp;
        margin-right: 0dp;
        flex-shrink: 1;
        flex-grow: 1;
    }

        #ftueButtonPanel #description .title {
            font-size: 20dp;
        }

.ftue-hide #ftueButtonPanel #buttons {
    display: none;
}

        #ftueButtonPanel #buttons #phone {
            decorator: image(ftue_phone_icon_call);
            width: 48dp;
            height: 48dp;
            display: inline-block;
	sound-on-click: true;
        }

            #ftueButtonPanel #buttons #phone:active {
                image-color: #aaa;
            }

        #ftueButtonPanel #scroll {
            decorator: image(ftue_scroll_icon_call);
            width: 48dp;
            height: 48dp;
            display: inline-block;
	        sound-on-click: true;
        }

            #ftueButtonPanel #scroll.hidden {
                display: none;
            }

            #ftueButtonPanel #scroll:active {
                image-color: #aaa;
            }

        #ftueButtonPanel #buttons #switcher {
            width: 96dp;
            height: 48dp;
            display: inline-block;
            decorator: image(ftue_switcher_icon_off);
        }

            #ftueButtonPanel #buttons #switcher.on {
                decorator: image(ftue_switcher_icon_on);
            }


/*-------------------------------------------------------------------------------*/
/*--------------                   daily_challenge button                     --------------*/
@spritesheet daily_challenge_button_sprite {
    src: interface/large/ftue_buttons.rttex;
    /* For high dpi screens, designates the scaling it is intended to be shown at. */
    resolution: 1x;
    /**
	   The following specifies a list of sprite names and associated rectangles into the image given above.
	   Any sprite given here can be specified in a decorator. Their names must be globally unique.
	   Rectangles are specified as: x y width height. With the origin assumed to be at the top left corner.
	*/
    daily_challenge_button_bg: 0px 256px 128px 128px;
    daily_challenge_button_bg_and_rays: 128px 256px 128px 128px;
    daily_challenge_button_text_panel: 0px 459px 128px 28px;
    daily_challenge_button_text_panel_inner: 32px 480px 2px 2px;
}

.itemIdIcon {
    display: none;
    width: 50%;
    height: 50%;
    position: absolute;
    margin-top: 25%;
    margin-left: 25%;
}

.daily_challenge {
    decorator: image(daily_challenge_button_bg_and_rays);
}

    .daily_challenge .itemIdIcon {
        display: block;
    }

    .daily_challenge .label {
        decorator: ninepatch(daily_challenge_button_text_panel, daily_challenge_button_text_panel_inner);
    }


/*-------------------------------------------------------------------------------*/
/*--------------    winterfest bingo event button     --------------*/

@spritesheet wf_bingo_button_sprite {
    src: interface/large/event_button.rttex;
    resolution: 1x;
    wf_bingo_icon: 384px 384px 128px 128px;
    wf_bingo_icon_claim: 256px 384px 128px 128px;
}

.event_item .state0 .wf-bingo {
    decorator: image(wf_bingo_icon);
}

.event_item .state1 .wf-bingo {
    decorator: image(wf_bingo_icon_claim);
}

/*-------------------------------------------------------------------------------*/
/*--------------    ubi bingo event button     --------------*/

@spritesheet ubi_bingo_button_sprite {
    src: interface/large/event_button4.rttex;
    resolution: 1x;
    ubi_bingo_icon: 128px 128px 128px 128px;
    ubi_bingo_icon_claim: 0px 128px 128px 128px;
}

.event_item .state0 .ubi-bingo {
    decorator: image(ubi_bingo_icon);
}

.event_item .state1 .ubi-bingo {
    decorator: image(ubi_bingo_icon_claim);
}

/*-------------------------------------------------------------------------------*/
/*--------------    winterfest rally event button     --------------*/

@spritesheet wf_rally_button_sprite {
    src: interface/large/event_button.rttex;
    resolution: 1x;
    wf_rally_icon: 384px 256px 128px 128px;
    wf_rally_icon_claim: 256px 256px 128px 128px;
}

.event_item .state0 .winter-rally {
    decorator: image(wf_rally_icon);
}

.event_item .state1 .winter-rally {
    decorator: image(wf_rally_icon_claim);
}

/*-------------------------------------------------------------------------------*/
/*--------------   Anniversary Leaderboard event button     --------------*/

@spritesheet anniversary_leaderboard_button_sprite {
    src: interface/large/event_button3.rttex;
    resolution: 1x;
    ann_leaderboard_active_icon: 256px 0px 128px 128px;
    ann_leaderboard_claim_icon: 256px 128px 128px 128px;
    ann_leaderboard_claim_light_icon: 384px 0px 128px 128px;
    ann_leaderboard_claimed_icon: 384px 128px 128px 128px;
}

.event_item .state0 .anniversary-leaderboard {
    decorator: image(ann_leaderboard_active_icon);
}

.event_item .state1 .anniversary-leaderboard {
    decorator: image(ann_leaderboard_claim_icon);
}

.event_item .state1 .anniversary-leaderboard .rays {
    decorator: image(ann_leaderboard_claim_light_icon);
    animation: 3s fade-in-out infinite;
}

.event_item .state2 .anniversary-leaderboard {
    decorator: image(ann_leaderboard_claimed_icon);
}


/*-------------------------------------------------------------------------------*/
/*--------------         Anniversary Euphoria event button         --------------*/

@spritesheet anniversary_euphoria_button_sprite {
    src: interface/large/event_button3.rttex;
    resolution: 1x;
    an_euphoria_noparty_icon: 0px 0px 128px 128px;
    an_euphoria_party_started_icon: 0px 128px 128px 128px;
    an_euphoria_party_started_light_icon: 128px 0px 128px 128px;
    an_euphoria_euphoria_icon: 128px 128px 128px 128px;
}

.event_item .state0 .anniversary-euphoria {
    decorator: image(an_euphoria_noparty_icon);
}

.event_item .state1 .anniversary-euphoria {
    decorator: image(an_euphoria_party_started_icon);
}

    .event_item .state1 .anniversary-euphoria .rays {
        decorator: image(an_euphoria_party_started_light_icon);
        animation: 3s fade-in-out infinite;
    }

.event_item .state2 .anniversary-euphoria {
    decorator: image(an_euphoria_euphoria_icon);
}

/*-------------------------------------------------------------------------------*/
/*--------------         Anniversary Euphoria event button         --------------*/

@spritesheet cny_button_sprite {
    src: interface/large/event_button3.rttex;
    resolution: 1x;
    cny_button_state0_icon: 0px 256px 128px 128px;
    cny_button_state1_icon: 128px 256px 128px 128px;
    cny_button_state2_icon: 256px 256px 128px 128px;
    cny_button_state3_icon: 384px 256px 128px 128px;
    cny_button_state4_icon: 0px 384px 128px 128px;
    cny_button_state5_icon: 128px 384px 128px 128px;
    cny_button_state5_anim_icon: 256px 384px 128px 128px;
}

.cny .label {
    margin-top: 57dp;
}

.event_item .state0 .cny {
    decorator: image(cny_button_state0_icon);
}

.event_item .state1 .cny {
    decorator: image(cny_button_state1_icon);
}

.event_item .state2 .cny {
    decorator: image(cny_button_state2_icon);
}

.event_item .state3 .cny {
    decorator: image(cny_button_state3_icon);
}

.event_item .state4 .cny {
    decorator: image(cny_button_state4_icon);
}

.event_item .state5 .cny {
    decorator: image(cny_button_state5_icon);
}

@keyframes pause-fade-in {
    from {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    to {
        opacity: 01;
    }
}

.event_item .state5 .cny .rays {
    opacity: 0;
    decorator: image(cny_button_state5_anim_icon);
    animation: 2s infinite alternate pause-fade-in;
}

/*-------------------------------------------------------------------------------*/
/*--------------           Valentines day event button             --------------*/

@spritesheet golden_booty_chest_button_sprite {
    src: interface/large/event_button.rttex;
    resolution: 1x;
    olden_booty_chest_icon_stat0: 0px 0px 128px 128px;
    olden_booty_chest_icon_stat1_anim: 0px 128px 128px 128px;
    olden_booty_chest_icon_stat1: 128px 0px 128px 128px;
}

.event_item .state0 .valentines_day {
    decorator: image(olden_booty_chest_icon_stat0);
}

.event_item .state1 .valentines_day {
    decorator: image(olden_booty_chest_icon_stat1);
}

    .event_item .state1 .valentines_day .rays {
        decorator: image(olden_booty_chest_icon_stat1_anim);
        animation: 3s fade-in-out infinite;
    }

.event_item .state2 .valentines_day {
    decorator: image(olden_booty_chest_icon_stat2);
}

.valentines_day .label {
    margin-top: 43dp;
}

/*-------------------------------------------------------------------------------*/
/*--------------           St. Patrick event button             --------------*/

@spritesheet st_patrick_event_button_sprite {
    src: interface/large/event_button4.rttex;
    resolution: 1x;
    st_patrick_event_icon_stat0: 0px 0px 128px 128px;
    st_patrick_event_icon_stat1: 128px 0px 128px 128px;
    st_patrick_event_icon_stat2: 256px 0px 128px 128px;
}

.event_item .state0 .st_patrick_event {
    decorator: image(st_patrick_event_icon_stat0);
}

.event_item .state1 .st_patrick_event {
    decorator: image(st_patrick_event_icon_stat1);
}

.event_item .state2 .st_patrick_event {
    decorator: image(st_patrick_event_icon_stat2);
}

.st_patrick_event .label {
    /*margin-top: 43dp;*/
}

/*-------------------------------------------------------------------------------*/

/*--------------           Easter event button             --------------*/

@spritesheet easter_event_button_sprite {
    src: interface/large/event_button2.rttex;
    resolution: 1x;
    easter_event_icon_stat0: 0px 256px 128px 128px;
    easter_event_icon_stat1_anim: 0px 384px 128px 128px;
    easter_event_icon_stat1: 128px 256px 128px 128px;
}

.event_item .state0 .easter_event {
    decorator: image(easter_event_icon_stat0);
}

.event_item .state1 .easter_event {
    decorator: image(easter_event_icon_stat1);
}

    .event_item .state1 .easter_event .rays {
        decorator: image(easter_event_icon_stat1_anim);
        animation: 3s fade-in-out infinite;
    }

.easter_event .label {
    margin-top: 43dp;
}

/*-------------------------------------------------------------------------------*//*--------------                   Clash Event button                   --------------*/

@spritesheet clash_event_button_sprite {
    src: interface/large/ftue_buttons.rttex;
    resolution: 1x;
    clash_event_button_bg: 0px 256px 128px 128px;
    clash_event_button_bg_and_rays: 128px 256px 128px 128px;
    clash_event_button_text_panel: 0px 459px 128px 28px;
    clash_event_button_text_panel_inner: 32px 480px 2px 2px;
}

.itemIdIcon {
    display: none;
    width: 50%;
    height: 50%;
    position: absolute;
    margin-top: 25%;
    margin-left: 25%;
}

.clash-event {
    decorator: image(clash_event_button_bg_and_rays);
}

    .clash-event .itemIdIcon {
        display: block;
    }

    .clash-event .label {
        decorator: ninepatch(clash_event_button_text_panel, clash_event_button_text_panel_inner);
    }
/*--------------         Cinco pinata event button         --------------*/

@spritesheet cinco_pinata_button_sprite {
    src: interface/large/event_button.rttex;
    resolution: 1x;
    cinco_pinata_button_state0_icon: 256px 0px 128px 128px;
    cinco_pinata_button_state1_icon: 256px 128px 128px 128px;
    cinco_pinata_button_state2_icon: 384px 128px 128px 128px;
    cinco_pinata_button_state1_anim_icon: 384px 0px 128px 128px;
}

.cinco_pinata_event .label {
    margin-top: 47dp;
}

.event_item .state0 .cinco_pinata_event {
    decorator: image(cinco_pinata_button_state0_icon);
}

.event_item .state1 .cinco_pinata_event {
    decorator: image(cinco_pinata_button_state1_icon);
}

.event_item .state2 .cinco_pinata_event {
    decorator: image(cinco_pinata_button_state2_icon);
}

.event_item .state1 .cinco_pinata_event .rays {
    opacity: 0;
    decorator: image(cinco_pinata_button_state1_anim_icon);
    animation: 2s infinite alternate pause-fade-in;
}

/*-------------------------------------------------------------------------------*/
/*--------------         SPP Tropical Fruits event button         --------------*/

@spritesheet spp_tropical_fruits_button_sprite {
    src: interface/large/event_button2.rttex;
    resolution: 1x;
    spp_tropical_fruits_button_state0_icon: 384px 256px 128px 128px;
    spp_tropical_fruits_button_state0_anim_icon: 256px 256px 128px 128px;
}

.event_item .state0 .spp_tropical_fruits {
    decorator: image(spp_tropical_fruits_button_state0_icon);
}

.event_item .state0 .spp_tropical_fruits .rays {
    opacity: 0;
    decorator: image(spp_tropical_fruits_button_state0_anim_icon);
    animation: 2s infinite alternate pause-fade-in;
}

/*-------------------------------------------------------------------------------*/
/*--------------         SPP Tropical Fruits event button         --------------*/

@spritesheet summerfest_button_sprite {
    src: interface/large/event_button.rttex;
    resolution: 1x;
    summerfest_button_state0_icon: 0px 256px 128px 128px;
    summerfest_button_state1_icon: 0px 384px 128px 128px;
    summerfest_button_state1_anim_icon: 128px 256px 128px 128px;
}

.summerfest .label {
    margin-top: 43dp;
}

.event_item .state0 .summerfest {
    decorator: image(summerfest_button_state0_icon);
}

.event_item .state1 .summerfest {
    decorator: image(summerfest_button_state1_icon);
}

    .event_item .state1 .summerfest .rays {
        opacity: 0;
        decorator: image(summerfest_button_state1_anim_icon);
        animation: 3s fade-in-out infinite;
    }


/*-------------------------------------------------------------------------------*//*--------------           Halloween event button             --------------*/

@spritesheet halloween_button_sprite {
    src: interface/large/event_button2.rttex;
    resolution: 1x;
    halloween_button_state0_icon: 0px 0px 128px 128px;
    halloween_button_state1_anim_icon: 0px 128px 128px 128px;
    halloween_button_state1_icon: 128px 0px 128px 128px;
    halloween_button_state2_icon: 128px 128px 128px 128px;
}

.event_item .state0 .halloween {
    decorator: image(halloween_button_state0_icon);
}

.event_item .state1 .halloween {
    decorator: image(halloween_button_state1_icon);
}

    .event_item .state1 .halloween .rays {
        decorator: image(halloween_button_state1_anim_icon);
        animation: 3s fade-in-out infinite;
    }

.event_item .state2 .halloween {
    decorator: image(halloween_button_state2_icon);
}

.halloween .label {
    margin-top: 43dp;
}