:root {
    --dark-color: #32343b;
    --darker-color: #282a35;
    --dark-2: #333542;
    --dark-3: #34343c;
    --dark-4: #2a2b35;
    
    --light-color: #eae4c2;
    --light-color-2: #fff9d5;
    --light-purple: #c8aff0;
    --light-purple-2: #debef4;
    --light-purple-3: #733aad;
    --bottom-line: #BFB991;
    --brown: #723f2e;
    --brown-border: #b17455;
    --red: #ba5252;
    --cyan:#aeffde;
    --green:#72d84c;
    --green_on_light:#387b41;
    --lime:#69F787;
    --gold:#fc0;
    --gold2:#ffde52;

  }

  .encode-sans-semi-condensed-regular {
    font-family: "Encode Sans Semi Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
#html_container, body{
    padding: 0px;
    margin:0px;
    background-color: #000000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position:relative;
    font-family: "Encode Sans Semi Condensed", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}






#myCanvas{
    overflow: hidden;
    background-color: black;
    /* border:5px red solid; */
    /* transform: translateZ(-1);
    will-change: transform, opacity; */
}

#image_loader_container, #image_preloader_container, #jablko_optimised_image_container{
    display: none;
}

#body_buttons{
    position: absolute;
    left:0px;
    top:0px;
}
#pre_header{
    position: absolute;
    background-color: var(--darker-color);
    width: 100%;
}
#header{
    text-align: center;
    position: absolute;
    left:0px;
    top:0px;
    height:30px;
    display: none;
    background-color: var(--darker-color);
    /* border-bottom: 1px black solid; */
    width: 100%;
    font-size: 12px;
    white-space: nowrap;
    color: var(--light-color-2);
    /* padding-top:22px; */
}
.header-flex{
    z-index: 1000;
    /* padding-left:4px;
    padding-right:4px; */
    font-size: 12px;
    /* overflow: hidden; */
    height:34px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position: relative;
    align-items:stretch;
}
.header-flex>div{
    background-color: var(--dark-2);
    flex-grow:1;
    margin:2px;
    line-height: 34px;
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;
}
.header-flex>div>.inner_border{
    top:0px;
    left:0px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 3px #8a55ff solid;
    border-radius: 5px;
    position: absolute;
}

.header-flex>div>.inner_border.inner_border-light{
    border: 3px var(--bottom-line) solid;
}
#header_shadow{
    position: absolute;
    left:0px;
    width: 100%;
    background-image:linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
    height:60px;
    top:0px;
    /* z-index: 0; */
    pointer-events: none;
}

.safe-area-y{
    /* padding-top:60px !important; */
    box-sizing: content-box;
}
.super-clicker-in-use-div{
    background-color: rgba(128, 60, 222, 0.861);
    border-radius: 10px;
    border: 3px var(--dark-color) solid;
    font-weight: bold;
    color:var(--light-color-2);
    position: absolute;
    top:49px;
    padding-left:10px;
    padding-right:10px;
    width:200px;
    left:calc(50vw - 100px );
    text-align: center;
    line-height: 38px;
    min-height: 38px;
    font-size: 15px;
    z-index: 1;
    /* opacity: 0.85; */
    /* box-shadow: 3px 3px 4px rgba(62, 3, 62, 0.6); */
    /* box-shadow: 0px 5px 8px rgba(0,0,0,0.7);    */
}
.super-clicker-in-use-div > div{
    position: relative;
    transform: scale(1.5) translate(-2px,3px);
}
.super-clicker-in-use-div.enhanced-clicker > div{
    position: relative;
    transform: scale(1.5) translate(-3px,2px);
}
.enhanced-clicker{
    width:250px;
    left:calc(50vw - 125px );
    background-color: rgba(49, 52, 59, 0.9);
    color:1px var(--light-color-2) solid;
    border:1px var(--light-color-2) solid;
}
#goodsOverview{
    position: absolute;
    right:3px;
    /* top:50px; meni sa v header.js */
    border: 1px black solid;
    
    color: var(--dark-color);
    background-color: rgba(234, 228, 194, 0.80);
    text-align: right;
    font-size: 14px;
    z-index: 1901;
    padding:5px;
    padding-left:30px;
    box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
}

@media only screen and (min-width: 720px){
    .header-flex{
        font-size: 17px;
    }
    #goodsOverview{
        font-size: 17px;
    }
}



#floating_texts{
    position: absolute;
    width: 1px;
    height: 1px;
    left:0px;
    top:0px;
    z-index: 5001;
    overflow: visible;
    pointer-events: none;
}

#floating_texts>div{
    /* font-size: 22px; je v js */
    background-color: rgba(40, 42, 53, 0.8);
    /* border: 1px var(--darker-color) solid; */
    white-space: nowrap;
    padding:4px;
    display: inline-block;
    text-align: center;
    position: absolute;
    display:none;
    border-radius: 9px;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
#floating_texts>div:empty{
    display:none;
}
@keyframes floatingTextAnim {
    80%  {opacity: 1; transform: translateY(-50px);}
    100%  {opacity: 0; transform: translateY(-50px);}
}
@keyframes offer_pop_anim {
    10%  { transform: translateY(0px);}
    13%  { transform: translateY(-8px);}
    19%  { transform: translateY(0px);}
}
.offer-pop{
    animation-name: offer_pop_anim;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}
.offer_multi_building_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

}
.offer_multi_building_div{
    display: flex;
    align-items: center;
    margin-left:8px;
    margin-right:8px;
    margin-top:12px;
}
.offer_multi_building_div .multi-tile-image-div{
    margin:0px;
}
.offer_multi_building_div>div:first-child{
    padding-right:12px;
    font-weight: bolder;
    font-size: 36px;
    color:var(--gold);
}

@keyframes offer_pop_anim_2 {
    1%  { transform: translateY(0px);}
    1.2%  { transform: translateY(-5px);}
    1.4%  { transform: translateY(0px);}
}
.offer-pop-2{
    animation-name: offer_pop_anim_2;
    animation-duration: 120s;
    animation-iteration-count: infinite;
}


input[type=button].big{
    height:35px;
}

.popup-header-image{
    width:100%; 
    max-width:450px;
    aspect-ratio: 3 / 1;    
    position: relative;
    top:4px;
    margin-bottom: -5px;
}

#popups{
    position:absolute;
    left:0px;
    top:0px;
    width:1px;
    height: 1px;
}
.popup{
    position:absolute;
    /* opacity:0.5; */
}
#basicPopup{
    z-index: 3000;
}
#secondaryPopup{
    z-index: 3001;
}
#infoPopup{
    z-index: 3011;
}
#loadingPopup{
    z-index: 3012;
}
#errorPopup{
    z-index: 5000;
}
#achPopup{
    z-index: 3010;
}
#rewardAdPopup{
    z-index: 2999;
}
#areYouSurePopup{
    z-index: 3020;
}
#bottomMenuPopup{
    z-index: 1900;
}
.popup_addon{
    height:200px;
    transition: 0.9s;
    position: absolute;
    top:100vh;
    font-size: 12px;
    left:calc(50vw - 200px);
    background-color: var(--light-color-2);
    border-radius: 16px;
    border: var(--dark-4) 5px solid;
    color: var(--dark-color);
    text-align: right;
    padding:5px;
    padding-top:10px;
    padding-left:105px;
    box-sizing: border-box;
    /* overflow: hidden; */
}
.popup_addon>.left-part{
    border-top-left-radius: 8px;
    position: absolute;
    background-color: var(--dark-color);
    height: 100%;
    width: 90px;
    left: 0px;
    top: 0px;
    display: inline-block;
}
.popup_addon>.left-part>.goods{
    width:70px;
    position: absolute;
    left:10px;
    top:4px;
}
.popup_addon>.left-part>.zobacik{
    position: absolute;
    right:-12px;
    top:20px;
    transform:  rotate(180deg);
    width:12px;
    opacity: 0.95;
}
#bottomGridMenuPopup{
    z-index: 2005;
}

.popup-okno-upper-minibut{
    position: absolute;
    padding: 3px;
    width:40px;
    text-align: center;
    background-color: var(--darker-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* border: 1px black solid;
    border-bottom: none; */
    box-sizing: border-box;
    font-size: 24px;
    font-weight: bolder;
    height:40px;
    top:-35px;
    right:15px;
}
.popup-okno-upper-minibut.pos-2{
    right:65px;
}
.popup-okno-upper-minibut.pos-3{
    right:100px;
}
.popup-okno-upper-minibut img{
    width:30px;
}

.radio-img-container{
    position:relative;
    transform-origin: 0px 0px;
}
.radio-light-flashing{
    animation-name: radio_light_flashing;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
}

@keyframes radio_light_flashing {
0%  {opacity: 0; }
10%  {opacity: 1; }
20%  {opacity: 0; }
30%  {opacity: 1; }
40%  {opacity: 0; }
50%  {opacity: 1; }
60%  {opacity: 0; }
70%  {opacity: 1; }
80%  {opacity: 0; }
90%  {opacity: 1; }
100%  {opacity: 0; }
}

.auto-margin{
    margin-left: auto;
    margin-right: auto;
}


.popup-okno-up-corner-close-but{
    position: absolute;
    top:0px;
    height:60px;
    width:60px;
    padding: 3px;
    text-align: center;
    background-color: var(--darker-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box;
}
.popup-okno-up-corner-close-but img{
    width:50px;
}

.popup-okno-bottom-button{
    position: absolute;
    top:calc(100vh - 60px);
    left:0px;
    width: 100vw;
    text-align: center;
}


.popup-shadow{
    box-shadow: 0px 15px 4px rgba(50,10,50,0.3);
}

.bottom-popup-shadow{
    box-shadow: 5px 5px 3px rgba(50,50,50,0.5);
}

.popup_sed{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    opacity: 0.001;
    background-color: rgba(0,0,0,0.4);
    transition: 0.5s;
}
.popup_okno{
    opacity: 0.5;
    position: absolute;
    background-color: var(--darker-color);
    border-radius: 18px;
    padding:5px;
    padding-top:8px;
    box-sizing: content-box;
    width: calc(100vw - 20px);
    left:6px;
    top:100vh;
    transition: 0.4s;
    max-height: 45vh;
    color:var(--light-color-2);
}
.popup_okno_in{
    /* margin-bottom: 5px; */
    font-size: 13px;
    max-height: calc(45vh - 10px); /* nastavuje sa js _maxHeightIN*/
    border-radius: 10px;
    overflow: hidden;
}

.popup_okno_in_2::-webkit-scrollbar {
    display: none;
}
  
  /* Hide scrollbar for IE, Edge and Firefox */
.popup_okno_in,
.popup_okno_in_2 {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    box-sizing: border-box;
    
}

.popup_okno_in_2{
    margin-top: 4px;
    margin-bottom: 0px;
    margin-left: 2px;
    margin-right: 2px;
    padding-bottom: 2px;
    box-sizing: border-box;
    max-height: calc(45vh - 25px); /* nastavuje sa js _maxHeightIN*/

    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    color:var(--dark-color);
    font-size: 12px;
    background-color: var(--light-color-2);
    border-radius: 10px;
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
}

#hrac_tabs .tab-table tr td div.bottom_stats_container{
    overflow-y: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    box-sizing: border-box;

}
#bottomGridMenuPopup .popup_okno{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.uber_container{
    position: relative;
    top:-2px;
    padding-left:10px;
    padding-right:10px;
    display: flex;
    justify-content: space-between;
}
.popup_uber_center{
    text-align: center;
    flex-grow: 1;
    font-size: 22px;
    font-weight: bold;
    position: relative;
}
.popup_uber_center_small{
    text-align: center;
    flex-grow: 1;
    font-size: 14px;
    font-weight: bold;
}
.popup_uber_right{
    text-align: right;
}
.popup_uber_left:first-letter{
    text-transform: capitalize;
}
.bf-discount{
    position: absolute;
    left: calc(11% - 6px);
    top: 6%;
    
    font-weight: bold;
    color: var(--darker-color);
    z-index: 2;
}

* {
    touch-action: manipulation;
}
.no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#footer_shadow{
    position: absolute;
    left:0px;
    z-index: 0;
    padding:0px;
    width: 100%;
    top:100vh;
}

#footer{
    position: absolute;
    left:0px;
    z-index: 2000;
    padding:0px;
    width: 100%;
    font-size: 18px;
    top:100vh;
    /* overflow: hidden; */
}
#bottom-bg-bar{
    position: absolute;
    height: 150px;
    width: 100%;
    /* top: -50px; in js */
    background-color: #282a35;
}
#bottom-bg-bar-shadow{
    position: absolute;
    left:0px;
    width: 100%;
    background-image:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.8));
    height:60px;
    pointer-events: none;
    z-index: 0;
}
#footer>div.bottom-menu-button{
    text-align: center;
    color: var(--light-color-2);
    background-color: var(--dark-color);
    background-image: linear-gradient(to right, #32343b, #494c5d, #32343b);

    border:3px #6e7382 solid;
    box-sizing: border-box;
    border-bottom:none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position:absolute;
    padding-top: 12px;
    height:100px;
    top:-40px;
    font-size: 12px;
    transition: 0.3s;
}
#footer>div.bottom-menu-button > .line-border{
    position: absolute;
    top:5px;
    width:3px;
    background-image: linear-gradient(to bottom, #6e7382, #494c5d 40%);
    height:100px;
}
#footer>div.bottom-menu-button.selected{
    background-image: linear-gradient(to bottom, #484b5c, #414246 70%);
    border-color:#fff9d5;
}
#footer>div.bottom-menu-button.selected > .line-border{
    background-image: linear-gradient(to bottom, #fff9d5, #494c5d 40%);
}


#footer>div.bottom-menu-button .icon-img-div{
    transform: translate(0px,1px);
    transition: 0.3s;
}
#footer>div.bottom-menu-button.selected .icon-img-div{
    transform: scale(1.5) translate(0px,4px);
}

/* .bottom-menu-button>img{
    height:35px;
    position: relative;
    top:-8px;
} */

#footer>div.bottom-menu-button-label{
    position: absolute;
    top:-20px;
    padding-top: 2px;
    background-color: #494c5d;
    /* border-left:1px #45b649 solid;
    border-right:1px #45b649 solid; */
    border-left:3px #494c5d solid;
    border-right:3px #494c5d solid;
    box-sizing: border-box;
    overflow: hidden;

    color: var(--light-color-2);
    font-size: 11px;
    text-align: center;
    height:120px;
    z-index: 1;
    font-weight: bold;
}

#footer>div.bottom-menu-button-label.selected{
    background-color: #ffde52;
    color: var(--dark-color);
}

#offer_star{
    position:absolute;
    right:6px;
    top:-18px;
    pointer-events: none;
    transition: 0.4s;
}

.upgrade_div{
    box-sizing: border-box;
    border-radius: 10px;
    border:1px solid grey;
    margin: 0px;
    margin-bottom: 15px;
    background-color: var(--light-color-2);
    overflow: hidden;
}
.upgrade_div table{
    width:100%;
}
.upgrade-label{
    font-size: 15px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 12px;
}
.upgrade-desc{
    padding-left:10px;
    padding-bottom: 10px;
}
.upgrade-cost{
    padding-left:10px;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 5px;
    background-color: var(--light-color);
}
.upgrade-cost  .icon-img-div{
    position: relative;
    top:7px !important;
    margin-top: -4px;

}
.upgrade-but{
    width:70px;
    max-width:70px;
    padding:4px;
    text-align: center;
    font-weight: bold;
    background-color: #69f787;
    border-left: 5px #59d46e solid;
}
.fully_upgraded .upgrade-but{
    background-color: #68f4f3;
    border-left: 5px #50d2d0 solid;
}
.event-upgrade, .new-upgrade, .temporary-upgrade{
    display: inline-block;
    position: relative;
    background-color: #68f4f3;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 4px;
    font-size: 10px;
    font-weight: bold;
    top:1px;
    margin-left: 24px;
    text-transform: uppercase;
    min-width:100px;
    text-align:center;
}
.event-upgrade{
    background-color: #ffde52;
    /* background-color: var(--green); */
}
.temporary-upgrade{
    background-color: var(--darker-color);
    color: var(--light-color-2);
}
.temporary-explanation-div{
    border-radius: 6px;
    text-align: center;
    padding:8px;
    margin:22px;
    margin-top:5px;
    background-color: var(--darker-color);
    color: var(--light-color-2);
    font-weight: bold;
}

.event.upgrade-but{
    background-color: #ffde52;
    border-left: 5px #e2c139 solid;
}
.hr-in-upgrades{
    margin-left: -9px;
    margin-right: -9px;
    border: solid 4px var(--darker-color);
}
.upgrade-flex{
    flex-wrap: wrap;
    display:flex;
    align-items: center;
}
.upgrade-flex > div{
    flex-grow: 1;
}






.click-span{
    color:blue;
    text-decoration: underline;
}
.click-span:active{
    color:#fc0;
}

.leaderboards-table{
    border:1px solid black;
    padding:10px;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 320px){
    .leaderboards-table{
        padding:2px;
    }
}

.leaderboards-table tr td{
    border-top:1px solid black;
}

.leaderboards-me td{
    color:#8151cf;
}


.uber-grid-icon{
    display: inline-block;
    position: relative;
    margin-top:-3px;
    top:2px;
    margin-right:5px;
}
.icon-img-div{
    position:relative;
    display: inline-block;
    margin-left:3px;
    margin-right:3px;
}
.quick_tool_div .icon-img-div{
    margin-left:unset;
    margin-right:unset;
}

.icon-img-div>div{
    position: absolute;
}

.action-div{
    overflow: hidden;
    text-align: right;
    /* border:1px solid rgb(190, 190, 190); */
    background-color: var(--dark-color);
    border-radius: 6px;
    box-sizing: border-box;
    padding:0px;
    margin: 5px;
    color:var(--light-color-2);
}

.action-img-div-container{
    position:relative;
    /* background-color: rgb(255, 244, 199);
    border:1px solid rgb(61, 61, 61); */
}
.action_cat_1{
    box-sizing: border-box;
    margin: 1px;
    background-color: var(--brown);
    border: var(--brown-border) 4px solid;
    border-radius: 6px;
}
.action_cat_2{
    box-sizing: border-box;
    margin: 1px;
    background-color: rgb(113, 90, 0);
    border: #fc0 4px solid;
    border-radius: 6px;
}
.action_cat_event{
    box-sizing: border-box;
    margin: 1px;
    background-color: #0f514e;
    border: #55aaa4 4px solid;
    border-radius: 6px;
}

.action-div.disabled .action-img-div-container{
    /* background-color: rgb(195, 195, 195);
    opacity: 0.5; */
    filter: grayscale(1);
}
.action-img-div{
    position: absolute;
    pointer-events: none;
    bottom:0px;
    left:0px;
}
.action-img-div>div{
    position: absolute;
    bottom:-1px;
}

.action-table tr td{
    padding:0px;
    width:100%;
}
.action-table{
    border-collapse: collapse;
    padding: 0px;
    display: inline-table;
    border-spacing: 0px;
}
.action-table img.action-img{
    position: absolute;
    bottom:0px;
    width:70px;
    left:0px;
    pointer-events: none;
}
.action-div.disabled{
    background-color: rgb(195, 195, 195);
    opacity: 0.7;
    color:var(--dark-2);
}
.action-div.disabled img{
    background-color: rgb(205, 205, 205);
    filter: grayscale(1);
}

.gridActionLabel{
    /* font-size:11px; v kode sa meni*/
    padding-top:4px !important;
    padding-bottom:4px !important;
    text-align:center;
    line-height: 11px;
    overflow: hidden;
    max-width:60px;
    white-space: nowrap;
    text-transform: uppercase;
}

.image_crop{
    overflow: hidden;
}
.image_crop2{
    overflow: hidden;
    border-radius: 10px;
}

.gem-offer{
    position: relative;
    border-radius: 10px;
    margin:10px;
    margin-bottom:20px;
    margin-left:16px;
    margin-right:16px;
    padding: 0px;
    background-color: var(--light-color);
}
.gem-offer table{
    display:inline-table;
}
.gem-offer img{
    margin-right:10px;
}
.gem-offer-image{
    padding: 12px;
    padding-bottom: 3px;
    background-color: var(--light-color-2);
    border-bottom: 3px #eae4c2 solid;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.gem-offer-limit{
    text-align: center;
    font-size: 16px;
    color: var(--darker-color);
}
.gem-offer-value{
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--darker-color);
}
.gem-offer-desc{
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 12px;
    font-size: 14px;
    text-align: center;
}
.gem-offer-cost{
    position: absolute;
    width: 100%;
    left:0px;
    bottom: 0px;
    text-align: center;
    background-color: #662d91;
    border-bottom: 3px #4f2277 solid;
    border-bottom-right-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    height: 26px;
    color: var(--light-color-2);
}
.gem-offer.event_gem_offer{
    margin-top: 40px;
}
.gem-offer .event-upgrade{
    top:-19px;
}

@media only screen and (max-width: 440px){
    .gem-offer-value{
        font-size: 20px;
    }
}
@media only screen and (max-width: 340px){
    .gem-offer{
        margin-left:6px;
        margin-right:6px;
    }
    .gem-offer-value{
        font-size: 18px;
    }
}



@keyframes shaking {
    0% { transform: translate(0, 0) rotate(0deg); }
    1% { transform: translate(5px, 5px) rotate(5deg); }
    2% { transform: translate(0, 0) rotate(0eg); }
    3% { transform: translate(-5px, 5px) rotate(-5deg); }
    4% { transform: translate(0, 0) rotate(0deg); }
    5% { transform: translate(5px, 5px) rotate(5deg); }
    6% { transform: translate(0, 0) rotate(0eg); }
    7% { transform: translate(-5px, 5px) rotate(-5deg); }
    8% { transform: translate(0, 0) rotate(0deg); }
}

#ad_img{
    left:-90px;
    top:60px;
    transition: 1s;
    position: absolute;
}
.ad_arrow{
    position: absolute;
    left:120px;
    top:-5px;
    transform: rotate(180deg );
    animation-name: side_swing;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;

    -webkit-filter: drop-shadow(0px 0px 3px #c546f8) drop-shadow(0px 0px 3px #c546f8) drop-shadow(0px 0px 3px #c546f8);
    filter: drop-shadow(0px 0px 3px #c546f8) drop-shadow(0px 0px 3px #c546f8) drop-shadow(0px 0px 3px #c546f8);
}
@keyframes side_swing {
    0%  {left: 70px; }
    50%  {left: 120px; }
    100%  {left: 70px; }
}
.glow-effect-reward-ad{
    position: absolute;
    bottom:-7px;
    text-align: center;
    width: 100%;
    height:90px;
    overflow: hidden;
}
.glow-effect-reward-ad > img{
    /* width:min(100% , 200px); */
    width:200px;
}
.ad-in-popup-label{
    position: relative;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: -25px;
    z-index: 2;
}
.ad-icon-div{
    width:79px;
    height:79px;
    background-color: var(--dark-color);
    box-shadow: 6px 6px 8px rgba(0,0,0,0.7);   
}
.ad-icon-div>div{
    position: relative;
    top:-1px;
    animation-name: shaking;
    animation-duration: 10s;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
}

#left_boxes_container{
    position: absolute;
    left:0px;
    top:0px;
    transform-origin: 0px 0px;
    scale: 0.8;
}

#buildings_left_box, #upgrades_left_box, #special_offer_left_box, #scb_div, #pool_left_box, #event_leftbox_div{
    left:-150px;
    transition: 1s;
    position: absolute;
}
#buildings_left_box>div, #upgrades_left_box>div, #scb_div>div, .special_offer_left_box>div, #event_leftbox_div>div, #pool_left_box>div{
    width: 80px;
    overflow: hidden;
    box-shadow: 6px 6px 8px rgba(0,0,0,0.7);   
    color: var(--darker-color);
    height:unset;
    padding:5px;
    font-size: 12px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    border: 2px var(--dark-color) solid;
    background-color: var(--light-purple);
}
#event_leftbox_div>div,
.special_offer_left_box>div{
    width: 90px;
}

#buildings_left_box > .left_box_in,
#event_leftbox_div > .left_box_in,
.special_offer_left_box > .left_box_in,
#pool_left_box > .left_box_in,
#upgrades_left_box > .left_box_in{
    overflow: hidden;
    box-sizing: border-box;
    background-color: #078577;
    border: 3px solid #4ac8bb;
    padding: 0px;
    padding-bottom: 4px;
    border-radius: 10px;
    font-size: 10px;
    color: var(--light-color-2);
}

#pool_left_box > .left_box_in .icon-img-div{
    margin-left:0px;
}
#pool_left_box > .left_box_in,
#event_leftbox_div > .left_box_in,
.special_offer_left_box > .left_box_in{
    background-color: #2a2b35;
    border: 3px solid #35424b;
    color: #ffde52;
    font-weight: bold;
}

#buildings_left_box > .left_box_in .icon-img-div,
.special_offer_left_box > .left_box_in .icon-img-div,
#upgrades_left_box > .left_box_in .icon-img-div,
#pool_left_box > .left_box_in{
    margin:0px;
}
#buildings_left_box .multi-tile-image-div{
    margin: 0px;
}
.overflow-hidden{
    overflow: hidden;
}
.noshadows .left_box_in{
    box-shadow: none; 
}
.satellite_offer_div{
    margin-top:7px;
}
.satellite_offer_div .left_box_in{
    box-shadow: 0px 0px 6px rgba(250,40,0,0.95);   
}

.premium_building_img {
    margin: 0px;
    box-sizing: content-box;
    position: relative;
    display: inline-block;
}
.premium_building_img >div{
    position: absolute;
    left:5px;
    bottom:0px;
}


.premium-building-table{
    margin-top: 10px;
}
.premium-building-table .multi-tile-image-div>div>div, .multi-tile-image-div>div>div{
    position: absolute;
    bottom:0px;
    border-radius: 10px;
}


.premium-building-table{
    margin-left: auto;
    margin-right: auto;
}

#scb_div > .starter-pack-leftbox{
    background-color: #31124c;
    border-radius: 10px;
    border:3px #debef4 solid;
    color: var(--light-color-2);
    padding: 0px;
}
.sp-lb-clickers{
    white-space: nowrap;
    height:55px;
    line-height:60px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -1px;
    position: relative;
}
.sp-lb-clickers > div.text-in{
    position: relative;
    z-index: 2;
}
.sp-lb-clickers > div.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    transform: rotate(180deg);
    background-image: url('../images/ui/offer_light.png');
    background-repeat: no-repeat;
    /* background-position: center; */
    background-size: 250px 125px;
    background-position: -87px -29px;
    z-index: 0; 
}
.sp-lb-text{
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 10px;
    font-weight: 700;
    padding-left: 3px;
    padding-right: 3px;
}
@media only screen and (min-width: 500px) {
    .sp-lb-text{
        font-size: 12px;
    }
}



#header_packages{
    left:-90px;
    top:60px;
    width:80px;
    position: absolute;
    /* display: none; */
    transition: 1s;
}
#header_packages > div{
    filter: drop-shadow(6px 6px 8px rgba(0,0,0,0.7));   
    
}


.package-div{
    text-align: center;
    background-color: antiquewhite;
    border: 1px black solid;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 6px;
    margin:10px;
    margin-bottom:20px;
}

#quick_tool_container{
    z-index: 2;
}
#quick_tool_container2{
    z-index: 1;
}
#quick_tool_container3{
    z-index: 1;
}
.quick_tool_container{
    position: absolute;
    top:calc( 100vh - 170px );
    left:calc( 100vh + 5px);
    transition: 0.5s;
    box-shadow: -2px 4px 6px rgba(0,0,0,0.7);
    color: var(--light-color-2);
    font-weight: bold;
    background-color: var(--dark-color);
    border:1px var(--darker-color) solid;
    border-radius: 8px;
}
    
#fps_container{
    position: absolute;
    top:calc( 100vh - 170px );
    left:5px;
    transition: 0.5s;
    box-shadow: -2px 4px 6px rgba(0,0,0,0.7);
    color: var(--light-color-2);
    background-color: var(--dark-color);
    padding:5px;
    white-space: nowrap;
    display: none;
    pointer-events: none;
}
    
.quick_tool_div>div>div>div{
    border-radius: 8px;
}
.quick_tool_div>div{
    margin-bottom: 6px;
}
.quick_tool_div{
    position:relative;
    padding:4px;
    font-size: 10px;
    box-sizing: border-box;
    text-align: center;
    max-width: 79px;
    overflow: hidden;
}

.quick_tool_div > div{
    position:relative;
    height: 70px;
    width: 70px;
}

/* .quick_tool_div > div > div{
    position: absolute;
    bottom:0px;
    left:0px;
    width: 70px;
} */
.quick_tool_icon > div{
    position: absolute;
    bottom:0px;
}


.upsale-div{
    border:1px black solid;
    box-sizing: border-box;
    text-align: left;
    padding:3px;
    padding-right:65px;
    min-height:50px;
    margin:3px;
    margin-bottom:6px;
    position: relative;
    overflow: hidden;
    /* background-color: rgba(137, 43, 226, 0.186); */
    background-color: var(--light-purple);
    
}
.upsale-div-but{
    position: absolute;
    top: 0px;
    right: 0px;
    height:100%;
    width:50px;
    padding-left: 5px;
    padding-right: 5px;
    border-left:1px black solid;
    background-color: var(--light-color-2);
}
.upsale-div-but .pulsableSmall{
    position: relative;
    left:7px;
    top:calc(50% - 18px);
}
.possible-upgrades-label{
    font-weight: bold;
    margin-left: 6px;
}
.upsale-bottom-line{
    position: absolute;
    width:calc(100% + 2px);
    left:-1px;
    bottom:-4px;
    height: 3px;
    background-color: var(--bottom-line);
}
.button::first-letter, label::first-letter, .caps1, .caps1single::first-letter{
    text-transform: capitalize;
}
    
    



.info-tile-img{
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    padding:5px;
    margin: 5px;
    background-color: beige;
    max-height: 150px;
    border: 1px black solid;
    border-radius: 3px;
}
.info-tile-img>div{
    position: absolute;
    bottom:5px;
}

.info-tile-img2{
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    padding:5px;
    margin: 5px;
    /* background-color: beige; */
    max-height: 150px;
}
.info-tile-img2.alphatile{
    background-color: transparent;
 }
.info-tile-img2>div{
    position: absolute;
    bottom:5px;
}

.info-tile-img3{
    position: relative;
    display: inline-block;
    box-sizing: content-box;
}
.info-tile-img3>div{
    position: absolute;
    bottom:5px;
}
.settlement-icon{
    display:inline-block;
    margin-right:3px;
    position: relative;
    top:6px;
}


.multi-tile-image-div{
    margin: 5px;
    box-sizing: content-box;
    position: relative;
    display: inline-block;
}
.multi-tile-image-div>div{
    position: absolute;
    left:-5px;
    bottom:0px;
}


.absolute-left-info{
    border:1px green solid;
    color:green;
    background-color:rgba(1, 155, 1, 0.237);
    display: inline-block;
    position: absolute;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
    width:13px;
    height:13px;
    line-height: 13px;
    left:-25px;
    top:0px;
    box-sizing: content-box;
    padding:2px;


}


.tab-table{
    width:calc(100% + 18px);
    border-radius: 10px;
    position: relative;
    top:-5px;
    transform: translate(-9px,0px);
}
.tab-table .tab-tr>th{
    border-top:2px var(--dark-color) solid;
    border-left:2px var(--dark-color) solid;
    border-bottom:2px var(--dark-color) solid;
    text-transform: uppercase;
    height:24px;
    background-color: #bfb991;
    position:sticky;
    top:-5px;
    z-index:1;
    padding-top:3px;
    box-sizing: content-box;
    overflow: hidden;
}
.tab-up-line{
    position: absolute;
    top:0px;
    height: 3px;
    width: 100%;
    background-color: #d6d2b8;
}
.tab-table .tab-tr>th:first-child{
    
    border-left:none;
}
.tab-table .tab-tr>th:last-child .tab-up-line{
    width: calc(100% - 1px);
}

.tab-table .tab-tr>td{
    /* border:2px var(--dark-color) solid; */
    border-bottom:none;
    border-top:none;
    padding:8px;
}

.red-span{
    color:#b03432;
    font-style: italic;
    font-weight: bold;
    font-size: larger;
}
.label-span{
    color: var(--dark-color);
    font-weight: bold;
    font-size: larger;
}


#town_labels:empty, .town_label:empty{
    display:none;
}
#town_labels{
    position:absolute;
    left:0px;
    top:0px;
    z-index: 1;   
}
.town_label{
    white-space: nowrap;
    display: inline-block;
    left:0px;
    top:0px;
    position:absolute;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px;
    padding:6px;
    border: 1px var(--cyan) solid;
    background-color: var(--darker-color);
    color:var(--cyan);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.8);   

}


#book_container{
    position: relative;
    min-height: 250px;
}
#book_pager{
    /* position: absolute; */
    bottom:0px;
    text-align: center;
    border-top: 1px silver solid;
    width: 100%;
}

#loading_images_info{
    position: absolute;
    color:white;
    padding-top: 40vh;
    text-align: center;
    width: 100%;
    z-index: 0;
}

.town-upgrade-button-effect{
    position: absolute;
    left:50%;
    width:1px;
    pointer-events: none;
}
.town-upgrade-button-effect>div{
    position: relative;
    left:-60px;
    width:120px;
    top:6px;
    height:30px;
    background-color: rgba(0,255,0,0.6);
    animation-name: rozplynutie;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes rozplynutie {
    0%  {
        opacity: 1; 
        transform: scale(1);
    }
    100%  {
        opacity: 0; 
        transform: scale(2);
    }
}


.income-table{
    padding:0px;
    width:100%;
    padding-top:4px;
    padding-bottom:4px;
}
.income-table tr th{
    text-align: right;
}
.income-table tr td{
    padding:0px;
    padding-top:4px;
    padding-bottom:4px;
    background-color: var(--light-color);
    text-align: right;
    border-bottom: var(--bottom-line) 2px solid;
}


.gold-income-table{
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
}
.gold-income-table tr td{
    padding:6px;
    background-color: var(--light-color);
    text-align: right;
    border-bottom: var(--bottom-line) 2px solid;
}



#intro_div{
    height: 100vh;
    width: 100vw;
    background-color: black;
    color:#fc0;
    position: absolute;
    z-index: 9999;
    display: none;
}

#story_container{
    position: absolute;
    display: inline-block;
    text-align: center;
    width: 90vw;
    top:73vh;
    left:calc( 5vw );
}
#story_container_in{
    position: relative;
    box-sizing: border-box;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.8);
    padding:20px;
    display: inline-block;
}
#story_container_in:empty{
    display:none;
}

.caps{
    text-transform: uppercase;
}
.nowrap, .no-line-wrap{
    white-space: nowrap;
}
@media only screen and (max-width: 320px) {
    .no-line-wrap{
        font-size: 12px;
        margin-left: -15px;
        padding-left: 0px;
    }
    .no-line-wrap .button{
        min-width: unset;
        padding:5px;
    }
}

#story_button{
    position: absolute;
    top:90vh;
    width: 200px;
    left:calc( 50vw - 100px);
    box-sizing: border-box;

    text-transform: capitalize;
    /* background-color: #ddd; */

    padding:10px;
    display: inline-block;
    opacity: 0;
    text-align: center;

    font-size: 16px;
    color: white;
    font-weight: bold;
    border:4px white solid;
    text-transform: uppercase;


    animation-delay: 0.5s;
    animation-duration: 1.2s;
    animation-fill-mode: both;
}
@keyframes fadeIN {
    0%  {opacity: 0; }
    100%  {opacity: 1; }
}

.fadeOut{
    pointer-events: none;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeOUT;
}
@keyframes fadeOUT {
    0%  {opacity: 1; }
    100%  {opacity: 0; }
}
#story_image{
    height: 100vh;
    position: absolute;
}
#story_image_hack{
    height: 100vh;
    position: relative;
    opacity: 0;
}
#story_image_container{
    display: inline-block;
    position: relative;
}

#story_image.animatedStory1{
    animation-name: animStory1;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes animStory1 {
    0%  {left: 0px }
    100%  {left: calc(100vw - 100%); }
}

#story_image.animatedStory2{
    animation-name: animStory2;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes animStory2 {
    0%  {left: calc(100vw - 100%); }
    100%  {left: 0px; }
}

#story_image.animatedStory4{
    animation-name: animStory4;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    left: calc(50vw - 50%);
}
@keyframes animStory4 {
    0%  {scale: 1; top:0px;}
    100%  {scale: 2.4; top:170px;}
}

#storyLight{
    width: 100vw;
    height: 100vh;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 1000;
    pointer-events: none;
}

.storyLightAnimClass{
    animation-name: storyLightAnim;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes storyLightAnim {
    0%  {background-color: transparent; }
    33%  {background-color: #e8c0c1; }
    66%  {background-color: #fff8f8; }
    100%  {background-color: transparent; }
}

.button{
    display: inline-block;
    cursor:pointer;
    padding:8px;
    padding-left:16px;
    padding-right:16px;
    box-sizing: content-box;
    min-width: 70px;
    margin:5px;
    text-align: center;
    position: relative;
    /* box-shadow: 1px 3px 7px rgba(0,0,0,0.5); */
    border: 3px var(--dark-color) solid;
    /* background-color: rgb(209, 243, 209); */
    font-weight: bold;
    text-decoration: none;
    color: var(--dark-color);
}

.button-bottom-line {
    position: absolute;
    width:calc(100% + 6px);
    left:-3px;
    display: inline-block;
    background-color: var(--bottom-line);
    height:4px;
    bottom:-7px;
}

.button.small{
    padding:1px;
    padding-left:12px;
    padding-right:12px;
    font-size: 9px;
    min-width: 40px;
}
.super_button{
    background-color: var(--light-color-2);
    border: none;
    font-size: larger;
}
.supper_button_wrapper{
    display: inline-block;
    box-sizing: border-box;
    background-color: #d6d2b8;
    
    border-radius: 8px;
    border: 3px var(--dark-color) solid;
    box-shadow: 0px 0px 0px 4px #d6d2b8;
    padding:2px;
    margin:5px;
    position: relative;
    top:2px;
}
.supper_button_wrapper > .button{
    padding-top:6px;
    padding-bottom:6px;
    margin:0px;
    border-radius: 4px;
}

.super-button-green{background-image:linear-gradient(to bottom, #4ebc5f, #387b41);}
.super-button-green > div.super_button{background-image:linear-gradient(to bottom, #69f686, #58d76e);}

.super-button-purple{background-image:linear-gradient(to bottom, #9e52f9, #e085e9);}
.super-button-purple > div.super_button{background-image:linear-gradient(to bottom, #e287e8, #995fdf);}

.super-button-teal{background-image:linear-gradient(to bottom, #589b9a, #95ecec);}
.super-button-teal > div.super_button{background-image:linear-gradient(to bottom, #81cccc, #5ebab8);}

.super-button-red{background-image:linear-gradient(to bottom, #d64d4c, #fd775a);}
.super-button-red > div.super_button{background-image:linear-gradient(to bottom, #fe785b, #d54c4b);}

.super_button.disabled {background-image:linear-gradient(to bottom, #c0c0c0, #939393) !important;}
.super_button.disabled > div.super_button{background-image:linear-gradient(to bottom, #939393, #c0c0c0) !important; }

.supper_button_wrapper.disabled{ 
    background-image:linear-gradient(to bottom, #939393, #c0c0c0) !important;
    /* border: 3px #696969 solid; */
}

.button .icon-img-div{
    margin-top: -7px;
}


.teasing_desc{
    /* border: 1px black solid; */
    padding:8px;
    font-size: 14px;
    margin:8px;
    margin-top:4px;
    margin-bottom:6px;
    color: var(--light-color-2);
    background-color: var(--dark-color);
}


.restoration_header_div{
    position: relative;
    
}
.restoration_header_div .absolute-left-info{
    top:4px;
}





#starter_packs_container, #packs_container{
    text-align: center;
    width:calc(100% + 12px);
    left:-6px;
    position: relative;
}

#packs_container{
    width:calc(100%);
    left:0px;
    background-color: #4f2277;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-sizing: border-box;
    padding-left:8px;
    padding-right:8px;
    padding-bottom: 10px;
}
.double-sale-up,.double-sale-down{
    display: inline-block;
    padding:6px;
    padding-top:2px;
    padding-left:26px;
    padding-right:26px;
    border-top:5px solid #e3bf39;
    background-color: #ffde51;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color:var(--darker-color);
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.double-sale-down{
    display: block;
    width: 100%;
    text-align: center;
}

.basic-pack{
    width:calc(50% - 20px);
    border:3px var(--light-color-2) solid;
    border-radius: 10px;
    padding-top:10px;
    margin:10px;
    
    font-size: 16px;
    box-sizing: border-box;
    display: inline-block;
    background-color: #31124c;
    position: relative;
}
.basic-pack-img-bg{
    width:100%;
    position: absolute;
    left:0px;
    top:0px;
}
.basic-pack-img-div{
    text-align: center;
}
.basic-pack-img{
    position: relative;
    display: inline-block;
    z-index: 2;
}
.pack_reward{
    font-size: 36px;
    margin-top: -8px;
    margin-bottom: 8px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    color: var(--light-color-2);
}
.basic-pack-cost{
    color: var(--light-color-2);
    margin-top: 4px;
    background-color: #6d34a1;
    font-size: 18px;
    font-weight: 500;
    padding-top: 8px;
    padding-bottom: 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.basic-pack .label{
    position:absolute;
    top:-3px;
    right:10px;
    width:110px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--light-color-2);
    z-index: 3;    
}
.basic-pack .label-img{
    position:absolute;
    top:-9px;
    right:10px;
    width:110px;
    z-index: 2;
}


@media only screen and (max-width: 425px) {
    .pack_reward{
        font-size: 24px;
    }
}






.starter-pack{
    width:91%;
    padding:5px;
    padding-top:25px;
    padding-bottom:5px;
    margin:5px;
    margin-top:15px;
    margin-bottom:0px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    
    border:3px var(--light-color-2) solid;
    border-radius: 10px;
    background-color: #31124c;
}

.starter_pack_label{
    font-weight: 500;
    font-size: 18px;
    position: absolute;
    top:0px;
    width:200px;
    left: calc(50% - 100px );
    height: 26px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #31124c;
    padding-bottom:13px;
    color: var(--light-color-2);
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.starter_pack_bg_image{
    width:70%;
    position: absolute;
    top:0px;
    left: 15%;
    z-index: 0;
}

.starter_pack_reward{
    position: relative;
    padding-top: 18px;
    z-index: 2;
    color: var(--light-color-2);
    font-size: 24px;
    font-weight: 500;
    padding-bottom: 18px;
}

.starter_pack_cost{
    background-color: #7239ac;
    border: 3px var(--light-purple-2) solid;
    border-radius: 10px;
    z-index: 2;
    position: relative;
    display: inline-block;
    margin-top:16px;
    padding:6px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    color: var(--light-color-2);
}

.starter_pack_bottom_effect{
    position: absolute;
    z-index: 0;
    bottom: 22px;
    width: 100%;
    left:0px;
    height: 30px;
    background-size: auto 30px;
    background-image: url('../images/ui/offer_buildings.png');
    
}

.starter_pack_bottom_effect2{
    position: absolute;
    z-index: 0;
    bottom: 0px;
    width: 100%;
    height:23px;
    background-color: var(--light-purple-2);
    left:0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}













.arrow_left{
    display: inline-block;
    top:5px;
    position: relative;
    animation-duration: 1.5s !important;
    margin-left:10px;
    transform: rotate(180deg );
}
.arrow_right{
    display: inline-block;
    top:5px;
    position: relative;
    animation-duration: 1.5s !important;
    margin-left:10px;
}
.arrow_left.disabled, .arrow_right.disabled{
    opacity: 0.5;
    filter: grayscale(1);
}
.teasing-arrows{
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 1px;
    left:-5px;
    top:25px;
}
.teasing-arrows>div{
    position: absolute;
}


.pulsableBig{
    animation-name: bigPulseAnim;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.pulsableBig2{
    display:inline-block;
    animation-name: bigPulseAnim;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes bigPulseAnim {
    0%  {scale: 1; }
    25%  {scale: 1.5;}
    50%  {scale: 1;}
}

.pulsableSmall2{
    animation-name: smallPulseAnim;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pulsableSmall{
    animation-name: smallPulseAnim;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes smallPulseAnim {
    0%  {scale: 1; }
    15%  {scale: 1.2;}
    30%  {scale: 1;}
}

.slidecontainer{
    position: relative;
    top:5px;
    margin-left:10px;
    display: inline-block;
}

.level-up{
    text-align: center;
    background-color: var(--darker-color);
    transform: translate(-10px,-10px);
    padding-top: 15px;
    position: relative;
    width: calc(100% + 20px);
    box-sizing: border-box;
}
.level-up-bg{
    position: absolute;
    left: 0px;
    top: -15px;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.level-up-bg>div{
    /* background-image: url('../images/ui/offer_light.png'); */
    background-image: url('../images/effects/click_gem_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 500px;
    width: 500px;
    left: calc(50% - 250px);
    position:absolute;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-name: rotation;
    animation-iteration-count: infinite;
}

@keyframes rotation {
0%  {transform: rotate(0deg);}
100%  {transform: rotate(360deg);}
}

.level-up-nfu{
    margin-top: 20px;
    border-radius: 10px;
    background-color: var(--light-color-2);
    color: var(--darker-color);
    font-size: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    position: relative;
    z-index: 2;
    font-weight: bold;
}

.level-up-popup{
    background-color: #31343b;
}

.level-up-popup hr{
    border:5px solid var(--light-color-2);
    border-radius: 5px;
}
.level-up-popup .info-tile-img2{
    border: none !important;
}
.level-number{
    color: var(--light-color);
    font-size: 28px;
    position: absolute;
    text-align: center;
    left:0px;
    width: 100%;
    top:50px;
    font-weight: bold;
}
.bottom-info{
    color: var(--light-color);
    font-size: 11px;
}
.check-inbox{
    color: var(--light-color-2);
    font-size: 20px;
    text-align: center;
    padding-bottom: 45px;
}

.my_time{
    white-space: nowrap;
}

#main_town_quest_div:empty{
    display:hidden;
}
#main_town_quest_div{
    position: absolute;
    background-color: var(--light-color-2);
    border: 3px var(--light-color) solid;
    border-bottom: 15px var(--light-color) solid;
    border-radius: 10px;
    padding:20px;
    padding-bottom:10px;
    font-size: 12px;
    box-sizing: border-box;
    color: var(--darker-color);
    text-align: center;
    display: none;
    /* max-width: 90vw; */
}

#main_town_quest_div .pin{
    position: absolute;
    bottom:-32px;
    width:26px;
    left: calc(50% - 12px);
}

.close-quest{
    color:var(--bottom-line);
    position: absolute;
    right:5px;
    top:-2px;
    font-size: 16px;

}

.expires-in, .expires-in-so{
    background-color: #81cdcd;
    border-radius: 10px;
    margin-top: 15px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: -8px;
    padding-top:12px;
    padding-bottom:12px;
    font-size: 14px;
}
.expires-in-so{
    background-color: #ffde52;
}
.hr-in-popup{
    margin-left: 8px;
    margin-right: 8px;
    border: solid 2px var(--light-color);
}
.hr-in-popup-bold{
    margin-left: -10px;
    margin-right: -10px;
    border: solid 3px var(--light-color);
}
.popup-in-block,.popup-in-block-2{
    margin-left: 8px;
    margin-right: 8px;
    background-color: var(--light-color);
    border-radius: 10px;
    padding: 8px;
    padding-top:12px;
    padding-bottom:12px;
}
.popup-in-block-2{
    background-color: var(--light-color-2);
}
.black-friday-inner-block{
    background-color:var(--dark-2);
    border-radius: 12px;
    padding:8px;
    padding-top:16px;
    padding-bottom:16px;
}
.so-mat-reward{
    display: inline-block;
    padding:8px;
    margin-left:8px;
    margin-right:8px;
    font-size: 24px;
    font-weight: bold;
    color: var(--light-color-2);
}
.red-line-div{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
}
.red-line-div>div{
    left:0px;
    position: absolute;
    width: 100%;
    border-top:4px solid #ff5555;
    top:45%;
}
.so-bought-div, .so-bought-div-2{
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    padding: 8px;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 12px;
    margin-bottom: 8px;
    background-color: var(--light-color);
    border-radius: 12px;
}
.so-bought-div-2{
    padding-top: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 14px;
}
.premium-upgrade-table{
    margin-left: 8px;
    margin-right: 8px;
}
.premium-upgrade-table .icon-img-div>div{
    border-radius: 10px;
}
.premium-upgrade-table tr td:first-child{
    padding-right:6px;
}
.premium-upgrade-table tr td:last-child{
    text-align: left;
    font-size: 16px;
    padding:12px;
    background-color: var(--light-color);
    border-radius: 10px;
}


.news-bg{
    background-color: var(--darker-color);
    padding-left: 0px;
    padding-right: 0px;
}
.news-title{
    font-weight: 500;
    color: var(--light-color-2);
    font-size: calc(min(36px,7vw));
    letter-spacing: -1px;
    width:100%;
    margin-top:-5px;
    margin-bottom:-3px;
}

.news-title2{
    font-size: 24px;
    color: var(--darker-color);
    background-color: #ffde51;
    padding:5px;
    padding-left:12px;
    border-bottom: 4px solid #e2c33e;
    margin-bottom:3px;
}
.news-title3{
    background-color: var(--light-color);
    display: inline-block;
    margin-right:6px;
    padding:6px;
    padding-left:25px;
    font-size: 16px;
    height: 100%;
}
.news-table{
    width:100%;
}

.news-border-top{
    border-top: 6px solid #3d3e43;
    border-bottom: 6px solid var(--darker-color);
}

.news-body{
    position: relative;
    background-color:var(--light-color-2);
    margin-top: -6px;
    margin-bottom: -6px;
    padding:25px;
    font-size: 18px;
    word-wrap: break-word;
    max-width: min(95vw, 590px);
    box-sizing: border-box;
}
.news-zobacik-1{
    position: absolute;
    right:-14px;
    top:8px;
    scale: 0.5;
}
.news-zobacik-2{
    scale: 0.5;
    bottom:5px;
    left:-11px;
    position: absolute;
    transform:  rotate(180deg);
}
.news-zobacik-3{
    scale: 0.5;
    position: absolute;
    transform:  rotate(90deg);
    bottom:-17px;
    right:120px;
}

.news-footer{
    background-color: var(--light-color);
    margin-top: -6px;
    width: 100%;
    padding:0px;
    position: relative;
    box-sizing: content-box;
}
.news-footer .click-span{
    color:var(--darker-color);
}
.news-footer table{
    width: 100%;
}

@media only screen and (max-width: 350px) {
    .news-title2{
        font-size: 16px;
    }
    .news-title3{
        padding-left:5px;
        font-size: 12px;
    }
    .news-body{
        font-size: 14px;
    }
       
}


.popup-brown-header, .offline-overview{
    background-color: var(--light-color);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:-2px;
    width: 80%;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.offline-flex-container{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.offline-flex-container>div{
    font-weight: bold;
    font-size: 14px;
    min-width: 40%;
    padding-bottom: 10px;
}
.visit_friend_but{
    display: inline-block; 
    margin:5px; 
    padding:5px;
    
}
.building_in_pack{
    position: relative;
    top:7px;
}
.shift_text_image_y{
    position: relative;
    top:12px;
}



.header-event-fish{
    border:1px var(--cyan) solid;
}
.header-event-fish > span{
    position: relative;    
    top:-8px;
}
.header-event-fish .icon-img-div{
    position: relative;
    top:8px !important;
}

.ms-header{
    background-color: var(--darker-color);
    aspect-ratio: 60 / 15;
    position: relative;
    margin-bottom: max(-5vw , -15px);
    top:-9px;
}
.ms-header-line{
    position: absolute;
    height: 50%;
    width:2.5%;
    left:10.5%;
    bottom:0px;
    background-color: var(--light-color-2);
    z-index: 1;
}

.ms-header-circle{
    position: absolute;
    justify-content:center;
    display: flex;
    align-items: center;
    top:18%;
    left:4%;
    width: 15%;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: var(--light-color-2);
    z-index: 2;
}
.ms-header-label{
    display: flex;
    justify-content:center;
    align-items: center;
    position: absolute;
    right:7%;
    top:0px;
    width:66%;
    height: 100%;
}
.ms-header-label-in{
    font-weight: bold;
    color: var(--light-color-2);
    border-top: min(1vw, 5px) solid var(--light-color-2);
    border-bottom: min(1vw, 5px) solid var(--light-color-2);
    padding-top: 3px;
    padding-bottom: 4px;
    font-size: min(4.2vw, 36px);
    text-transform: uppercase;
    white-space: nowrap;
}

.ms-body-container{
    position: relative;
    background-color: var(--darker-color);
}
.ms-container{
    /* background-color: var(--dark-color); */
    position: relative;
    height:120px;
    /* z-index: 1; */
}
.ms-bottom-container{
    aspect-ratio: 60 / 12;
    background-color: var(--darker-color);
    position: relative;
    box-sizing: border-box;
}
.ms-ship{
    position: absolute;
    z-index: 1;
    width:28%;
    left:5%;
    bottom: 20%;
}
.ms-wave{
    position: absolute;
    left:0px;
    bottom: -1px;
    width: 100%;
    z-index: 2;
}

.xmasheader-text{
    /* asi vymazat lebo uz sa grafik rozhodol pre ine */
    position: absolute;
    left: calc(15% - 10px);
    top: 24%;
    padding:12px;
    font-weight: bold;
    text-align: center;
    color: var(--gold2);
    z-index: 2;
    border-radius: 16px;
    background-color: #333542;
}
.xmasheader-text2{
    display: inline-block;
    width:min(20vw,120px);
    font-weight: bold;
    font-size: min(7vw , 22px);
    color: var(--gold2);
    text-align: center;
}
.xmasheader{
    position:relative;
    left:-6px;
    top:11px;
    margin-top:-8px;
    margin-bottom:-1px;
    background-color:var(--dark-2);
    width:calc(100% + 12px);
    border-top-left-radius:12px;
    border-top-right-radius:12px;
}

.ms-limit{
    position: absolute;
    left:3%;
    width:16%;
    box-sizing: border-box;
    padding:3px;
    padding-top:6px;
    padding-bottom:6px;
    font-size: min(2.3vw , 10px);
    top: calc(50% - 14px);
    z-index: 6;
    border-radius: 8px;
    background-color:var(--dark-color);
    color: var(--light-color-2);
    border: 2px solid var(--light-color-2);
    text-align: center;
    font-weight: bold;
}
.ms-limit.ms-done{
    background-color:#76c4c3;
    color: var(--dark-color);
}

.ms-line-hor-white, .ms-line-hor-teal{
    position: absolute;
    height: 6px;
    width:calc(15.2% + 3px);
    /* width:2.5%; */
    background-color: var(--light-color-2);
    left:10.5%;
    top:calc(50% - 3px);
}
.ms-line-hor-teal{
    background-color: #74c2c2;
}
#ms_my_white_line, #ms_my_teal_line, .ms-line{
    position: absolute;
    height: 100%;
    width:2.5%;
    background-color: #74c2c2;
    left:10.5%;
    top:0px;
}

.ms-line.ms-line-status-white, #ms_my_white_line{
    background-color: var(--light-color-2);
}
.ms-line.ms-line-status-half{
    height: 50%;
    background-color: var(--light-color-2);
    z-index: 1;
}

#ms_my_teal_line{
    z-index: 2;
    height: 110px;
    /* background-color: red; */
    display:none;
}
#ms_my_white_line{
    z-index: 1;
    height: 110px;
    /* background-color: white; */
    display:none;
    
}

.popup_okno_in_2.xmas{
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}

.ms-right-block{
    position: absolute;
    right:3%;
    top:0px;
    height: 100%;
    width:72%;

    /* border:2px red solid; */
    display: inline-block;
}
    
.ms-right-block > div{
    /* border:2px blue solid; */
    height:100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction:row-reverse;
}

.ms-picked{
    margin-right:2vw;
}
.ms-reward>div{
    height:100%;
}
.ms-reward{
    height:70px;
    width:100%;
    border-radius: 8px;
    background-color: var(--light-color-2);
    
}
.ms-reward.ready{
    height:105px;
}
.ms-reward-in-building{
    height:100%;
    display: flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}
.ms-reward.ms-done>div{
    opacity: 0.6;
}
.ms-buildind{
    overflow: hidden;
    border-radius: 8px;
}
#ms_my_value{
    display:none;
    font-size: 9px;
    font-weight: bold;
    padding:3px;
    border-radius: 8px;
    box-sizing: border-box;
    background-color:var(--light-color-2);
    color: var(--dark-color);
    border: 2px solid var(--dark-color);
    position: absolute;
    left:3.5%;
    top:0px;
    width:15%;
    z-index: 7;
}

.xmas-pic-label{
    box-sizing: border-box;
    padding:3px;
    text-transform: uppercase;
    width:calc(100% + 16px);
    position: relative;
    left:-8px;
    
    font-size: 24px;
    font-weight: bold;
    color: #32343b;
    border-top: 5px solid #32343b;
    border-bottom: 5px solid #32343b;
    margin-top: -4px;
    margin-bottom: 14px;
}
.event-block-visit-upgrades{
    background-color: #32343b;
    border-radius: 12px;
    color: var(--light-color-2);
    display: inline-block;
    padding:5px;
    padding-left:25px;
    padding-right:25px;
    margin-bottom: 8px;
}
.black-image-outline{
    position:relative;
    border:4px solid var(--dark-2);
    display: inline-block;
}
.black-image-outline>div{
    position: absolute;
    bottom:0px;
}

.building-overview{
    margin-left: auto;
    margin-right: auto;
}

#expandMapBut{
    position: absolute;
    white-space: nowrap;
}

.event_end_div{
    background-color: #ffde51;
    color:var(--dark-4);
    font-size: 10px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.duration-within-pic{
    position: relative;
    top:-40px;
    margin-bottom: -40px;
}
.duration-full-line{
    position: relative;
    font-size: 12px;
    background-color: #ffde51;
    width:calc(100% + 40px);
    left:-20px;
    /* margin-bottom: -13px; */
    margin-top: -5px;
}

.so-exlusive-reward{
    display: inline-block;
    position: relative;
    border:3px lime solid;
    border-radius: 8px;
    margin:5px;
    margin-top:10px;
    padding-top:12px;
    padding-left:18px;
    padding-right:18px;
    padding-bottom:10px;
    color:var(--light-color-2);
    box-sizing: border-box;
    min-width: 80%;
}
.so-exlusive-reward>div.ser1{
    box-sizing: border-box;
    position: absolute;
    top:-12px;
    text-align:center;
    display: block;
    width: calc(100% - 36px);
    
}
.so-exlusive-reward>div.ser1>div.ser2{
    box-sizing: content-box;
    color: lime;
    display: inline-block;
    position: relative;
    top: -2px;

    background-color: var(--dark-2);
    padding:4px;
}
.so-exlusive-reward-upgrade{
    border:3px var(--gold2) solid;
}
.so-exlusive-reward-upgrade>div.ser1>div.ser2{
    font-size: 13px;
    top: -7px;
    padding:6px;
    color: var(--gold2);
    white-space: nowrap;
}

.golden-starter-label{
    background-image:linear-gradient(to bottom, #ffde52, #d6af15);
    color: var(--dark-4);
    width: calc(100% + 20px);
    left: -10px;
    position: relative;
    padding-top:8px;
    padding-bottom:8px;
    margin-bottom: 5px;;
}

.stomp-effect{
    animation-delay: 0.5s;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-name: stomp_animation;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes stomp_animation {
0%  {
    transform: scale(2.1);
    opacity: 0;
    filter: brightness(6.75)
    grayscale(100%)
    contrast(260%);
    }
20%  {
    filter: brightness(1)
    grayscale(0%)
    contrast(100%);
    }
15%  {
    opacity: 0.4;
    }
30%  {
    opacity: 1;
    transform: scale(1);
    }
}

.stomp-effect2{
    animation-delay: 0.5s;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-name: stomp_animation2;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes stomp_animation2 {
0%  {transform: scale(1.9);opacity: 0;}
15%  {opacity: 0.4;}
30%  {opacity: 1;transform: scale(1);}
}


.train-2d{
    display: flex;
    position: relative;
    margin-top:-10px;
    flex-direction: row-reverse;
    overflow: hidden;
    overflow-x: scroll;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    max-width: 100%;
    scrollbar-width: none;
    height: 55px;
}

.missing-translation{
    text-decoration: underline;
    -webkit-text-decoration-color: rgb(255, 45, 0); /* safari still uses vendor prefix */
    text-decoration-color: rgb(255, 45, 0);
}

.button-img-no-bg, .button-image-basic{
    margin:5px;
    margin-left:15px;
    margin-right:15px;
    background-color: var(--dark-3);
    border-radius: 10px;
    width:80px;
    height:80px;
}

.button-img-no-bg{
    background-color:unset;
    border-radius: unset;
    margin-left:unset;
    margin-right:unset;
}

.popup-brown-footer{
    padding:8px;
    padding-bottom:16px;
    margin-left:-10px;
    margin-right:-10px;
    margin-bottom:-2px;
    text-align: center;
    background-color: var(--light-color);   
    font-size: 13px;    
}

.popup-lighter-div{
    padding:6px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left:-10px;
    margin-right:-10px;
    background-color: var(--light-color);   
    font-size: 13px;    
}

.send-train-block{
    background-color: var(--light-color-2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 16px;
    margin-bottom: 8px;
}
.send-train-block-header-freight, .send-train-block-header-gems, .send-train-block-header-gold, .send-train-block-header-low-level{
    background-color: #ffde52;
    border-bottom: 3px solid #b49b30;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
}
.send-train-block-header-gems{
    background-color: #c6aeff;
    border-bottom: 3px solid #a18ce5;
}
.send-train-block-header-freight{
    background-color: #c9815d;
    border-bottom: 3px solid #99644d;
}
.send-train-block-header-low-level{
    background-color: var(--light-color);
    border-bottom: 3px solid var(--bottom-line);
}

.send-train-block-flex{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}
.send-train-block-flex > div{
    padding: 8px;
    /* padding-top: 8px;
    padding-bottom: 8px; */
    font-size: larger;
    text-align: center;
    flex-grow:1;
}

#footer_save_status{
    background-color: var(--red);
    color: var(--light-color-2);
    font-weight: bold;
    font-size: 18px;
    padding:4px;
    position: absolute;
    bottom:0px;
    left:0px;
    width: 100%;
    text-align: center;
    z-index: 100000;
    pointer-events: none;
    display: none;
    opacity: 0.7;
}

.swapper-header{
    background-color: var(--light-color);
    color: var(--dark-2);
}