body {
    margin: 0;
    background: #cfd6d7;
}
#gameBackground {
     /*background: url('../images/new/warClicks/homepage/tv_2.png?v=3') center;*/
     background: url('../images/new/warClicks/homepage/main_picture_2.jpg') center;

    padding-top: 91px;
    padding-bottom: 21px;
 }
.gpu {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    perspective: 1000px;
    -webkit-perspective: 1000px;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
/* --- END general --- */

#main_container .value_icon {
    display: inline-block;

    margin: 4px 0 0 4px;

    width: 21px;
    height: 20px;

    background: url("../images/value_icon.png");

    vertical-align: top;
}
#main_container .value_icon.points {
    background-position: -21px 0;
}
#main_container .value_icon.gold {
    background-position: 0 0;
}
#main_container .value_icon.bs {
    float: left;

    margin: 4px;

    width: 24px;
    height: 38px;

    background: url("../images/warZone/battle_star.png");

    transform-origin: 0 0;
    transform: scale(0.5);
    margin-right: calc(0px - 24px * 0.5 + 4px);
    margin-bottom: calc(0px - 38px * 0.5 + 4px);
}
#main_container >.top_line {
	position: relative;
    z-index: 988;
    min-width: 1000px;
	height: 48px;

    box-shadow: 0 -1px 2px rgba(0,0,0, 0.5), 0 1px 2px rgba(0,0,0, 0.5);
}
#main_container .top_line >.container {
    position: relative;
    display: none;

    margin: 0 auto;

    width: 1000px;
    height: 100%;
}
#main_container .top_line .container >.icon_holder {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
}
#main_container .top_line .container >.icon_holder.warZone {
    display: none;
}
#main_container .top_line .container .icon_holder >span {
    display: inline-block;

    height: 100%;

    vertical-align: middle;
}
#main_container .top_line .holder {
    position: relative;
    display: inline-block;

    margin: 0 20px 8px 0;
    vertical-align: middle;

    height: 29px;

    border: 1px solid black;
}
#main_container .top_line .name {
    position: relative;

    text-align: right;

    font: 8px/12px 'titilliumWebRegular';
    color: white;

    letter-spacing: 1px;
}
#main_container .top_line .value {
    display: inline-block;

    padding: 0 8px;

    width: 64px;

    font: 16px/29px 'titilliumWebBold';
    color: black;
    text-align: right;

    vertical-align: top;
}
#main_container .top_line .double_dpc {
    position: absolute;

    left: 64px;
    top: -8px;

    font: 16px/16px 'titilliumWebBold';
    color: white;
    text-align: left;

    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#main_container .top_line .holder.buy_amount {
    margin-bottom: 0;

    color: black;

    border: none;

    width: 116px;
    height: 41px;

    background: url("../images/trainingCamp/button_buy.png");
}
#main_container .top_line .holder.buy_amount .amount {
    font: 14px/29px 'titilliumWebBold';
    font-weight: bold;
    text-align: center;

    min-width: 80px;

    padding: 0 8px;
}
/*mislm da ne obstaja*/
#main_container .top_line .holder.buy_amount:hover {
    color: white;
    background-position-y: -41px;

    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder >.info {
    position: absolute;
    width: 150%;

    bottom: -7px;
    left: -25%;

    font: 12px/12px 'titilliumWebSemiBold';
    color: white;
    text-align: center;

    text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black;
}
#main_container .top_line .holder.video {
    margin-top: -2px;

    border: none;

    width: 42px;
    height: 44px;

    background: url("../images/top_icons_new.png") -162px 0;

    transform: scale(0.8);
}
/*se ne uporablja več*/
#main_container .top_line .holder.video:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder.convert {
    margin-top: -2px;

    border: none;

    width: 44px;
    height: 44px;

    background: url("../images/top_icons_new.png") 0 0;
    transform: scale(0.8);
}
/*se ne uporablja več*/
#main_container .top_line .holder.convert:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder.upgrades {
    margin-top: -2px;

    border: none;

    width: 44px;
    height: 44px;

    background: url("../images/top_icons_new.png") -54px 0;
    transform: scale(0.8);
}

/*se ne uporablja več*/
#main_container .top_line .holder.upgrades:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder.shop {
    margin-top: -2px;

    border: none;

    width: 54px;
    height: 44px;

    background: url("../images/top_icons_new.png") -108px 0;
    transform: scale(0.8);
}
/*se ne uporablja več*/
#main_container .top_line .holder.shop:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder.shop .discount {
    position: absolute;
    background: black;
    top: -10px;
    color: #fff;
    font: 12px/12px 'titilliumWebSemiBold';
    padding: 5px;
    border: 1px solid #fff;
    left: 20px;
}
#main_container .top_line .holder.profile {
    margin-top: -2px;

    border: none;

    width: 47px;
    height: 44px;

    background: url("../images/top_icons_new.png") -216px 0;
    transform: scale(0.8);
}
#main_container .top_line .holder.profile:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder.milestones {
    margin-top: -2px;

    border: none;

    width: 47px;
    height: 44px;

    background: url("../images/top_icons_new.png") -270px 0;
    transform: scale(0.8);
}
#main_container .top_line .holder.milestones:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .holder.settings {
    margin-top: -2px;

    border: none;

    width: 54px;
    height: 44px;

    background: url("../images/top_icons_new.png") -324px 0;
    transform: scale(0.8);
}
#main_container .top_line .holder.settings:hover {
    transform: scale(1.0);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}

#main_container .top_line .holder.inactive {
    opacity: 0.0;
    pointer-events: none;
}
#main_container .top_line .holder.game {
    float: right;

    margin-top: -18px;

    height: 65px;
    border: none;
}
#main_container .top_line .switch_game {
    display: none;

    width: 164px;
    height: 65px;
    background: url("../images/switch_game_button.png");
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#main_container .top_line .switch_game.warZone {
    width: 115px;
    background-position: -49px 0;
}
#main_container .top_line .switch_game.trainingCamp {

    margin-left: -30px;
    background-position: -164px 0;
}
#main_container .top_line .switch_game:hover {
    background-position-y: -65px;
}
#main_container .top_line .menu_quality {
    position: absolute;
    display: none;
    z-index: 1000;

    right: 10px;
    top: 40px;

    width: 90px;
    height: 75px;

    border-radius: 4px;

    background: #ee1d25;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);

    font: 14px/18px 'titilliumWebBold';
    font-weight: bold;
    text-align: left;
    color: white;
}
#main_container .top_line .menu_quality ul {
    list-style: none;
    padding: 10px 10px;
}
#main_container .top_line .menu_quality ul li.selected {
    color: #9e1d23;
    text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
}
#main_container .top_line .menu_quality ul li:hover:not(.selected) {
    color: #ee1d25;
    text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
}
#main_container .top_line .menu_quality ul li:before {
    content: "■";
    padding-right: 4px;
    color: white;
}
@keyframes switchGame {
    0%      { opacity: 1.00; }
    50%     { opacity: 0.25; }
}
@keyframes videoIcon {
    0%      { opacity: 0.25; }
    50%     { opacity: 1.00; }
    100%    { opacity: 0.25; }
}

/* TODO */
#game_holder {
    overflow:hidden;
    position: relative;
    height: 550px;
    margin: 0 auto;
    top: 15px;

    border: 1px solid #999999;
}
#game_holder .black_arrow {

    display: inline-block;
    height: 52px;

    padding-right: 76px;
    padding-left: 50px;

    background: url("../images/new/warClicks/clouds/title.png");
    background-size: 100% 100%;

    font: 23px/51px 'titilliumWebBold';
    color: white;

    text-align: center;
}
#game_holder .black_arrow:not(.margined) {
    padding-left: 16px;
}
#game_holder .black_arrow.short {
    padding-left: 50px;
}
#game_holder .black_arrow .icon {
    display: inline-block;
    float: left;

    margin-left: -43px;
    margin-top: 6px;

    width: 39px;
    height: 39px;

    background: url("../images/new/warClicks/wc_splosno/sp_3_cloud_info_min.png") 0 0;
}
#game_holder .black_arrow .icon.video {
    background-position-x: 0;
}
#game_holder .black_arrow .icon.convert {
    background-position-x: -78px;
}
#game_holder .black_arrow .icon.trainers {
    background-position-x: calc(0px - 2 * 68px);
}
#game_holder .black_arrow .icon.deploy {
    background-position-x: 117px;
}
#game_holder .black_arrow .icon.investors {
    background-position-x: calc(0px - 4 * 68px);
}
#game_holder .black_arrow .icon.upgrades {
    background-position-x: calc(0px - 5 * 68px);
}
#game_holder .black_arrow .icon.ppGain {
    background-position-x: 39px;
}
#game_holder .black_arrow .icon.milestones {
    background-position-x: calc(0px - 7 * 68px);
}
#game_holder .arrow_white {
    position: relative;
    display: inline-block;

    vertical-align: middle;

    width: 120px;
    height: 73px;

    background: url('../images/arrow_white.png');

    transform-origin: 0 0;
    transform: scale(0.45);

    margin-right: calc(0px - 120px * 0.55 + 10px);
    margin-bottom: calc(0px - 73px * 0.55);
}
#game_holder .alineja {
    position: relative;
    display: inline-block;

    vertical-align: middle;

    width: 15px;
    height: 16px;
    background: url('../images/new/warClicks/clouds/alineja.png');
    margin-right: 14px;
}
#game_holder .x {
    position: absolute;
    top: 2px;
    right: 18px;

    width: 36px;
    height: 36px;

    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
}
#game_holder .x.white {
    background-position-x: 36px;
}
#game_holder .x:hover {
    background-position-y: -36px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#game_holder .signPost {
    position: absolute;

    right: 144px;
    bottom: -5px;

    font: 16px/57px 'titilliumWebBold';
    color: #231f20;
    text-align: center;

    width: 118px;
    height: 59px;

    background: url("../images/sign.png");
    transform: scale(0.8);
}
#game_holder .tabla {
    text-align:center;
    /*display: none;*/
    bottom: 3px;
    font: 13px/15px 'titilliumWebSemiBold';
    color: #231f20;
    /*width: 573px;
    height: 64px;*/
    width: 426px;
    height: 58px;
    /*background: url("../../assets/images/new/warClicks/weekly_competitions.png");*/
    background: url("../../assets/images/new/warClicks/user_rankings.png");
}
#game_holder .tabla .country-details {
    position: relative;
    /*z-index: 10;*/
}
#game_holder .tabla .country-details.unregistered:hover{
    /*cursor: pointer;*/
    color: #ffffff;
    /*z-index: 10;*/
}
#game_holder .tabla .left-banner{
     height:62px;
     width:210px;
     float:left;
     margin-left:14px;
     margin-top:15px;
}
#game_holder .tabla .left-banner .banner-logo{
    position: absolute;
    width:45px;
    height:62px;
    text-align:center;
}
#game_holder .tabla .left-banner .banner-logo .badge {
    width: 27px;
    height: 50px;
    margin-top: 6px;
    display: inline-block;
    background: url('../images/badge.png') 0 0;
}
#game_holder .tabla .left-banner .motivational-text{
    position:absolute;
    left:52px;
    width:167px;
    color:white;
    font: 9px/13px 'titilliumWebBold';
    top:21px;
}
#game_holder .tabla .left-banner .more-link{
    text-decoration:none;
    display:block;
    position:absolute;
    left:76px;
    top:54px;
    width:167px;
    color:white;
    font: 10px/15px 'titilliumWebBold';
    z-index:10;
}
#game_holder .tabla .left-banner .more-link:hover{
    color:red;
}
#game_holder .tabla .right-ratings{
    height: 41px;
    width: 378px;
    float: left;
    margin-top: 15px;
}
#game_holder .tabla .right-ratings .leftA{
    display: block;
    margin-top: 3px;
    margin-left: -9px;
    color: white;
}
#game_holder .tabla .right-ratings .time-left{
    font: 9px/13px 'titilliumWebBold';
    color: white;
}
#game_holder .tabla .right-ratings .right{
   margin-top: -16px;
}
#game_holder .tabla .right-ratings .left{
    margin-top:-16px;
}
#game_holder .tabla .right-ratings > div{
    display: inline-block;
    /*height: 63px;*/
    width: 33%;
    float: left;
}
#game_holder .tabla .right-ratings .round-details{
    margin-top: 2px;
    margin-left: 3px;
}
#game_holder .tabla .right-ratings .user-details-middle{
    margin-top: 8px;
    margin-left: 30px;
    text-align: left;
}
#game_holder .tabla .right-ratings .user-details-middle > a{
    color: white;
}
#game_holder .tabla .right-ratings .user-details-right-middle{
    margin-top: 8px;
    margin-left: 28px;
}
#game_holder .tabla .right-ratings .user-details-right-middle a{
    color:white;
}
#game_holder .tabla .right-ratings .you-are-first-text {
    font: 12px/13px 'titilliumWebSemiBold';
    color: white;
}
#game_holder .tabla .right-ratings .you-are-first-text-country {
    font: 10px/13px 'titilliumWebSemiBold';
    /*color: black;*/
    color: white;
}
#game_holder .tabla .country-details{
    text-align: left;
    margin-top: 24px;
    margin-left: 32px;
}
#game_holder .tabla .country-details a{
    color: white;
}
#game_holder .tabla .user-score-details{
    margin-top: 8px;
    text-align: left;
}
#game_holder .tabla .left{
    display: inline-block;
    margin-top: 2px;
}
#game_holder .tabla .leftB{
    display: inline-block;
    margin-top: 3px;
    margin-left: 18px;
}
#game_holder .tabla .leftB.fromTo{
    font: 10px/13px 'titilliumWebRegular';
    text-align:left;
}
#game_holder .tabla .round-details .leftB.fromTo {
    margin-left: 24px;
    font-size: 9px;
    color: white;
}
#game_holder .tabla b{
    font: 12px/14px 'titilliumWebSemiBold';
}
#game_holder .tabla .fromTo{
    font: 10px/13px 'titilliumWebRegular';
}
#game_holder .tabla .rank{
    /*font: 12px/13px 'titilliumWebRegular';*/
    font: 12px/13px 'titilliumWebSemiBold';
}
#game_holder .tabla .title-ranking{
    color:white;
    font: 14px/15px 'titilliumWebRegular';
}
#game_holder .tabla .title-country{
    color: transparent;
    display: inline-block;
    margin-top: 5px;
    margin-left:-24px;
    /*color: #f7931e;*/
    font: 13px/14px 'titilliumWebSemiBold';
    /*background-color: white;*/
    padding: 5px 21px 5px 6px;
}
#game_holder .tabla .title-ranking{
    display: inline-block;
    margin-top: 4px;
    margin-left: -14px;
    color: white;
    font: 10px/10px 'titilliumWebSemiBold';
    background-color: #f7931e;
    padding: 4px 13px 4px 6px;
}
#game_holder .tabla .middle,.right-middle{
    display:inline-block;
}
#game_holder .tabla .more{
    display: inline-block;
    width: 45px;
    height: 100%;
    text-align:center;
}
#game_holder .tabla .more .more-btn{
    margin-top: 22px;
    margin-left: -3px;
    background: #f7931e;
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    vertical-align: middle;
    font: 9px/11px 'titilliumWebBold';
    width: 34px;
}
#game_holder .deploymentNote {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -484px;
    bottom: 0px;
    font: 23px/46px 'titilliumWebBold';
    color: #ffffff;
    width: 470px;
    height: 46px;
    background: url('../images/deployment_note.png')  -0px -0px;
    z-index: 10;
}
#game_holder .deploymentNote.go {
    background-position: -0px -46px;
}
#game_holder .deploymentNote.go:hover {
    background-position: -0px -92px;
    cursor: pointer;
}
#game_holder .deploymentNote .timer {
    position: absolute;
    right:0;
    display:inline-block;
    text-align: center;
    width: 120px;
}
#game_holder .taskListButton {
    position: absolute;
    display: none;
    right: -20px;
    bottom: 0px;
    width: 140px;
}
#game_holder .taskListButton > div {
    display: inline-block;

    width: 51px;
    height: 48px;

    background: url("../images/taskListFolder.png") no-repeat;
    margin-left: -145px;
    padding-top: 5px;
    transform: scale(0.9);
    vertical-align: middle;
}
#game_holder .taskListButton > span {
    display:none;
    vertical-align: middle;
    font: 14px/14px 'titilliumWebBold';
    color: black;
    background: #ffffff;
    padding: 4px 5px 4px 14px;
}
#game_holder .taskListButton:hover {
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#game_holder .upgrade_unit {
    position: relative;
    width: 290px;
    height: 290px;
    transform-origin: 0 0;
    background: url("../images/warZone/unit.png");
}
#game_holder .upgrade_unit.upgrades {
    margin-right: calc(96px - 290px);
    margin-bottom: calc(96px - 290px);
    transform: scale(0.331);
}
#game_holder .upgrade_unit.profile_unit {

    margin-top: -20px;

    margin-right: calc(72px - 290px) !important;
    margin-bottom: calc(0px - 290px) !important;

    transform: scale(0.25) !important;
}
#game_holder .upgrade_unit.profile_other {
    margin-right: calc(64px - 160px) !important;
    margin-bottom: calc(64px - 160px) !important;
    transform: scale(0.4) !important;
}
#game_holder .upgrade_unit.o_17 {
    margin-top: 0;
    margin-left: 6px;

    width: 159px;
    height: 91px;

    background: url("../images/warZone/tc_1/upgrade_barrels.png") no-repeat;
}
#game_holder .upgrade_unit.o_18 {
    margin-top: 0;
    margin-left: 18px;

    width: 90px;
    height: 90px;

    background: url("../images/shop/shop_icons.png") no-repeat;
}
#game_holder .ach_back_new {
    position: relative;
    display: inline-block;
    width: 76px;
    height: 95px;
    margin: 0px -3px 3px 2px;
    background: url("../images/new/warClicks/profile/square.png") 0 0;
}
#game_holder .ach_back_new .back {
    margin-left: -2px;
    width: 80px;
    height: 80px;
    background: url('../images/new/warZone/achievements/sprite_units_min_vse.png');
}
#game_holder .ach_back_new .img {
    margin-top: -68px;

    padding: 2px;

    width: 68px;
    height: 68px;
}
#game_holder .ach_back_new .img .text .trigger_n {
    display: inline-block;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    color: #f7931e;
    font: 14px/22px 'titilliumWebSemiBold';
}
#game_holder .ach_back_new .icon {
    position: absolute;

    width: 64px;
    height: 64px;
}
#game_holder .ach_back_new .disabled {
    position: absolute;

    margin-top: -72px;

    width: 68px;
    height: 68px;

    border-radius: 8px 8px 32px 32px;

    background: url("../images/warZone/achievements/achievement_dsel.png");
    opacity: 0.75;
}
#game_holder .ach_back_new .icon .text {
    font: 12px/14px 'titilliumWebBold';
    text-align: center;

    color: white;

    display: block;
    white-space: normal;
    height: 60px;
    width: 64px;
    margin: 0;
    padding: 1px 0;

    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black, 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
}
#game_holder .ach_floater {
    position: fixed;
    display: none;
    z-index: 1501;

    width: 192px;
    background: #e6ded0;
    background: rgba(255,255,255,0.5);

    border-radius: 8px;
    border: 1px solid #3c2612;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
#game_holder .ach_floater .text {
    margin: 8px;
    font: 12px/14px 'titilliumWebBold';
    text-align: left;

    color: #3c2612;
}
#game_holder .ach_floater .text .title {
    color: #3c2612;
    text-shadow: 1px 1px 0 white;
}
#switchLoading {
    position: absolute;
    display: none;
    opacity: 0.0;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: 100% 100%;

    text-align: center;
}
#switchLoading.bootCamp {
    /*background: url('../images/new/warClicks/loading_screen/slika-wz-bc.jpg');*/
    width: 100%;
    height: 550px;
    background: url('../images/new/bootCamp/bg.png');
}
#switchLoading.warZone {
    /*background: url('../images/new/warClicks/loading_screen/slika-bc-wz.jpg');*/
    width: 100%;
    height: 550px;
    background: url("../images/new/warZone/bg_wz_minimized.png");
}
#switchLoading.event {
    /*background: url('../images/new/warClicks/loading_screen/slika-wz-bc.jpg');*/
    width: 100%;
    height: 550px;
    background: red;
    /*background: url('../images/new/bootCamp/bg.png');*/
}
#switchLoading .loading-progress {
    position: relative;
    display: inline-block;
    top: 335px;

    width: 500px;
    height: 40px;

    font: 22px/22px 'titilliumWebBold';
    color: white;
    text-align: center;
    text-shadow: 1px 1px 0 #f7931e, -1px 1px 0 #f7931e, 1px -1px 0 #f7931e, -1px -1px 0 #f7931e, 1px 0 0 #f7931e, 0 1px 0 #f7931e, -1px 0 0 #f7931e, 0 -1px 0 #f7931e;

    border: 2px solid #f7931e;

    background: white;

    transform: skewX(-15deg);
}
#switchLoading .loading-game {
    position: relative;

    margin: 1px;

    width: 498px;
    height: 38px;

}
#switchLoading .loading-progress .progress-percent {
    position: absolute;

    top: 7px;
    left: 50%;

    margin-left: -250px;

    width: 500px;
}
#switchLoading .loading-progress .bar_fill {
    position: relative;

    margin: 1px;
    width: 498px;
    height: 38px;

    background: #f7931e;
}
#switchLoading .switch-curtain{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.4);
}
#switchLoading .loading-holder{
    margin: 0 auto;
    margin-top: 212px;
    width: 145px;
    height: 145px;
}
#switchLoading .loading-holder > div {
    position: absolute;
}
#switchLoading.bootCamp .loading-circle{
    width: 145px;
    height: 145px;
    background: url('../images/new/warClicks/loading_screen/animation_loading_sprite_wz_bc.png');
    background-position-y: -145px;
    animation: switchScreenRotation 1s linear infinite;
}
#switchLoading.warZone .loading-circle{
    width: 145px;
    height: 145px;
    background: url('../images/new/warClicks/loading_screen/animation_loading_sprite_bc_wz.png');
    background-position-y: -145px;
    animation: switchScreenRotation 1s linear infinite;
}
#switchLoading.event .loading-circle{
    width: 145px;
    height: 145px;
    background: url('../images/new/warClicks/loading_screen/animation_loading_sprite_bc_wz.png');
    background-position-y: -145px;
    animation: switchScreenRotation 1s linear infinite;
}
#switchLoading.bootCamp .loading-circle-overlay{
    width: 145px;
    height: 145px;
    background: url('../images/new/warClicks/loading_screen/animation_loading_sprite_wz_bc.png');
}
#switchLoading.warZone .loading-circle-overlay{
    width: 145px;
    height: 145px;
    background: url('../images/new/warClicks/loading_screen/animation_loading_sprite_bc_wz.png');
}
#switchLoading.event .loading-circle-overlay{
    width: 145px;
    height: 145px;
    background: url('../images/new/warClicks/loading_screen/animation_loading_sprite_bc_wz.png');
}
#switchLoading .loading-text{
    margin: 0 auto;
    width: 260px;
    height: 25px;
    text-align: center;
    font: 17px/25px 'titilliumWebSemiBold';
    color: white;
    margin-top: 35px;
    position: relative;
}
#hotkeysPopupCurtain{
    width: 1000px;
    height: 551px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    z-index: 1502;
}
#hotkeysPopupHolder{
    width: 334px;
    height: 397px;
    background: #3f4651;
    border: 1px solid white;
    position: relative;
    margin: 0 auto;
    margin-top: 76px;
    z-index: 1502;
}
#hotkeysPopupHolder .header{
    font: 16px/35px 'titilliumWebSemiBold';
    color: #f7931e;
    border-bottom: 1px solid #b3b3b3;
    padding-left: 17px;
    height: 36px;
}
#hotkeysPopupHolder .header .x{
    right: 4px;
    top: -1px;
}
#hotkeysPopupHolder .content{
    padding-left: 14px;
}
#hotkeysPopupHolder .content .subheader{
    color: #00ffff;
    font: 14px/14px 'titilliumWebRegular';
    margin-top: 16px;
    margin-left: 5px;
    margin-bottom: 12px;
}
#hotkeysPopupHolder .content .entry{
    margin-top: 5px;
    color: #e6e6e6;
}
#hotkeysPopupHolder .content .element{
    background: url('../images/new/warClicks/settings/keyboard_sprite.png');
    width: 35px;
    height: 28px;
    font: 13px/25px 'titilliumWebRegular';
    color: #ffffff;
    text-align: center;
    display: inline-block;
}
#hotkeysPopupHolder .content .element.wider{
    background-position: -35px;
    margin-left: 4px;
    vertical-align: middle;
}
#hotkeysPopupHolder .content .description{
    display: inline-block;
    color: #e6e6e6;
    font: 14px/26px 'titilliumWebRegular';
    margin-left: 20px;
}
#trainingCamp {
	position: absolute;
    display: none;
    opacity: 0.0;
	margin: 0 auto;
    width: 100%;
    height: 100%;
}
#warZone {
    position: absolute;
    display: none;
    opacity: 0.0;

    margin: 0 auto;
    width: 100%;
    height: 100%;
}
#eventHolder {
    position: absolute;
    display: none;
    opacity: 0.0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
#cloudInfo {
    position: absolute;
    /*z-index: 1100;*/
    z-index: 1;
    margin: 0 auto;
    top: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    display: none;
}
#cloudInfo .content {
    position: relative;

    margin: 0 auto;
    padding-top: 5px;

    width: 1000px;
    height: calc(100% - 0px);
}
#cloudInfo .window {
    position: relative;

    padding: 8px;

    width: 80%;
    height: 55%;
    background: #ecf0f1;

    pointer-events: auto;

    /* EXP */
    margin-left: 12px;
    padding-left: 16px;
    padding-top: 15px;
    top: 16px;
}
#cloudInfo .window.bribe {
    background: #ecf0f1 url("../images/new/warClicks/clouds/line_after_bribe.png") no-repeat center;
    background-position: 0 150px !important;
}
#cloudInfo .window .legend {
    width: 70px;
    height: 27px;
    font: 13px/26px 'titilliumWebBold';
    position: absolute;
    left: 401px;
    top: 1px;
    text-align: center;
    color: white;
    border-radius: 4px;
}
#cloudInfo .window .legend:hover {
    filter: brightness(127%);
}
#cloudInfo .window.welcome {
    background: #ecf0f1 url('../images/cloudInfo/welcome_note.png') top right no-repeat;
}
#cloudInfo .window.welcomeWZ {
    background: #ecf0f1 url('../images/cloudInfo/time_to_fight.png') top right no-repeat;
}
#cloudInfo .window.invasion_rewards {
    background: #ecf0f1 url('../images/cloudInfo/training_is_over.png') top right no-repeat;
}
#cloudInfo .invasion-spoils {
    display: block;
    /*width: 279px;*/
    width: 350px;
    height: 40px;
    margin: 10px 0;
    padding: 5px 0 5px 20px;
    color: #ffffff;
    line-height: 20px;
    background: #ecf0f1 url('../images/new/warZone/country_hq/rewards_from_invasion.png') top left no-repeat;
    background-size: 100% 100%;
}
#cloudInfo .window.invasion_rewards .invasion-spoils {
    height: 20px;
}
#cloudInfo .invasion-spoils > span {
    color: #000000;
}
#cloudInfo .window.welcome .black_arrow {
    width: 260px;
}
#cloudInfo .window.deployment_note {
    background: #ecf0f1 url('../images/cloudInfo/training_is_over.png') top right no-repeat;
}
#cloudInfo .window.competition_rewards {
    background: #ecf0f1 url('../images/cloudInfo/line.png') center no-repeat;
    background-position: 0 170px !important;
}
#cloudInfo .window.event_rewards {
    background: #ecf0f1 url('../images/cloudInfo/line.png') center no-repeat;
    background-position: 0 170px !important;
}
#cloudInfo .window .top {
    position: relative;
    width: 100%;
    height: 20%;
}
#cloudInfo .window .top .extra-info {
    display: none;
    width: 145px;
    height: 36px;
    color:white;
    top: 16px;
    background: url("../images/new/warClicks/clouds/title_2.png");

    margin-left: -54px;
}
#cloudInfo .window.convert .top .extra-info {
    position: absolute;
}
#cloudInfo .window.post_convert .top .extra-info {
    position: absolute;
}
#cloudInfo .window .top .extra-info .text {
    margin-left: 32px;
    margin-top: 2px;
    width: 105px;
    height: 24px;
    font: 13px/22px 'titilliumWebRegular';
}
#cloudInfo .window .top .extra-info .text .value {
    color: lawngreen;
}
#cloudInfo .window .middle {
    position: relative;

    width: 100%;
    height: 65%;
}
#cloudInfo .window .middle .text {
    font: 14px/18px 'titilliumWebRegular';
    color: black;
    /*
    */
    margin-top: 4px;
}
#cloudInfo .window .middle .text > .spec5 {
    color: red;
}

#cloudInfo .window .middle .text > div:not(.column):not(.button) {
    height: 25px;
    font: 14px/18px 'titilliumWebSemiBold';
}
#game_holder #cloudInfo .window .middle .text .info-button {
    height: 19px;
    margin-left: 6px;
    margin-top: -2px;
}
#cloudInfo .window .middle .text > .gtw {
    margin-top: 129px;
    margin-right: 9px;
    z-index: 1;
}
#cloudInfo .window.deploy .middle .alineja{
    top: 4px;
    left: 20px;
}
#cloudInfo .window.second_prestige .middle .alineja{
    top: 4px;
    left: 20px;
}
#cloudInfo .window.deploy .middle .text > .gtw {
    margin-top: 129px;
    margin-right: 9px;
    z-index: 1;
    width: 177px;
}
#cloudInfo .window.deploy .middle .spec4, #cloudInfo .window.second_prestige .middle .spec4 {
    font: 15px/18px 'titilliumWebRegular';
    /*font: 15px/18px 'titilliumWebSemiBold';*/
    margin-left: 11px;
}
#cloudInfo .window.second_prestige .middle .spec4 {
    margin-top: -16px;
}
#cloudInfo .window .middle .text >span {
    font: 18px/18px 'titilliumWebBold';
}
#cloudInfo .window .middle .text >div >span {
    display: inline-block;
    height: 41px;

    vertical-align: middle;
}
#cloudInfo .window .middle .text >div >div:not(.arrow_white) {
    display: inline-block;

    max-width: calc(100% - 70px);
    vertical-align: middle;
}
#cloudInfo .window .middle .text > div.column {
    display: inline-block;
    margin-top: 10px;
    vertical-align: top;
}
#cloudInfo .window .middle .text > div.column > span.heading {
    font: 14px/18px 'titilliumWebBold';
}
#cloudInfo .window .middle .text > div.column.extra-margin {
    margin-top: 40px;
}
#cloudInfo .window .middle .text > div.column.extra-margin20 {
    margin-top: 20px;
}
#cloudInfo .window .middle .text > div.column:first-child {
    width: calc(50% - 20px);
    margin-right: 20px;
}
#cloudInfo .window .middle .text > div.column:nth-child(2) {
    width: 50%;
}
#cloudInfo .window .middle .text > div.column > .column-heading {
    max-width: 100%;
    width: 100%;
    font: 14px/16px 'titilliumWebBold';
    text-transform: uppercase;
    height: 40px;
    margin: 10px 0;
}
#cloudInfo .window .middle .text > div.column:nth-child(2) > .column-heading {
    margin-left: 10px;
}
#cloudInfo .window .middle .text > div.column > .column-body {
    max-width: 100%;
    width: 100%;
    height: 120px;
}
#cloudInfo .window .middle .text > div.column > .column-body.time {
    background: #ffffff;
    font: 40px/75px 'titilliumWebRegular';
    color: #000000;
    border: solid 1px lightgrey;
}
#cloudInfo .window .middle .text > div.column > .column-body.time span {
    display: inline-block;
    width: 25%;
    text-align: center;
}
#cloudInfo .window .middle .text > div.column > .column-body.time > div {
    height: 45px;
    background: #3a3a3a;
    font: 14px/45px 'titilliumWebLight';
    color: #ffffff;
}
#cloudInfo .window .middle .text > div.column > .column-body.gain {
    height: 123px;
     background:  url('../images/cloudInfo/trainer.png?v=1') no-repeat 15px 8px, url('../images/cloudInfo/bottom_white.png?v=1') no-repeat 0px 0px;
}
#cloudInfo .window .middle .text > div.column > .column-body.gain > div{
    float: right;
    height: 75px;
    width: 258px;
    background: #f7931e url('../images/new/bootCamp/bc_splosno/pp.png') center left 10px no-repeat;
    text-align: right;
    padding-right: 7px;
    font: 38px/71px 'titilliumWebLight';
    color: #ffffff;
}
#cloudInfo .window .middle .text > div.column > .column-body .event-gains {
    margin-left: 9px;
    font: 18px/25px 'titilliumWebRegular';
}
#cloudInfo .window .middle .text > div.column > .column-body .event-gains > span {
    color: #f7931e;
    font: 18px/25px 'titilliumWebSemiBold';
}
#cloudInfo .window .middle .text > div.column80 {
    display: inline-block;
    margin-top: 10px;
    vertical-align: top;
    width: calc(70% - 20px);
    margin-right: 20px;
    font: 15px/18px 'titilliumWebRegular';
}
#cloudInfo .window .middle .text .column80 {
    font: 15px/18px 'titilliumWebRegular';
    height: 18px;
}
#cloudInfo .window .middle .text .column80 .conversion-res {
    position: absolute;
    top: 88px;
    font: 51px/18px 'titilliumWebRegular';
    color: white;
    margin-left: 17px;
}
#cloudInfo .window .middle .text .column80 .conversion-result-bs {
    display: inline-block;
    margin-top:10px;
    max-width: 100%;
    width: 521px;
    height: 89px;
    background: url("../images/new/bootCamp/bc_splosno/convert.png") 0 89px;
    vertical-align: top;
}
#cloudInfo .window .middle .text .column80 .conversion-result-score {
    display: inline-block;
    margin-top:10px;
    max-width: 100%;
    width: 521px;
    height: 90px;
    background: url("../images/new/bootCamp/bc_splosno/convert.png");
    vertical-align: top;
}
#cloudInfo .window .middle .text > div.column20 {
    display: inline-block;
    margin-top: 10px;
    vertical-align: top;
    width: 30%;
}
#cloudInfo .window .middle .text .column20 .end-text {
    height: 50px;
    font: 16px/22px 'titilliumWebRegular';
    margin-top: 43px;
    margin-left: -22px;
}
#cloudInfo .window .middle .left {
    position: absolute;
    margin-bottom: 8px;
    width: 280px;
    height: 128px;
    font: 12px/26px 'titilliumWebBold';
    color: #000000;
    text-align: right;
    bottom: -35px;
    left: 0;
}
#cloudInfo .window.deploy .middle .left, #cloudInfo .window.second_prestige .middle .left {
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    padding: 5px 0;
    padding-bottom: 0px;
}
#cloudInfo .window.deploy .middle .left.post-deploy, #cloudInfo .window.second_prestige .middle .left.post-second_prestige {
    top: 57px;
    left: 22px;
    width: 145px;
    height: 111px;
    background: url("../images/new/warClicks/clouds/gained_boost_table.png") bottom no-repeat;
}
#cloudInfo .window.second_prestige .middle .left.post-second_prestige{
    left: 329px;
    border-top: none;
}
#cloudInfo .window.deploy .middle .left.post-bribe {
    top: 48px;
    left: 329px;
    width: 145px;
    height: 111px;
    background: url("../images/new/warClicks/clouds/gained_boost_table.png") bottom no-repeat;
    border: none;
}
#cloudInfo .window.deploy .middle .left.post-deploy > div > span, #cloudInfo .window.second_prestige .middle .left.post-second_prestige > div > span {
    display: block;
    width: 146px;
    height: 34px;
    text-align: center;
}
#cloudInfo .window.deploy .middle .left.post-bribe > div > span {
    display: block;
    width: 146px;
    height: 34px;
    text-align: center;
}
#cloudInfo .window.deploy .middle .left.post-deploy > div > span:nth-of-type(1), #cloudInfo .window.deploy .middle .left.post-bribe > div > span:nth-of-type(1),
#cloudInfo .window.second_prestige .middle .left.post-second_prestige > div > span:nth-of-type(1){
    margin-top: 5px;
    height: 31px;
    font: 14px/30px 'titilliumWebSemiBold';
    color: #333333;
}
#cloudInfo .window.second_prestige .middle .left.post-second_prestige .deploy-stats{
    margin-top: -4px !important;
}
#cloudInfo .window.deploy .middle .left.post-deploy > div > span:nth-of-type(2), #cloudInfo .window.deploy .middle .left.post-bribe > div > span:nth-of-type(2),
#cloudInfo .window.second_prestige .middle .left.post-second_prestige > div > span:nth-of-type(2){
    font: 18px/31px 'titilliumWebSemiBold';
    color: #327a3b;
}
#cloudInfo .window.deploy .middle .left.post-deploy > div > span:nth-of-type(3), #cloudInfo .window.deploy .middle .left.post-bribe> div > span:nth-of-type(3),
#cloudInfo .window.second_prestige .middle .left.post-second_prestige > div > span:nth-of-type(3){
    height: 21px;
    font: 12px/22px 'titilliumWebRegular';
    color: #4d4d4d;
}
#cloudInfo .window.deploy .middle .left.post-deploy > div > span:nth-of-type(4), #cloudInfo .window.deploy .middle .left.post-bribe > div > span:nth-of-type(4),
#cloudInfo .window.second_prestige .middle .left.post-second_prestige > div > span:nth-of-type(4){
    font: 14px/26px 'titilliumWebSemiBold';
    color: #327a3b;
}
#cloudInfo .window.deploy .middle .left > div, #cloudInfo .window.second_prestige .middle .left > div {
    /*padding: 5px 0;*/
    margin-top: 19px;
    text-align: left;
}
#cloudInfo .window.deploy .middle .left > div > div, #cloudInfo .window.second_prestige .middle .left > div > div  {
    float: right;
}
#cloudInfo .window.deploy .middle .left > div:nth-of-type(1), #cloudInfo .window.second_prestige:not(.post-second_prestige) .middle .left > div:nth-of-type(1) {
    margin-top: 3px;
    font: 14px/28px 'titilliumWebBold';
}

#cloudInfo .window .middle .right {
    position: absolute;

    margin-bottom: 8px;

    font: 12px/26px 'titilliumWebBold';
    color: #000000;
    text-align: right;
    bottom: 0;
    right: 0;
}
#cloudInfo .window.deploy .middle .right {
    width: 266px;
    height: 90px;
    position: absolute;
    margin-bottom: 13px;
    font: 18px/18px 'titilliumWebSemiBold';
    color: #000000;
    text-align: left;
    top: 93px;
    right: 103px;
    background: url("../images/new/warClicks/clouds/arrows.png") bottom no-repeat;
}
#cloudInfo .window.deploy .middle .right.raised {
    height: 108px;
    top: 80px;
}
#cloudInfo .window.deploy .middle .right.raised-high {
    height: 120px;
    top: 68px;
}
#cloudInfo .window.deploy .middle .right.raised-high > div {
    margin-left: 0;
}
#cloudInfo .window.second_prestige .middle .right{
    width: 295px;
    height: 90px;
    position: absolute;
    margin-bottom: 13px;
    font: 18px/18px 'titilliumWebSemiBold';
    color: #000000;
    text-align: left;
    top: 93px;
    right: 5px;
    background: url("../images/new/warClicks/clouds/arrow.png") bottom no-repeat !important;
}
#cloudInfo .window.deploy .middle .right.post-deploy {

}
#cloudInfo .window.deploy .middle .left.post-deploy > .deploy-stats{
    margin-top: -5px;
}
#cloudInfo .window.deploy .middle .right.post-deploy .values-holder {
    width: 101%;
    /*margin-top: 34px;*/
    margin-left: 8px;
    top: 33px;
    left: -8px;
    position: relative;
}
#cloudInfo .window.deploy .middle .right.post-deploy .values-holder > div {
    margin-left: 33px;
    display: inline-block;
    width: 86px;
    /*background: pink;*/
    text-align: center;
    color: white;
    font: 13px/13px 'titilliumWebRegular';
}
#cloudInfo .window.deploy .middle .right.post-deploy .values-holder > div:nth-of-type(1),#cloudInfo .window.deploy .middle .right.post-deploy .values-holder > div:nth-of-type(6) {
    margin-left: 0;
}
#cloudInfo .window.deploy .middle .right.post-deploy .values-holder > div:nth-of-type(6){
    margin-top: 45px;
}
#cloudInfo .window.deploy .middle .right > div:nth-of-type(2),
#cloudInfo .window.second_prestige .middle .right > div:nth-of-type(2) {
    color: #1a1a1a;
    font: 12px/22px 'titilliumWebSemiBold';
}
#cloudInfo .window.deploy .middle .right > div:nth-of-type(3) {
    color: #1a1a1a;
    font: 12px/12px 'titilliumWebSemiBold';
}
#cloudInfo .window.deploy .middle .right > div:nth-of-type(4) {
    color: #1a1a1a;
    font: 12px/14px 'titilliumWebSemiBold';
}
#cloudInfo .window.deploy .middle .right > div {
    margin-left: 40px;
}
#cloudInfo .window.deploy .middle .right > div.centered {
    text-align: center;
}
#cloudInfo .window.deploy .middle .right > div.deploy-stats, #cloudInfo .window.second_prestige .middle .right > div.deploy-stats {
    width: 560px;
    height: 111px;
    background: url("../images/new/warClicks/clouds/gain_units.png") bottom no-repeat;
    margin-left: -247px;
    margin-top: -30px;
}
#cloudInfo .window .middle .right > div.stand-out, #cloudInfo .window .middle .left > div.stand-out {
    display: inline;
    font: 14px/28px 'titilliumWebBold';
}
#cloudInfo .window.deploy .middle .left > div.stand-out, #cloudInfo .window.second_prestige .middle .left > div.stand-out{
    display: block;
}
#cloudInfo .window.deploy .middle .right > div.centere, #cloudInfo .window.second_prestige .middle .right > div.centered{
    margin-left: 0;
    text-align:center;
}
#cloudInfo .window.second_prestige .middle .right > div.centered {
    font: 13px/22px 'titilliumWebSemiBold';
}
#cloudInfo .window.deploy .middle .left > div:not(.deploy-stats) > span{
    display: block;
    position: absolute;
    margin-top: -13px;
    /*margin-left: 8px;*/
    font: 12px/22px 'titilliumWebRegular';
    color: #666666;
}
#cloudInfo .window.deploy .middle .left .spec3 > span{
    text-decoration: underline;
    font: 12px/22px 'titilliumWebSemiBold';
}
#cloudInfo .window .middle .right > div>div:not(.spec1):not(.values-holder), #cloudInfo .window .middle .left > div>div  {
    display: inline-block;

    margin-left: 8px;

    width: 80px;

    font: 12px/20px 'titilliumWebRegular';

    color: black;

    text-align: center;

    background: #b3b3b3;
    border: solid 1px lightgrey;
}
/*#cloudInfo .window .middle .right > div>div:not(.spec1):not(.value-holder), #cloudInfo .window .middle .left > div>div  {*/
    /*display: inline-block;*/

    /*margin-left: 8px;*/

    /*width: 80px;*/

    /*font: 12px/20px 'titilliumWebRegular';*/

    /*color: black;*/

    /*text-align: center;*/

    /*background: #b3b3b3;*/
    /*border: solid 1px lightgrey;*/
/*}*/
#cloudInfo .window.deploy .middle .left > div > div{
    padding-right: 6px;
    text-align: right;
    height: 23px;
    padding-top: 2px;
}
#cloudInfo .window .middle .left > div>div.white-bg  {
    background: white;
}
#cloudInfo .window .middle .right > div > div.spec1  {
    display: inline-block;

    /*margin-left: 8px;*/

    /*width: 80px;*/

    padding-right: 6px;
    margin-left: 4px;
    /*font: 18px/20px 'titilliumWebSemiBold';*/
    font: 19px/20px 'titilliumWebSemiBold';

    color: #009245;

    text-align: center;
}
#cloudInfo .window .middle .right > div > div.spec1.small  {
    font: 12px/20px 'titilliumWebSemiBold';
    text-align: left;
}
#cloudInfo .window.second_prestige .middle .right > div > div.spec1.small  {
    font: 15px/20px 'titilliumWebSemiBold';
}
#cloudInfo .window .middle .right > div.stand-out > div {
    font: 12px/22px 'titilliumWebRegular';

    background: white;

    border: solid 1px lightgrey;
}
#cloudInfo .window .bottom {
    position: relative;
    width: 791px;
    height: 15%;
}
#cloudInfo .window.deploy .bottom.post-deploy {
    width: 696px;
    left: 22px;
    top: -11px;
    font: 14px/20px 'titilliumWebRegular';
    color: #666666;
    font-style: italic;
}
#cloudInfo .window.second_prestige .bottom.post-second_prestige {
    /*width: 771px;*/
    /*left: 22px;*/
    top: -11px;
    /*font: 14px/20px 'titilliumWebRegular';*/
    /*color: #666666;*/
}
#cloudInfo .window.deploy .bottom .min-requirements, #cloudInfo .window.second_prestige .bottom .min-requirements {
    height: 20px;
    width: 458px;
    margin-left: 335px;
    margin-top: -6px;
    font: 12px/20px 'titilliumWebRegular';
    color: #c1272d;
    position: absolute;
}
#cloudInfo .window.deploy .bottom .min-requirements {
    color: #009245;
}
#cloudInfo .window.deploy .bottom .min-deploy-percent {
    font: 11px/13px 'titilliumWebSemiBold';
    color: #c1272d;
    position: absolute;
    bottom: 53px;
    right: 86px;
    width: 280px;
}
#cloudInfo .window.second_prestige .bottom .min-requirements {
    height: 20px;
    width: auto;
    /*margin-left: 579px;*/
    /*margin-left: 528px;*/
    margin-left: 549px;
    /*margin-top: 17px;*/
    /*top: 9px;*/
    bottom: -5px;
    position: absolute;
}
#cloudInfo .window_triangle {
    position: relative;
    margin-left: 244px;
    margin-top: 15px;
    width: 94px;
    height: 68px;
    background: url("../images/new/warClicks/clouds/window_triangle.png");
}
#cloudInfo .soldier {
    position: absolute;

    left: 0;
    bottom: 0px;

    width: 217px;
    height: 236px;

    background: url("../images/soldier_big.png");
}
#cloudInfo .soldier.helloween {
    background: url("../images/new/warClicks/soldier_zombie-01-01-01.png");
}

#cloudInfo .soldier.santas_revenge {
    background: url("../images/new/eventGame/santas_revenge/santa_icon_1_small.png");
    width: 236px;
    background-size: 100% 100%;

}
#cloudInfo .button {
    position: relative;
    display: inline-block;
    float: right;

    bottom: 0;

    /*margin-left: 25px;*/
    margin-right: 12px;
    font: 15px/31px 'titilliumWebBold';
    color: black;

    text-align: center;
    background: #f7931e;
}
#cloudInfo .window.deploy .button {
    bottom: 8px;
}
#cloudInfo .window.deploy .button:nth-of-type(2) {
    width: 204px;
    margin-left: 334px;
    float: none;
}
#cloudInfo .window.deploy .button:nth-of-type(1) {
    width: 204px;
    height: 34px;
}
#cloudInfo .window.second_prestige .button {
    /*width: 204px;*/
    /*height: 34px;*/
    /*margin-right: 44px;*/
    /*bottom: 14px;*/
    width: 204px;
    height: 34px;
    margin-right: 44px;
    bottom: 20px;
    position: absolute;
    right: 1px;
}
#cloudInfo .window.second_prestige .bottom.post-second_prestige .button {
    bottom: 14px !important;
}
#cloudInfo .button:hover:not(.disabled) {
    color: white;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#cloudInfo .button.disabled {
    background: url("../images/trainingCamp/tent.png?2") calc(0px - 890px - 70px) 0;
}
#cloudInfo .button div {
    display: inline-block;
    vertical-align: top;

    white-space: nowrap;
}
#cloudInfo .button >div {
    padding: 0 32px;
}
#cloudInfo .window.deploy .button >div {
    padding: 3px 19px !important;
}
#cloudInfo .button .special {
    margin-right: -32px;
    margin-left: 8px;
    width: 58px;
    height: 32px;
    background: url("../images/new/warClicks/clouds/gain_icons_black_sprite_min.png");
}
#cloudInfo .button .special.bs {
    background-position: 0 0;
}
#cloudInfo .button .special.score {
    background-position-x: 58px;
}
#cloudInfo .button .convert {
    position: absolute;

    left: 59px;
    top: -21px;
    padding: 0;

    width: 37px;
    height: 28px;

    background: url("../images/new/warClicks/clouds/gain_icons_sprite_min.png");
}
#cloudInfo .button .convert.bs {
    background-position-x: 0px;
}
#cloudInfo .button .convert.score {
    background-position-x: -37px;
}
#cloudInfo .button[data-type=convert_bs] {
    width: 210px;
    height: 40px;
    background: url("../images/new/warClicks/clouds/convert_to_sprite.png");
    position: relative;
    bottom: 39px;
    left: -82px;
}
#cloudInfo .window.convert .text.bs{
    position: absolute;
    right: 388px;
    bottom: 84px;
    font: 11px/11px 'titilliumWebSemiBold';
    color: #808080;
}
#cloudInfo .window.convert .text .value_icon.points {
    margin-right: -4px;
    margin-left: -1px;
}
#cloudInfo .window.convert .text > div{
    font: 12px/12px 'titilliumWebRegular' !important;
    color: black;
    margin-top: 8px;
}
#cloudInfo .window.convert .middle .right {
    width: 221px;
    height: 90px;
    position: absolute;
    font: 18px/18px 'titilliumWebSemiBold';
    color: #000000;
    text-align: left;
    top: 51px;
    right: 175px;
    background: url("../images/new/warClicks/clouds/left_right_sign.png") bottom no-repeat !important;
}
#cloudInfo .window.convert .middle .right .centered{
    text-align: center;
    margin-top: 22px;
    color: #f7931e;
    font: 18px/18px 'titilliumWebBold';
    margin-left: -9px;
}
#cloudInfo .window.convert .middle .right .centered > div{
    margin-top: -2px;
}

#cloudInfo.clean .window .middle .right {
    background: none !important;
}
#cloudInfo.clean .window .middle .left {
    border: none;
}

#cloudInfo .window .middle .right .extra-boost-note {
    position: absolute;
    top: -65px;
    left: -339px;

    width: 200px;

    font: 12px/16px 'titilliumWebBold';
    text-align: left;
    /*color: #f15a24;*/
    color: #356b00;

}
#cloudInfo .window.convert .text.score{
    position: absolute;
    right: 139px;
    bottom: 84px;
    font: 11px/11px 'titilliumWebSemiBold';
    color: #808080;
}
#cloudInfo .benefits-holder {
    position: absolute;
    font: 12px/12px 'titilliumWebRegular';
    color: #333333;
    bottom: 9px;
}
#cloudInfo .benefits-holder.score {
    right: 38px;
}
#cloudInfo .benefits-holder.bs {
    right: 326px;
}
#cloudInfo .benefits-holder .alineja {
    background: url("../images/new/warClicks/clouds/green_target.png");
    margin-right: 8px;
}
#cloudInfo .window.convert i{
    font: 12px/16px 'titilliumWebRegular';
    font-style: italic;
    color: #666666;
}
#cloudInfo .button[data-type=convert_bs]:hover {
    background-position-y: -40px;
}
#cloudInfo .button[data-type=convert_score] {
    width: 210px;
    height: 40px;
    background: url("../images/new/warClicks/clouds/convert_to_sprite.png");
    background-position-x: -210px;
    position: relative;
    bottom: 39px;
    right: 18px;
}
#cloudInfo .button[data-type=convert_score]:hover {
    background-position-y: -40px;
}
#cloudInfo .button[data-type=convert_bs] > div, #cloudInfo .button[data-type=convert_score] > div {
    padding: 0;
    position: absolute;
    left: 17px;
    font: 15px/40px 'titilliumWebBold';
}
#cloudInfo .button[data-type=convert_bs] .icon{
    position: relative;
    top: 11px;
}
#cloudInfo .button[data-type=convert_score] .icon{
    position: relative;
    margin-right: 3px;
    top: 9px;
}
#cloudInfo .button .text {
    position: absolute;

    padding: 0;

    right: -2px;
    bottom: -12px;
    letter-spacing: 0.1em;
    font: 11px/11px 'titilliumWebSemiBold';
    color: black;
}
#cloudInfo .x {
    top: 7px;
    right: 9px;
}
#cloudInfo .time-warp-icon {
    display:inline-block;
    width: 90px;
    height: 90px;
    background: url('../images/shop/shop_icons.png');
    background-position-x: -720px;
    float: left;
    margin-right: 20px;
}
#cloudInfo .centering {
    text-align: center;
    margin-top: 20px;
    width: calc(100% - 100px);
}
#cloudInfo .badge-holder {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 140px;
    height: 140px;
}
#cloudInfo .badge-holder .badge {
    display: inline-block;
    width: 49px;
    height: 92px;
    background: url('../images/cloudInfo/badges.png');
}
#cloudInfo .badge-holder .badge.events {
    margin-top: -18px;
    display: inline-block;
    width: 49px;
    height: 92px;
    background: url('../images/new/eventGame/event_rankings/tier_rewards/new_badges_sprite_bigger.png') 0 0;
}
#cloudInfo .badge-holder .badge-desc {
    font: 12px/14px 'titilliumWebRegular';
    text-align: center;
}
#cloudInfo .badge-holder .badge-desc > span {
    font: 12px/14px 'titilliumWebBold';
    display: inline-block;
    text-align: center;
    height: 32px;
}
#cloudInfo .badge-holder .badge-desc .event-rank {
    /*position: absolute;
    display: inline-block;
    width: 151px;
    top: 124px;
    left: -26px;*/
    display: inline-block;
    width: 151px;
    margin-left: -12px;
    text-align: center;
    padding: 5px;

    font: 12px/14px 'titilliumWebBold';
    color: #f15a24;
}
#chatIcon {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 55px;
    height: 54px;
    background: url("../chat/chat_sprite.png");
}
#chatIcon.headquarters {
    z-index: 2;
    right: 199px;
}
#chatIcon.events {
    z-index: 1;
}
#chatIcon.cvc,
#chatIcon.invasion {
    z-index: 2;
}
#chatIcon:hover {
    background-position-y: -54px;
}
#chatIcon .unread-messages{
    margin-top: -5px;
    margin-left: 20px;
    width: 22px;
    height: 22px;
    background: url("../chat/chat_notification_icon.png");
}
#taskList {
    position: absolute;
    z-index: 1500;

    /*left: -6px;*/
    bottom: 7px;

    /*width: 100%;*/
    right: 4px;
    pointer-events: none;
}
#taskList .content {
    position: relative;
    /*margin: 0 auto;*/
    width: 178px;
    right: 3px;
    padding-bottom: 10px;
    padding-right: 15px;
    /*left: 417px;*/
    background: #ecf0f1;
    box-shadow: 0 0 3px rgba(0,0,0, 0.5);
    pointer-events: auto;
    font: 12px/14px 'titilliumWebRegular';
}
#taskList .content .top {
    width: 100%;
    font: 12px/14px 'titilliumWebRegular';
    color: black;
}
#taskList .content .middle {
    width: 100%;
    color: black;
    text-align: center;
}
#taskList .content .middle .colored-reward-title{
    color: #009245;
    font: 15px/18px 'titilliumWebSemiBold';
}
#taskList .content .middle .time_warp{
    margin-left:45px;
    margin-top:5px;
    width: 90px;
    height: 90px;
    background: url("../images/shop/shop_icons.png");
    background-position-x: -720px;
}
#taskList .content .middle .double_pp{
    margin-left:80px;
    margin-top:5px;
    width: 21px;
    height: 20px;
    background: url("../images/value_icon.png");
    background-position: -21px 0;
}
#taskList .content .middle .dpc{
    margin-left:45px;
    margin-top:5px;
    width: 90px;
    height: 90px;
    background: url("../images/shop/shop_icons.png");
    background-position-x: -0px;
}
#taskList .content .middle .gold{
    margin-left:80px;
    margin-top:5px;
    width: 21px;
    height: 20px;
    background: url("../images/value_icon.png");
    background-position: 0 0;
}
#taskList .content .middle .autoclicker{
    margin-left:45px;
    margin-top:5px;
    width: 90px;
    height: 90px;
    background: url("../images/shop/shop_icons.png");
    background-position-x: -360px;
}
#taskList .content .bottom {
    width: 100%;
    height: 40px;
}
#taskList .content .middle .left {
    display: inline-block;
    width: 25%;
    height: 36px;
    margin-top: -4px;
    vertical-align: middle;
}
#taskList .content .middle .right {
    display: inline-block;
    width: 75%;
    height: 100%;

    text-align: left;

    vertical-align: middle;
}
#taskList .content .middle .right .desc {
    line-height: 14px;
}
#taskList .content .top > div {
    padding-top: 8px;
    padding-left: 15px;
    text-align: left;
}
#taskList .content .top > div span {
    font: 12px/14px 'titilliumWebBold';
}
#taskList .content .top .close {
    position: absolute;
    top: 3px;
    right: 3px;

    padding: 0;

    width: 37px;
    height: 36px;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0px 0;
    transform-origin: 100% 0;
    transform: scale(0.6);
}
#taskList .content .top .close:hover {
    background-position-y: -36px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#taskList .row {
    width: 100%;
    margin-top: 0px;
}
#taskList .row .desc span {
    font: 14px/14px 'titilliumWebBold';
    color: #3e8c64;
}
#taskList .row .desc .req {
    font: 9px/14px 'titilliumWebRegular';
    color: #ee1d25;
}
#taskList .timer {
    display: inline-block;
    height: 13px;
    margin: 8px 0;
    font: 8px/13px 'titilliumWebRegular';
    color: black;
}
#taskList .checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 11px 0 3px 0;
    background: url("../images/new/warClicks/daily_tasks/daily_tasks_icons_sprite_min.png") 0 0;
}
#taskList .checkbox.done {
    background-position-x: 0px;
}
#taskList .checkbox.go {
    background-position-x: -40px;
}
#taskList .checkbox.no-go {
    background-position-x: -20px;
}
#taskList .checkbox.go:hover {
    margin: 11px 0 3px 0;
    border: 1px solid black;
    border-radius: 2px;
}
#taskList .chute {
    position: relative;
    display: inline-block;
    width: 117px;
    height: 127px;
    background: url("../images/taskListChute.png");
}
#taskList .button {
    position: relative;
    display: inline-block;
    margin: 4px 0;
    padding: 4px 8px;
    background: #f7931e;
    font: 16px/16px 'titilliumWebBold';
    text-align: center;
    color: white;

    border-radius: 8px;
}
#taskList .button:hover {
    color: white;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#taskList .bottom .folder {
    position: absolute;

    left: 0;
    bottom: -6px;

    width: 51px;
    height: 48px;
    font: 10px/10px 'titilliumWebRegular';
    color: black;
    background: url("../images/taskListFolder.png");
}
#taskList .bottom .folder.complete {
    background-position-x: -51px;
}
#taskList .bottom .folder >div {
    position: absolute;

    width: 32px;

    left: 0;
    bottom: 4px;
    text-align: center;
}
#taskList .bottom .folder span:first-child {
    font: 14px/14px 'titilliumWebBold';
    color: #3e8c64;
}
#taskList .bottom .name {
    position: absolute;

    right: 6px;
    bottom: 4px;

    font: 14px/14px 'titilliumWebBold';
    color: black;
}
#taskList .content-voting {
    position: relative;
    width: 178px;
    height: 230px;
    display:block;
    margin: 0 auto;
    left: 417px;
    background: #333333;
    box-shadow: 0 0 3px rgba(0,0,0, 0.5);
    pointer-events: auto;
    font: 14px/14px 'titilliumWebBold';
}
#taskList .content-voting  .close {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 0;
    width: 37px;
    height: 36px;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") -36px 0;
    transform-origin: 100% 0;
    transform: scale(0.6);
}
#taskList .content-voting .middle {
    overflow-y: auto;
    height: 193px;
}
#taskList .content-voting .close:hover {
    background-position-y: -36px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#taskList .content-voting .header {
    display: inline-block;
    font: 16px/20px 'titilliumWebSemiBold';
    color: #f7931e;
    margin-top: 9px;
    margin-bottom: 5px;
    margin-left: 11px;
}
#taskList .content-voting .option {
    position: relative;
    width: 94%;
    margin-left: 3%;
    height: 25px;
    background-color: black;
    margin-bottom: 8px;
    margin-top: 6px;
    border-radius: 6px;
}
#taskList .content-voting .option .left {
    float: left;
    text-align: center;
    padding: 2px;
    font: 12px/16px 'titilliumWebBold';
}
#taskList .content-voting .option .left > * {
    vertical-align: middle;
}
#taskList:not(.vote) .content-voting .option .right {
    text-decoration: none;
    color: white;
    display: inline-block;
    float: right;
    background-color: #ed2028;
    padding: 6px 4px 5px 4px;
    font-size: 9px;
    width: 58px;
    text-align: right;
}
#taskList:not(.vote) .content-voting .option .vote {
    text-align: right;
    height: 13px;
    width: 51px;
    text-decoration: none;
    color: white;
    display: inline-block;
    float: right;
    padding: 6px 2px 7px 4px;
    font: 10px/12px 'titilliumWebBold';
    background: url("../images/new/warClicks/daily_tasks/end.png");
}
#taskList:not(.vote) .content-voting .option .vote.extend {
    position: absolute;
    right: 0px;
    bottom: -13px;
    padding: 0px 14px 0px 1px;

    background: #f7931e;
}
#taskList:not(.vote) .content-voting .option .vote:hover {
    filter: brightness(134%);
}
#taskList .content-voting .option .left .boost {
    display: inline-block;
    color: #00ff00;
    width: 30px;
}
#taskList .content-voting .option .left .text {
    color:white;
    font-size:11px;
    font-weight: bold;
    margin-left:2px;
}
#taskList .content-voting .name {
    position: relative;
    top: 5px;
    margin-left: 10px;
    color: white;
    font-size: 11px;
}
#chat {
    display: none;
    position: absolute;
    z-index: 1500;
    /*right: 67px;*/
    /*bottom: 67px;*/
    /*width: 764px;*/
    /*height: 400px;*/
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
}
#chat .header{
    width: 100%;
    background: #333333;
    /*width: 1000px;*/
    height: 53px;
    background: url("../chat/header.png");
}
#chat .header .min-maximize{
    width: 24px;
    height: 24px;
    background: url("../chat/minimize_maximize_sprite.png");
    position: absolute;
    top: 10px;
    right: 50px;
}
#chat .header .min-maximize:hover{
    background-position-y: -24px;
}
#chat .header .tab-tip {
    display: inline-block;
    margin-left: 100px;
    font: 12px/12px 'titilliumWebSemiBold';
    color: #b3b3b3;
}
#chat .header .x{
    top: 3px;
    right: 7px;
}
#chat .header .tab{
    /*width: 118px;*/
    height: 28px;
    border-radius: 5px;
    padding: 2px 6px;
    text-align: left;
    color: #cccccc;
    display: inline-block;
    font: 16px/26px 'titilliumWebSemiBold';
    background: #333333;
    border: 2px solid #808080;
    margin-top: 6px;
    padding-right: 3px;
    padding-left: 10px;
    padding: 2px 15px 2px 15px;
}
#chat .header .tab > .flag{
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    margin-left: -2px;
    margin-top: -2px;
}
#chat .header .tab > span{
    padding-left:4px;
}
#chat .header .tab:not(.active):hover{
    filter: brightness(130%);
    border: 2px solid #cccccc;
    color: #f7931e;
}
#chat .header .tab.active{
    border: 2px solid #f7931e;
    color: white;
}
#chat .header .tab:nth-of-type(1){
    margin-left: 11px;
}
#chat .header .tab:nth-of-type(2){
    margin-left: 19px;
}
#chat .header .tab:nth-of-type(3){
    margin-left: 19px;
}
#chat .inner-holder {
    /*display: inline-block;*/
    display: none;
    position: absolute;
    width: 100%;
    height: 506px;/*470px;*/
    vertical-align: top;
    margin-top: 0/*10px;*/
}
#chat .inner-holder.active {
    display: block;
}
#chat .inner-holder input {
   width: 134px;
}
#chat .inner-holder .rules {
    margin-left: 13px;
    margin-top: -2px;
    display: inline-block;
    width: 95px;
    height: 35px;
    background: url("../chat/rules_sprite.png");
}
#chat .inner-holder .rules:hover {
    background-position-y: -35px;
}
#chat .inner-holder textarea {
    display: inline-block;
    width: 783px;
    height: 27px;
    font: 12px/26px 'titilliumWebSemiBold';
    background: #1a1a1a;
    border: 1px solid #cccccc;
    border-radius: 4px;
    margin-left: 37px;
    color: #999999;
    padding-left: 16px;
    vertical-align: top;
    overflow-y: hidden;
}
#chat .inner-holder button{
    margin-top: 2px;
    /*top: -1px;*/
    vertical-align: top;
}
#chat .inner-holder button.chat{
    width: 27px;
    height: 27px;
    background: url("../chat/send_sprite.png");
    position: absolute;
    bottom: 23px;
    right: 57px;
    border: none;
}
#chat .inner-holder button.chat:hover{
    background-position-y: -27px;
}
#chat .inner-holder .special-info{
    color: red;
    font: 10px/16px 'titilliumWebSemiBold';
    width: 80%;

    position: absolute;
    bottom: 8px;
    right: 50px;
}
#chat .chat-rules-holder {
    height: 489px;
    position: absolute;
    top: 0px;
    font: 14px/23px 'titilliumWebSemiBold';
    color: white;
    background: #3f4651;
    border: 1px solid darkgrey;
    padding: 30px 100px;
    overflow-y: scroll;
}
#chat  .chat-rules-holder .title {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 20px;
    color: #f7931e;
    font: 26px/28px 'titilliumWebSemiBold';
}
#chat  .chat-rules-holder .inner-rules {
    padding-bottom: 41px;
}
#chat .inner-holder > .text-holder {
    /*width: 83%;*/
    height: 442px/*406px*/;
    margin-bottom: 12px;
    /*background: white;*/
    overflow-y: scroll;
    border-bottom: 1px solid rgba(128, 128, 128, 0.70);
}
#chat .inner-holder > .text-holder > li {
    position: relative;
    /*width: 196px;*/
    min-height: 66px;
    list-style-type: none;
    margin-left: -40px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.70);
    /*background: url("../chat/line_under_each_message.png") no-repeat bottom;*/
}
#chat .inner-holder > .text-holder > li.already-read {
    color: #999999;
    font: 12px/28px 'titilliumWebSemiBold';
    border-bottom: 1px solid #00ffff;
}
#chat .inner-holder > .text-holder > li.already-read {
    color: #999999;
    font: 12px/28px 'titilliumWebSemiBold';
    border-bottom: 1px solid #00ffff;
}
#chat .inner-holder > .text-holder > li:nth-of-type(1) {
    margin-top: 31px;
}
#chat .inner-holder > .text-holder > li  .flag{
    margin: 0 auto;
    margin-top: 5px;
}
#chat .inner-holder > .text-holder > li  .usr-level{
    padding: 0 0;
    display: inline-block;
    width: 56px;
    margin-left: -8px;
    text-align: center;
}
#chat .inner-holder > .text-holder > li  .action {
    /*position: relative;*/
    position: absolute;
    display: inline-block;
    background: lightblue;
    width: 16px;
    height: 31px;
    background: url("../chat/more_sprite.png");
    float: right;
    right: 14px;
    top: 3px;
}
#chat .inner-holder > .text-holder > li  .action:hover {
    background-position-y: 31px;
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder {
    position: absolute;
    width: 176px;
    /*height: 78px;*/
    min-height: 78px;
    background: #1a1a1a;
    border: 1px solid #b3b3b3;
    color: #cccccc;
    z-index: 1;
    right: 11px;
    font: 14px/18px 'titilliumWebSemiBold';
    /*margin-top: -21px;*/
    bottom: -26px;
    padding: 4px 0px;
}
#chat .inner-holder > .text-holder > li > .action .action-options-holder > span{
    /*position: absolute;*/
    margin-left: 11px;
    color: white;
    border: 1px solid black;
    background: #00ff00;
    padding: 2px 4px;
    border-radius: 3px;
}
#chat .inner-holder > .text-holder > li > .action .action-options-holder > span:hover{
    filter:brightness(145%);
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder > span.remove{
    /*position: absolute;*/
    /*top: 15px;*/
    /*left: 24px;*/
    /*position: relative;*/
    margin-left: 19px;
    /*top: 8px;*/
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder > span.ban-user{
    /*position: absolute;*/
    /*top: 43px;*/
    /*left: 24px;*/
    /*position: relative;*/
    margin-left: 19px;
    /*top: 9px;*/
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder > span.report-user,
#chat .inner-holder > .text-holder > li  .action .action-options-holder > span.mute-user{
    /*position: relative;*/
    margin-left: 19px;
    /*top: 6px;*/
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder > .x {
    top: -2px;
    right: 3px;
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder > .options-available-text {
    display: block;
    margin-left: 10px;
    margin-top: 6px;
}
#chat .inner-holder > .text-holder > li  .action .action-options-holder > span:not(.options-available-text):hover{
    filter: brightness(130%);
}
#chat .inner-holder > .text-holder > li .macro-outer {
    width: 79px;
    height: 60px;
    display: inline-block;
    vertical-align: top;
    background: url("../chat/line_between_userpicture_and_level.png") no-repeat right;
}
#chat .inner-holder > .text-holder > li .macro-holder {
    position: absolute;
    width: 56px;
    /*left: -24px;*/
    top: -44px;
}
#chat .inner-holder > .text-holder > li .flag-holder {
    display: inline-block;
    vertical-align: top;
    /*margin-left: 79px;*/
    padding-left: 15px;
    /*border-left: 1px solid white;*/
    padding-right: 15px;
    /*border-right: 1px solid white;*/
    /*background: url("../chat/line_between_lvl_and_text.png") no-repeat right;*/
    width: 41px;
}
#chat .inner-holder > .text-holder > li .right-holder{
    /*margin-left: 30px;*/
    padding-left: 30px;
    /*width: 770px;*/
    width: 734px;
    display: inline-block;
    background: url("../chat/line_between_lvl_and_text.png") no-repeat left;
    min-height: 67px;
}
#chat .inner-holder > .text-holder > li .flag-holder > span {
    color: white;
    font: 12px/26px 'titilliumWebSemiBold';
}
#chat .inner-holder > .text-holder > li .flag-holder > span.usr-level.expert {
    color: #ed1c24;
}
#chat .inner-holder > .text-holder > li .flag-holder > span.usr-level.intermediate {
    color: #fdc80c;
}
#chat .inner-holder > .text-holder > li .flag-holder > span.usr-level.beginner {
    color: #39b54a;
}
#chat .inner-holder > .text-holder > li > .right-holder > span:nth-of-type(1) {
    font: 12px/26px 'titilliumWebSemiBold';
    color: #f7931e;
    vertical-align: top;
}
#chat .inner-holder > .text-holder > li > .right-holder > span:nth-of-type(1).developer {
    /*color: #ff0000;*/
    /*color: greenyellow;*/
}
#chat .inner-holder > .text-holder > li > .right-holder > span:nth-of-type(1).developer .developer-spec {
     color: greenyellow;
}
#chat .inner-holder > .text-holder > li > .right-holder > span:nth-of-type(1).moderator .developer-spec {
    color: #f9f908;
}
#chat .inner-holder > .text-holder > li > .right-holder > span:nth-of-type(3) {
    font: 12px/16px 'titilliumWebSemiBold';
    color: white;
    word-wrap: break-word;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#chat .inner-holder > .text-holder > li > .right-holder > span:nth-of-type(2) {
    font: 12px/26px 'titilliumWebRegular';
    color: #666666;
    vertical-align: top;
    margin-left: 11px;
}
#chat .inner-holder > .text-holder > li.already-read > .right-holder > span:nth-of-type(3) {
    color: #999999;
}
#chat .inner-holder > .input-holder {
    width: 100%;
    height: 15%;
    background: orange;
}
#chat .inner-holder.country{
    /*background: #7da8ed;*/
}
#chat .inner-holder.general{
    /*background: lightpink;*/
}
#chat .sub-header {
    /*top: 50px;*/
    background: rgba(0,0,0,0.7);
    font: 10px/10px 'titilliumWebRegular';
    padding: 8px 0px 8px 82px;
    color: red;
}

#trainingCamp .trainingCamp_holder .red {
    color: red;
    font-size: 13px;
}
#trainingCamp .trainingCamp_holder .head {
    font-size:13px;
}
#game_holder .screen-loading {
    position: absolute;
    top: 0;

    width: 100%;
    height: 550px;

    /* NEEDED FOR ISSUES IN CHROME with scaling */
    transform: translateZ(0);
    background: #ffffff url('../images/new/warClicks/loading_screen/loading_bg_no_logo_improved.jpg');
}
#game_holder .screen-loading .holder {
    margin-top: 90px;
    width: 1000px;
    height: calc(100% - 136px);
    text-align: center;
    max-width: 100%;
}
#game_holder .screen-loading .black_bar {
    position: relative;
    width: 360px;
    height: 34px;

    padding: 3px;
    text-align: center;
}
#game_holder .screen-loading .black_bar .name {
    display: inline-block;
    padding-right: 6px;
    font: normal 20px/28px 'titilliumWebRegular';
    vertical-align: top;

    color: white;
}
#game_holder .screen-loading .black_bar .name span {
    font: normal 23px/32px 'titilliumWebBold';
}
#game_holder .screen-loading .holder .loading-progress {
    position: relative;
    display: inline-block;
    margin-top: 244px;

    width: 500px;
    height: 40px;

    border: 2px solid #f7931e;

    background: white;
    transform: skewX(-15deg);
}
#game_holder .screen-loading .loading-game {
    position: relative;

    margin: 1px;
    width: 498px;
    height: 38px;
}
#game_holder .screen-loading .loading-game:after {
    background: #f7931e;
    transition: transform 100ms;
}
#game_holder .screen-loading .progress-percent {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    font: normal 22px/38px 'titilliumWebBold';
    transform: translateZ(0);
    color: white;
    text-align: center;
    text-shadow: 1px 1px 0 #f7931e, -1px 1px 0 #f7931e, 1px -1px 0 #f7931e, -1px -1px 0 #f7931e, 1px 0 0 #f7931e, 0 1px 0 #f7931e, -1px 0 0 #f7931e, 0 -1px 0 #f7931e;
}
#game_holder .screen-loading .loaded:hover {
    border: 2px solid black;
}
#game_holder .screen-loading .loaded .progress-percent:hover {
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black, 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#game_holder .screen-loading .loading-animation {
    position: relative;
    left: 0;
    top: 0;
    padding-top: 0px;
    width: 100%;
    height: 256px;
    color: #ffffff;
}
#game_holder .screen-loading .loading-animation .loading-info {
    text-align: center;
}
#game_holder .screen-loading .loading-animation > div:not(.ending) {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    animation: explosionLoading 1.26s infinite;
    animation-timing-function: steps(1);
    background: url("../images/new/warZone/sprite_realExplosion_minimized.png") 0 0;
    background-size: 300%;
    opacity: 0;
}
#game_holder .screen-loading .loading-animation .boom {
    opacity: 0;
    left: 360px;
    width: 256px;
    height: 256px;
    position: absolute;
}
#game_holder .screen-loading .loading-animation .boom.activated {
    background: url("../images/new/warZone/sprite_realExplosion_minimized.png") 0 0;
    animation: explosionRealistic 1s;
    animation-timing-function: steps(1);
}
#game_holder .screen-loading .loading-animation .wc-logo {
    left: calc(50% - 158px);
    width: 316px;
    height: 55px;
    top: 75px;
    position: absolute;
    background: #000 url("../images/new/warClicks/homepage/logo.png") no-repeat center;
    transition: opacity 1s;
    padding: 20px;
    opacity: 0;
}
#game_holder .screen-loading .loading-animation .wc-logo.activated {
    opacity: 1;
}
#game_holder .screen-loading .loading-animation > div:not(.wc-logo) {
    transition: opacity 0.14s;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(1) {
    top: 0;
    left: 484px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(2) {
    animation-delay: 0.14s;
    top: 26px;
    left: 534px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(3) {
    animation-delay: 0.28s;
    top: 76px;
    left: 557px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(4) {
    animation-delay: 0.42s;
    top: 133px;
    left: 537px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(5) {
    animation-delay: 0.56s;
    top: 163px;
    left: 489px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(6) {
    animation-delay: 0.7s;
    top: 147px;
    left: 436px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(7) {
    animation-delay: 0.84s;
    top: 107px;
    left: 401px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(8) {
    animation-delay: 0.98s;
    top: 62px;
    left: 398px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(9) {
    animation-delay: 1.12s;
    top: 16px;
    left: 431px;
}/*
#game_holder .screen-loading .loading-animation > div:nth-of-type(10) {
    animation-delay: 0.9s;
    top: 10px;
    left: 430px;
}*/
/*
#game_holder .screen-loading .loading-animation > div:nth-of-type(1) {
    top: 0;
    left: 200px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(2) {
    animation-delay: 0.1s;
    top: 50px;
    left: 225px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(3) {
    animation-delay: 0.2s;
    top: 100px;
    left: 250px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(4) {
    animation-delay: 0.3s;
    top: 150px;
    left: 275px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(5) {
    animation-delay: 0.4s;
    top: 100px;
    left: 300px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(6) {
    animation-delay: 0.5s;
    top: 150px;
    left: 325px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(7) {
    animation-delay: 0.6s;
    top: 100px;
    left: 350px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(8) {
    animation-delay: 0.7s;
    top: 50px;
    left: 375px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(9) {
    animation-delay: 0.8s;
    top: 0px;
    left: 400px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(10) {
    animation-delay: 0.9s;
    top: 0px;
    left: 450px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(11) {
    animation-delay: 1s;
    top: 0px;
    left: 500px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(12) {
    animation-delay: 1s;
    top: 50px;
    left: 450px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(13) {
    animation-delay: 1.1s;
    top: 0px;
    left: 550px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(14) {
    animation-delay: 1.1s;
    top: 100px;
    left: 450px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(15) {
    animation-delay: 1.2s;
    top: 150px;
    left: 450px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(16) {
    animation-delay: 1.3s;
    top: 150px;
    left: 500px;
}
#game_holder .screen-loading .loading-animation > div:nth-of-type(17) {
    animation-delay: 1.4s;
    top: 150px;
    left: 550px;
}*/
@keyframes explosionLoading {
    /*0%		{ background-position: 0 0; opacity: 1.0; }
    11%		{ background-position: -256px 0; }
    22%		{ background-position: -512px 0; }
    33%		{ background-position: 0 -256px; }
    44%		{ background-position: -256px -256px; }
    55%		{ background-position: -512px -256px; }
    66%		{ background-position: 0px -512px; }
    77%		{ background-position: -256px -512px; }
    88%		{ background-position: -515px -512px; }
    0%		{ background-position: 0 0; opacity: 1.0; }*/
    0%		{ background-position: 0 0; opacity: 1.0; }
    7%		{ background-position: -50px 0; }
    14%		{ background-position: -100px 0; }
    21%		{ background-position: 0 -50px; }
    28%		{ background-position: -50px -50px; }
    35%		{ background-position: -100px -50px; }
    42%		{ background-position: 0px -100px; }
    49%		{ background-position: -50px -500px; }
    56%		{ background-position: -100px -100px; opacity: 0.5; }
    56%		{ background-position: -100px -100px; opacity: 0; }
    100%		{ background-position: -100px -100px; opacity: 0; }
}


/*
#game_holder .screen-loading .holder .loading-progress .progress-percent {
    position: absolute;

    top: 7px;
    left: 50%;

    margin-left: -250px;

    width: 500px;
}*/
/*
#game_holder .screen-loading .holder .loading-progress .bar_fill {
    position: relative;

    margin: 1px;

    width: 498px;
    height: 38px;

    background: #ed1c24;
}*/

#game_holder .screen-loading .holder .info {
    position: relative;

    /*width: calc(900px - 2 * 32px);*/
    width: 518px;
    height: calc(80px - 2 * 16px);

    margin: 0 auto;
    margin-top: 13px;

    /*padding: 16px 32px;*/
    /*background: url('../images/new/warClicks/loading_screen/black_square.jpg');
    background-size: 100%;*/

    transform: skewX(-15deg);
}
#game_holder .screen-loading .holder .info >span {
    display: inline-block;

    height: 100%;

    vertical-align: middle;
}
#game_holder .screen-loading .holder .info >div {
    display: inline-block;
    vertical-align: middle;
    font: 16px/20px 'titilliumWebSemiBold';
    color: #ffffff;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    text-align: center;
    transform: skewX(15deg);
}
@keyframes loadingBar {
    0%      { width: 0; }
    100%    { width: 498px; }
}
@keyframes switchScreenRotation{
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
#game_holder .screen-loading .holder .tank_holder {
    position: relative;
    margin-top: -80px;
    width: 100%;
    height: 300px;
    text-align: center;
}
#game_holder .screen-loading .holder .tank {
    position: absolute;
    display: inline-block;
    opacity: 0.0;

    bottom: 0;
    margin-left: -123px;

    width: 246px;
    height: 108px;
    transform: translateX(250px);

/*    animation: tank 11s linear;*/
}
#game_holder .screen-loading .holder .tank .shadow {
    position: absolute;

    top: 0;
    left: 0;

    margin-top: 38px;
    width: 246px;
    height: 108px;

    background: url("../images/loading_tank.png") 0 -216px;
}
#game_holder .screen-loading .holder .tank .body {
    position: absolute;
    top: 0;
    left: 0;

    margin-top: 5px;
    width: 246px;
    height: 108px;
    background: url("../images/loading_tank.png") 0 0;
    transform-origin: 44% 76%;
    animation: tankBody 500ms steps(1) 20;
}
#game_holder .screen-loading .holder .tank .tracks {
    position: absolute;

    top: 0;
    left: 0;
    width: 246px;
    height: 108px;
    background: url("../images/loading_tank.png") 0 -108px;
    animation: tankTracks 200ms steps(1) 50;
}
#game_holder .screen-loading .holder .tank .target {
    position: absolute;
    top: 0;
    left: 0;
    margin: 2px 0 0 2px;
    width: 61px;
    height: 61px;
    background: url("../images/target_loading.png") 0 0;
    animation: target 5s infinite;
}
#game_holder .screen-loading .holder .tank .explosionBullet {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    background: url("../images/explosion2.png") 0 0;
    animation: explosionBullet 500ms steps(1) infinite, explosionBulletScale 5s steps(1) infinite, target 5s steps(1) infinite;
}
#game_holder .screen-loading .holder .tank .a {
    position: absolute;
    top: 54px;
    left: 123px;
}
#game_holder .screen-loading .holder .tank .b {
    position: absolute;
    top: 64px;
    left: 173px;
}
#game_holder .screen-loading .holder .tank .c {
    position: absolute;
    top: 64px;
    left: 63px;
}
#game_holder .screen-loading .holder .tank .explosionTank {
    position: absolute;
    opacity: 0.0;
    margin: -32px 0 0 -32px;
    width: 64px;
    height: 64px;
    background: url("../images/explosion1.png") 0 0;
    transform: scale(2.0);
}
#game_holder .screen-loading .holder .tank .bodyDebris {
    position: absolute;
    opacity: 0.0;
    margin: -218px 0 0 -348px;

    width: 600px;
    height: 400px;
    background: url("../images/debris.png") 0 0;
    transform-origin: 348px 218px;
}
@keyframes tank {
    0%		{ transform: translateX(-250px); opacity: 1.0; }
    100%	{ transform: translateX(250px); opacity: 1.0; }
}
@keyframes tankBody {
    0%		{ transform: rotate(0.5deg); }
    25%		{ transform: rotate(-0.5deg); }
    50%		{ transform: rotate(0deg); }
}
@keyframes tankTracks {
    0%		{ background-position: 0 -108px; }
    50%		{ background-position: -246px -108px; }
}
@keyframes target {
    0%		{ left: 16px; top: 12px; }
    10%		{ left: 32px; top: 8px; }
    20%		{ left: 8px; top: 16px; }
    30%		{ left: 64px; top: 8px; }
    40%		{ left: 16px; top: 32px; }
    50%		{ left: 8px; top: 16px; }
    60%		{ left: 128px; top: 64px; }
    70%		{ left: 200px; top: 32px; }
    80%		{ left: 64px; top: 16px; }
    90%		{ left: 16px; top: 8px; }
    100%	{ left: 16px; top: 12px; }
}
@keyframes explosionBulletScale {
    0%		{ transform: scale(1.0); }
    10%		{ transform: scale(1.3); }
    20%		{ transform: scale(0.7); }
    30%		{ transform: scale(0.7); }
    40%		{ transform: scale(1.2); }
    50%		{ transform: scale(0.7); }
    60%		{ transform: scale(1.3); }
    70%		{ transform: scale(1.0); }
    80%		{ transform: scale(0.7); }
    90%		{ transform: scale(0.9); }
    100%	{ transform: scale(1.0); }
}
@keyframes explosionBullet {
    0%		{ background-position: 0 0; }
    6%		{ background-position: -64px 0; }
    13%		{ background-position: -128px 0; }
    19%		{ background-position: -192px 0; }
    25%		{ background-position: 0 -64px; }
    31%		{ background-position: -64px -64px; }
    38%		{ background-position: -128px -64px; }
    44%		{ background-position: -192px -64px; }
    50%		{ background-position: 0 -128px; }
    56%		{ background-position: -64px -128px; }
    63%		{ background-position: -128px -128px; }
    69%		{ background-position: -192px -128px; }
    75%		{ background-position: 0 -192px; }
    81%		{ background-position: -64px -192px; }
    88%		{ background-position: -128px -192px; }
    94%		{ background-position: -192px -192px; }
}
@keyframes explosionTank {
    0%		{ background-position: 0 0; opacity: 1.0; }
    6%		{ background-position: -64px 0; }
    13%		{ background-position: -128px 0; }
    19%		{ background-position: -192px 0; }
    25%		{ background-position: 0 -64px; }
    31%		{ background-position: -64px -64px; }
    38%		{ background-position: -128px -64px; }
    44%		{ background-position: -192px -64px; }
    50%		{ background-position: 0 -128px; }
    56%		{ background-position: -64px -128px; }
    63%		{ background-position: -128px -128px; }
    69%		{ background-position: -192px -128px; }
    75%		{ background-position: 0 -192px; }
    81%		{ background-position: -64px -192px; }
    88%		{ background-position: -128px -192px; }
    94%		{ background-position: -192px -192px; }
}
@keyframes debris {
    0%		{ opacity: 1.0; transform: scale(0.2); }
    100%	{ opacity: 1.0; transform: scale(0.8); }
}
@keyframes explosionRealistic {
    0%		{ background-position: 0 0; opacity: 1.0; }
    11%		{ background-position: -256px 0; }
    22%		{ background-position: -512px 0; }
    33%		{ background-position: 0 -256px; }
    44%		{ background-position: -256px -256px; }
    55%		{ background-position: -512px -256px; }
    66%		{ background-position: 0px -512px; }
    77%		{ background-position: -256px -512px; }
    88%		{ background-position: -515px -512px; }
}
#curtain {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}
/* VIDEO */
#w_video {
    position: absolute;
    z-index: 900;
    top: 0;
    left: 0;
    right: 0;

    display: none;
}
#w_video .content{
    position: relative;

    margin: 0 auto;

    padding: 3px;
    height: calc(550px - 2 * 3px);
    width: 767px;
    background: #c2b49b;
}
#w_video .content .head {
    margin: 2px;
    padding-left: 10px;
    width: calc(100% - 15px);
    background: #ed1f26;
    border-radius: 12px;
    font: 38px/40px 'titilliumWebRegular';
    color: white;
}
#w_video .content .head .close {
    float: right;
    margin: 4px 4px 0 0;

    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font: 30px/32px 'titilliumWebRegular';
    color: black;

    background: #ffffff;
}
#w_video .content .head .close:hover {
    background: none;
    border: 1px solid white;

    margin: 3px 3px 0 0;
    color: white;
}
#w_video .content .inner_content {
    position: relative;

    margin: 2px;
    padding: 10px;
    width: calc(100% - 24px);
    height: calc(100% - 40px - 2 * 3px - 2 * 10px);

    font: 14px/18px 'titilliumWebBold';
    color: black;
    text-align: center;
    overflow-y: auto;
}
#w_video .button {
    position: relative;
    display: inline-block;

    margin: 8px auto;

    padding: 0 8px;

    border-radius: 8px;
    font: 16px/25px 'titilliumWebBold';
    color: white;

    background: #ed1f26;
}
#w_video .button:hover {
    color: black;
    background: white;
}
#w_video span.switch {
    display: inline-block;

    margin-left: 5px;

    width: 27px;
    height: 27px;
    vertical-align: middle;
    transform: scale(0.8);
    opacity: 0.5;
    background: url('../images/warZone/wc_yes_no.png')
}
#w_video span.switch:hover {
    transform: scale(1.0);

    opacity: 1;
}
#w_video span.switch.yes {
    background-position-x: 0;
}
#w_video span.switch.no {
    background-position-x: -27px;
}
/* END VIDEO */


/* OFFER WALL CSS  */
#offerwall {
    position: absolute;
    /*z-index: 900;*/

    top: 0;
    left: 0;
    right: 0;
    display: none;
}
#offerwall .content{
    position: relative;

    margin: 0 auto;

    height: 550px;
    /*width: 767px;*/

    /*background: #c2b49b;*/
    background: #3f4651;
    box-shadow: 0 0 5px black;
}
#offerwall .content .head {
    padding-left: 100px;

    width: calc(100% - 100px);
    height: 45px;
    /*background: #ed1f26;*/


    border-radius: 12px;

    font: 24px/45px 'titilliumWebRegular';
    text-align: left;
    color: #f7931e;;
}
#offerwall .content .head .close {

    position: absolute;
    display: inline-block;
    top: 6px;
    right: 16px;

    width: 36px;
    height: 36px;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") -36px 0;
}
#offerwall .content .close:hover {
    background-position-y: -36px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#offerwall .frame-holder {
    position: relative;

    height: calc(100% - 40px - 3px);

    overflow-y: auto;
    overflow-x: hidden;
}
#offerwall .special-offer-promo {
    position: absolute;
    z-index: 1;
    left: 26px;
    top: 93px;
    width: 125px;
}
#offerwall .special-offer-promo span {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px 5px;
    width: 115px;
    font: 13px/17px 'titilliumWebSemiBold';
    color: #ffff00;
    text-align: center;
    background: #f15a24;
}
#offerwall #offer_options {
    position: relative;
    text-align: left;
    padding: 5px 100px;
    background: #2e333a;
}
#offerwall .offer-option {
    position: relative;
    display: inline-block;
    color: #b3b3b3;
    /*width: 250px;*/
    width: 123px;
    height: 28px;
    text-align: center;
    font: 15px/26px 'titilliumWebSemiBold';
    background: url('../images/new/warClicks/shop/buttons_offerwall_sprite.png') 0 -28px;
    margin-right: 11px;
}
#offerwall .offer-option.active {
    background-position-y: 0px;
    color: #c1272d;
}
#offerwall .offer-option:hover {
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
    background-position-y: 0px;
    color: #c1272d;
}
#offerwall .offer-option > div {
    position: absolute;
    display: inline-block;

    top: -13px;
    right: 7px;

    padding: 4px 7px;
    height: 10px;
    font: 10px/10px 'titilliumWebBold';
    color: #ffffff;

    pointer-events: none;
    border-radius: 3px;
}
#offerwall .offer-option > div.new {
    background: #1ba324;
}
#offerwall .offer-option > div.bonus-gold {
    background: #f15a24;
}
#offerwall .offer-option .gold {
    transform: scale(0.6);
    margin-top: -10px;
    margin-left: -3px;
    position: relative;
    top: 4px;
}
#offerwall .offerwall-intro{
    padding: 10px;
    color: white;
    text-align: center;
    margin-bottom: 20px;
    font: 15px/22px 'titilliumWebRegular';
}
#offerwall .offerwalls-note {
    padding: 10px;
    margin-top: 20px;
    color: white;
    text-align: center;
    font: 14px/24px 'titilliumWebRegular';
}
#offerwall .offers-home {
    display: none;
    margin: 10px auto;
    padding: 1px 8px;
    width: 260px;

    border-radius: 8px;
    font: 15px/25px 'titilliumWebSemiBold';
    color: #000000;
    text-align: center;

    background: #f7931e;
}
#offerwall .offers-home:hover {
    color: #ffffff;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#offerwall .frame-holder {
    background: #3f4651 url(../../assets/images/loading_new_32.gif) center no-repeat;
}
#offerwall .offerwall {
    position: absolute;
    opacity: 0;
    /*z-index:1;*/
    top: 10px;
    pointer-events: none;
}
#offerwall .offerwall > div {
    position: relative;
    margin: 0 auto;
    width: 800px;
}
#offerwall .active-offerwall {
    opacity: 1;
    /*z-index: 900 !important;*/
    background: #3f4651;
    /*width: 100%;*/
    width: 85%;
    /*margin-left: 75px;*/
    margin-left: 148px;
    pointer-events: auto;
}

/* WOOBI ADS */
iframe {
    position: relative;
    z-index:1000;
}
#offerwall iframe {
    z-index: 0;
}
#modalHelp iframe  {
     z-index: auto;
}

#modalPayment iframe  {
    z-index: auto;
}
.start-ads {
    display: none;
    position: absolute;
    bottom: 5px;
    left: 450px;
    width: 100px;
    height: 100px;

    background: url('../images/shop/shop_gold.png') -400px 0;

    text-align: center;
    font: 25px/25px 'titilliumWebRegular';
    color: #ffffff;
    text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;

    transform: scale(0.8);
}
.start-ads:hover {
    opacity: 0.8;
    transform: scale(1);
}
.start-ads span {
    position: relative;
    top: 20%;
}
/* WOOBI ADS END */

.rotate180 {
    animation: anim_white_arrow_180 1s ease-in infinite !important;
}
.asm_promo {
    color: #ee1d25;
    text-decoration: underline;
}
.asm_promo:hover {
    color: #000000;
}
/* TUTORIAL END */


/* CONFIRMATION SCREEN */
#confirmation_screen {
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -125px;
    width: 200px;
    padding: 20px;
    background: #c2b49b;
    border-radius: 10px;
    border: 5px solid #96876b;
    font: 18px/18px 'titilliumWebRegular';
    z-index: 940;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}
#confirmation_screen div {
    margin-bottom: 10px;
}
#confirmation_screen span {
    display: inline-block;
    background: #96876b;
    width: 27px;
    height: 27px;
}
#confirmation_screen span:hover {
    opacity: 0.7;
}
#confirmation_screen .yes{
    float: left;
    background: url('../images/warZone/wc_yes_no.png');
}
#confirmation_screen .no {
    float: right;
    background: url('../images/warZone/wc_yes_no.png') -27px 0;
}
/* END CONFIRMATION SCREEN */
#confirmation_modal {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -125px;
    width: 225px;
    padding: 20px;
    background: #5f6772;
    /*border: 5px solid #3f4651;*/
    border: solid 2px white;
    color: #ffffff;
    font: 15px/18px 'titilliumWebRegular';
    z-index: 940;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
    pointer-events: auto;
}
#confirmation_modal.simpocalypse {
    top: 134px;
}
#confirmation_modal.choose-front {
    top: 179px;
    left: 418px;
}
#confirmation_modal.ban-user {
    z-index: 2;
    top: 278px;
    left: 826px;
}
#confirmation_modal.choose-front .x {
    top: -1px;
    right: 3px;
}
#confirmation_modal.save-positions {
    top: 179px;
    left: 418px;
}
#confirmation_modal.save-positions .x {
    top: -1px;
    right: 3px;
}
#confirmation_modal.country-hq {
    width: 245px;
}
#confirmation_modal.events-popup {
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    margin-left: 0;
    border: none;
    box-shadow: none;
    background: rgba(0,0,0,0.5);
}
#confirmation_modal.events-popup > .holder {
    position: absolute;
    top: calc(50% - 100px);
    left: 50%;

    width: 260px;
    padding: 20px;

    margin-left: -150px;

    background: #5f6772;
    border: solid 2px white;
}
#confirmation_modal > div {
    margin-bottom: 10px;
}
#confirmation_modal span:not(.spec5) {
    display: inline-block;
    background: #96876b;
    width: 27px;
    height: 27px;
}
#confirmation_modal span:hover {
    opacity: 0.7;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#confirmation_modal span.yes{
    float: left;
    background: url('../images/warZone/wc_yes_no.png');
}
#confirmation_modal span.no {
    float: right;
    background: url('../images/warZone/wc_yes_no.png') -27px 0;;
}
#confirmation_modal span.important {
    display: block;
    width: auto;
    height: auto;

    color: #ffff00;
    margin-bottom: 10px;
    font: 14px/16px 'titilliumWebRegular';
    background: transparent;
}
#confirmation_modal span.important:hover {
    opacity: 1;
}

/* special modal classes */
#confirmation_modal.deploy-conf {
    border: solid 2px white;
}
#confirmation_modal.informational,
#confirmation_modal.informational-wide {
    text-align: center;
}
#confirmation_modal.deploy-conf .text,
#confirmation_modal.bribe .text,
#confirmation_modal.country-hq .text,
#confirmation_modal.informational .text,
#confirmation_modal.informational-wide .text,
#confirmation_modal.events-popup .text {
    color: white !important;
    margin-top: 9px !important;
}
#confirmation_modal.country-hq .text,
#confirmation_modal.informational .text,
#confirmation_modal.informational-wide .text,
#confirmation_modal.events-popup .text {
    text-align: left;
}
#confirmation_modal.deploy-conf .yes,
#confirmation_modal.bribe .yes,
#confirmation_modal.country-hq .yes,
#confirmation_modal.events-popup .yes {
    width: 102px;
    height: 28px;
    background: url("../images/new/warClicks/clouds/confirm_reject_button_sprite.png");
}
#confirmation_modal.deploy-conf .no,
#confirmation_modal.bribe .no,
#confirmation_modal.country-hq .no,
#confirmation_modal.events-popup .no{
    width: 101px;
    height: 28px;
    background: url("../images/new/warClicks/clouds/confirm_reject_button_sprite.png");
    background-position-x:-104px;
}
#confirmation_modal.country-hq .no,
#confirmation_modal.events-popup .no {
    float: left;
    margin-left: 10px;
}
#confirmation_modal.save-positions .go-back {
    float: none;
    padding: 3px 15px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    font: 16px/16px 'titilliumWebSemiBold';
    background: #f7931e;
    height: auto;
    width: auto;
}
#confirmation_modal.save-positions .stay {
    float: none;
    padding: 3px 15px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    font: 16px/16px 'titilliumWebSemiBold';
    background: #f7931e;
    height: auto;
    width: auto;
    margin-left: 45px;
}
#confirmation_modal .yes.ok {
    float: none;
    padding: 3px 15px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    font: 16px/16px 'titilliumWebSemiBold';
    background: #f7931e;
    height: auto;
}
#confirmation_modal.country-hq {
    top: calc(50% - 110px);
}
#confirmation_modal.informational-wide {
    top: calc(50% - 110px);
    width: 340px;
}
#confirmation_modal.country-hq .x,
#confirmation_modal.events-popup .x,
#confirmation_modal.informational .x,
#confirmation_modal.informational-wide .x {
    right: 0;
}
/* end special modal classes */
/* CONFIRMATION MODAL */


/* END CONFIRMATION MODAL */

/* Explosion animation holder */
#game_holder .modal-explosion {
    position: absolute;
    opacity: 0.0;
    /*z-index: 1;*/
    pointer-events: none;

    left: calc(50% - 34px);
    top: calc(50% - 34px);
    width: 256px;
    height: 256px;
    background: url("../images/new/warZone/sprite_realExplosion_minimized.png") 0 0;
}
#game_holder .modal-debris {
    position: absolute;
    opacity: 0.0;
    z-index: 1;
    pointer-events: none;

    left: calc(50% - 300px);
    top: calc(50% - 200px);

    margin: -218px 0 0 -348px;

    width: 600px;
    height: 400px;

    background: url("../images/debris.png") 0 0;
    transform-origin: 348px 218px;
}
#game_holder .info-node .info-popup {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;

    background: #96876b;
    padding: 10px;
    width: 100px;
    color: #ffffff;
    font: 10px/12px 'titilliumWebRegular';
    text-align: left;
}
#game_holder .flight-value {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.5);
    z-index: 1;
    font: 14px/16px 'titilliumWebRegular';
    color: #ffffff;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#main_container .value_icon {
    display: inline-block;

    margin: 4px 0 0 4px;
    width: 21px;
    height: 20px;
    background: url("../images/value_icon.png");
    vertical-align: top;
}
#game_holder .icon {
    display: inline-block;
    width: 26px;
    height: 20px;
    vertical-align: middle;
}
#game_holder  .icon.battle-stars {
    background: url("../images/warZone/battle_star.png");
    background-size: auto 100%;
    width: 13px;
}

/* REWORK CSS ADDITIONS!! BELOW HERE */

/* MAKES fonts generic between all by default? - potential performance considerations */
/** {
    font: 12px/12px 'openSansRegular';
}*/

.disabled {
    pointer-events: none;
    opacity: 0.8;
}
.not-displayed {
    display: none !important;
}
.not-available {
    display: none !important;
}
#profileOverlay {
    position: absolute;
    top: 0;
    left: 0px;
    width: 241px;
    height: 252px;
    background: rgba(123,123,123,0.6);
    background: url("../images/new/warClicks/profile_under.png") no-repeat left -3px top -3px;
    font: 12px/12px 'titilliumWebRegular';
}
#profileOverlay .profile-img{
    position: absolute;
    margin-top: 23px;
    margin-left: 21px;
    width: 43px;
    height: 40px;
    border-radius: 50%;
    /*background: url("../images/new/warClicks/profile_image.png") no-repeat top;*/
}
#profileOverlay .profile-img.custom{
    background: none;
}
#profileOverlay .level-progress {
    position: absolute;
    margin-left: 46px;
    width: 31px;
    color: white;
    height: 31px;
    border-radius: 50%;
    background: #4d4d4d;
    margin-top: 37px;
    text-align:center;
    border: 1px solid #ffffff;
}
#profileOverlay .level-progress .level-info {
    font: 8px/2px 'titilliumWebRegular';
    color: #ffffff;
    text-align: center;
}
#profileOverlay .level-progress .level-info span {
    font: 12px/20px 'titilliumWebRegular';
}
.arc-wrapper {
    transform: scale(1.2);
    width: 30px; /* Set the size of the progress bar */
    height: 30px;
    position: absolute; /* Enable clipping */
    clip: rect(0px, 30px, 30px, 15px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.arc {
    width: 24px;
    height: 24px;
    border: 3px solid #f7931e;
    border-radius: 50px;
    position: absolute;
    clip: rect(0px, 15px, 30px, 0px);
    transform-origin: 15px 15px;
    transition: transform 0.5s;
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
    will-change: transform;
}
.arc-wrapper[data-progress^="0.5"],
.arc-wrapper[data-progress^="0.6"],
.arc-wrapper[data-progress^="0.7"],
.arc-wrapper[data-progress^="0.8"],
.arc-wrapper[data-progress^="0.9"],
.arc-wrapper[data-progress^="1"]{
    clip: rect(auto, auto, auto, auto);
}
.arc-wrapper[data-progress="0"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.0"] .arc[data-anim~=right]{
    transform: rotate(0deg);
}
.arc-wrapper[data-progress^="0.01"] .arc[data-anim~=right] {
    transform: rotate(3deg);
}
.arc-wrapper[data-progress^="0.02"] .arc[data-anim~=right] {
    transform: rotate(7deg);
}
.arc-wrapper[data-progress^="0.03"] .arc[data-anim~=right] {
    transform: rotate(10deg);
}
.arc-wrapper[data-progress^="0.04"] .arc[data-anim~=right] {
    transform: rotate(14deg);
}
.arc-wrapper[data-progress^="0.05"] .arc[data-anim~=right] {
    transform: rotate(18deg);
}
.arc-wrapper[data-progress^="0.06"] .arc[data-anim~=right] {
    transform: rotate(21deg);
}
.arc-wrapper[data-progress^="0.07"] .arc[data-anim~=right] {
    transform: rotate(25deg);
}
.arc-wrapper[data-progress^="0.08"] .arc[data-anim~=right] {
    transform: rotate(28deg);
}
.arc-wrapper[data-progress^="0.09"] .arc[data-anim~=right] {
    transform: rotate(32deg);
}
.arc-wrapper[data-progress^="0.1"] .arc[data-anim~=right] {
    transform: rotate(36deg);
}
.arc-wrapper[data-progress^="0.11"] .arc[data-anim~=right] {
    transform: rotate(39deg);
}
.arc-wrapper[data-progress^="0.12"] .arc[data-anim~=right] {
    transform: rotate(43deg);
}
.arc-wrapper[data-progress^="0.13"] .arc[data-anim~=right] {
    transform: rotate(46deg);
}
.arc-wrapper[data-progress^="0.14"] .arc[data-anim~=right] {
    transform: rotate(50deg);
}
.arc-wrapper[data-progress^="0.15"] .arc[data-anim~=right] {
    transform: rotate(54deg);
}
.arc-wrapper[data-progress^="0.16"] .arc[data-anim~=right] {
    transform: rotate(57deg);
}
.arc-wrapper[data-progress^="0.17"] .arc[data-anim~=right] {
    transform: rotate(61deg);
}
.arc-wrapper[data-progress^="0.18"] .arc[data-anim~=right] {
    transform: rotate(54deg);
}
.arc-wrapper[data-progress^="0.19"] .arc[data-anim~=right] {
    transform: rotate(68deg);
}
.arc-wrapper[data-progress^="0.2"] .arc[data-anim~=right] {
    transform: rotate(72deg);
}
.arc-wrapper[data-progress^="0.21"] .arc[data-anim~=right] {
    transform: rotate(75deg);
}
.arc-wrapper[data-progress^="0.22"] .arc[data-anim~=right] {
    transform: rotate(79deg);
}
.arc-wrapper[data-progress^="0.23"] .arc[data-anim~=right] {
    transform: rotate(82deg);
}
.arc-wrapper[data-progress^="0.24"] .arc[data-anim~=right] {
    transform: rotate(86deg);
}
.arc-wrapper[data-progress^="0.25"] .arc[data-anim~=right] {
    transform: rotate(90deg);
}
.arc-wrapper[data-progress^="0.26"] .arc[data-anim~=right] {
    transform: rotate(93deg);
}
.arc-wrapper[data-progress^="0.27"] .arc[data-anim~=right] {
    transform: rotate(97deg);
}
.arc-wrapper[data-progress^="0.28"] .arc[data-anim~=right] {
    transform: rotate(100deg);
}
.arc-wrapper[data-progress^="0.29"] .arc[data-anim~=right] {
    transform: rotate(104deg);
}
.arc-wrapper[data-progress^="0.3"] .arc[data-anim~=right] {
    transform: rotate(108deg);
}
.arc-wrapper[data-progress^="0.31"] .arc[data-anim~=right] {
    transform: rotate(111deg);
}
.arc-wrapper[data-progress^="0.32"] .arc[data-anim~=right] {
    transform: rotate(115deg);
}
.arc-wrapper[data-progress^="0.33"] .arc[data-anim~=right] {
    transform: rotate(118deg);
}
.arc-wrapper[data-progress^="0.34"] .arc[data-anim~=right] {
    transform: rotate(122deg);
}
.arc-wrapper[data-progress^="0.35"] .arc[data-anim~=right] {
    transform: rotate(126deg);
}
.arc-wrapper[data-progress^="0.36"] .arc[data-anim~=right] {
    transform: rotate(129deg);
}
.arc-wrapper[data-progress^="0.37"] .arc[data-anim~=right] {
    transform: rotate(133deg);
}
.arc-wrapper[data-progress^="0.38"] .arc[data-anim~=right] {
    transform: rotate(136deg);
}
.arc-wrapper[data-progress^="0.39"] .arc[data-anim~=right] {
    transform: rotate(140deg);
}
.arc-wrapper[data-progress^="0.4"] .arc[data-anim~=right] {
    transform: rotate(144deg);
}
.arc-wrapper[data-progress^="0.41"] .arc[data-anim~=right] {
    transform: rotate(147deg);
}
.arc-wrapper[data-progress^="0.42"] .arc[data-anim~=right] {
    transform: rotate(151deg);
}
.arc-wrapper[data-progress^="0.43"] .arc[data-anim~=right] {
    transform: rotate(154deg);
}
.arc-wrapper[data-progress^="0.44"] .arc[data-anim~=right] {
    transform: rotate(158deg);
}
.arc-wrapper[data-progress^="0.45"] .arc[data-anim~=right] {
    transform: rotate(162deg);
}
.arc-wrapper[data-progress^="0.46"] .arc[data-anim~=right] {
    transform: rotate(165deg);
}
.arc-wrapper[data-progress^="0.47"] .arc[data-anim~=right] {
    transform: rotate(169deg);
}
.arc-wrapper[data-progress^="0.48"] .arc[data-anim~=right] {
    transform: rotate(172deg);
}
.arc-wrapper[data-progress^="0.49"] .arc[data-anim~=right] {
    transform: rotate(176deg);
}
.arc-wrapper[data-progress^="0.5"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.6"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.7"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.8"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.9"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="1"] .arc[data-anim~=right] {
    transform: rotate(180deg);
}

.arc-wrapper[data-progress^="0.45"] .arc[data-anim~=left] {
    transform: rotate(162deg);
}
.arc-wrapper[data-progress^="0.46"] .arc[data-anim~=left] {
    transform: rotate(165deg);
}
.arc-wrapper[data-progress^="0.47"] .arc[data-anim~=left] {
    transform: rotate(169deg);
}
.arc-wrapper[data-progress^="0.48"] .arc[data-anim~=left] {
    transform: rotate(172deg);
}
.arc-wrapper[data-progress^="0.49"] .arc[data-anim~=left] {
    transform: rotate(176deg);
}
.arc-wrapper[data-progress^="0.5"] .arc[data-anim~=left] {
    transform: rotate(180deg);
}
.arc-wrapper[data-progress^="0.51"] .arc[data-anim~=left] {
    transform: rotate(183deg);
}
.arc-wrapper[data-progress^="0.52"] .arc[data-anim~=left] {
    transform: rotate(187deg);
}
.arc-wrapper[data-progress^="0.53"] .arc[data-anim~=left] {
    transform: rotate(190deg);
}
.arc-wrapper[data-progress^="0.54"] .arc[data-anim~=left] {
    transform: rotate(194deg);
}
.arc-wrapper[data-progress^="0.55"] .arc[data-anim~=left] {
    transform: rotate(198deg);
}
.arc-wrapper[data-progress^="0.56"] .arc[data-anim~=left] {
    transform: rotate(201deg);
}
.arc-wrapper[data-progress^="0.57"] .arc[data-anim~=left] {
    transform: rotate(205deg);
}
.arc-wrapper[data-progress^="0.58"] .arc[data-anim~=left] {
    transform: rotate(208deg);
}
.arc-wrapper[data-progress^="0.59"] .arc[data-anim~=left] {
    transform: rotate(212deg);
}
.arc-wrapper[data-progress^="0.6"] .arc[data-anim~=left] {
    transform: rotate(216deg);
}
.arc-wrapper[data-progress^="0.61"] .arc[data-anim~=left] {
    transform: rotate(219deg);
}
.arc-wrapper[data-progress^="0.62"] .arc[data-anim~=left] {
    transform: rotate(223deg);
}
.arc-wrapper[data-progress^="0.63"] .arc[data-anim~=left] {
    transform: rotate(226deg);
}
.arc-wrapper[data-progress^="0.64"] .arc[data-anim~=left] {
    transform: rotate(230deg);
}
.arc-wrapper[data-progress^="0.65"] .arc[data-anim~=left] {
    transform: rotate(234deg);
}
.arc-wrapper[data-progress^="0.66"] .arc[data-anim~=left] {
    transform: rotate(237deg);
}
.arc-wrapper[data-progress^="0.67"] .arc[data-anim~=left] {
    transform: rotate(241deg);
}
.arc-wrapper[data-progress^="0.68"] .arc[data-anim~=left] {
    transform: rotate(244deg);
}
.arc-wrapper[data-progress^="0.69"] .arc[data-anim~=left] {
    transform: rotate(248deg);
}
.arc-wrapper[data-progress^="0.7"] .arc[data-anim~=left] {
    transform: rotate(252deg);
}
.arc-wrapper[data-progress^="0.71"] .arc[data-anim~=left] {
    transform: rotate(255deg);
}
.arc-wrapper[data-progress^="0.72"] .arc[data-anim~=left] {
    transform: rotate(259deg);
}
.arc-wrapper[data-progress^="0.73"] .arc[data-anim~=left] {
    transform: rotate(262deg);
}
.arc-wrapper[data-progress^="0.74"] .arc[data-anim~=left] {
    transform: rotate(266deg);
}
.arc-wrapper[data-progress^="0.75"] .arc[data-anim~=left] {
    transform: rotate(270deg);
}
.arc-wrapper[data-progress^="0.76"] .arc[data-anim~=left] {
    transform: rotate(273deg);
}
.arc-wrapper[data-progress^="0.77"] .arc[data-anim~=left] {
    transform: rotate(277deg);
}
.arc-wrapper[data-progress^="0.78"] .arc[data-anim~=left] {
    transform: rotate(280deg);
}
.arc-wrapper[data-progress^="0.79"] .arc[data-anim~=left] {
    transform: rotate(284deg);
}
.arc-wrapper[data-progress^="0.8"] .arc[data-anim~=left] {
    transform: rotate(288deg);
}
.arc-wrapper[data-progress^="0.81"] .arc[data-anim~=left] {
    transform: rotate(291deg);
}
.arc-wrapper[data-progress^="0.82"] .arc[data-anim~=left] {
    transform: rotate(295deg);
}
.arc-wrapper[data-progress^="0.83"] .arc[data-anim~=left] {
    transform: rotate(298deg);
}
.arc-wrapper[data-progress^="0.84"] .arc[data-anim~=left] {
    transform: rotate(302deg);
}
.arc-wrapper[data-progress^="0.85"] .arc[data-anim~=left] {
    transform: rotate(306deg);
}
.arc-wrapper[data-progress^="0.86"] .arc[data-anim~=left] {
    transform: rotate(309deg);
}
.arc-wrapper[data-progress^="0.87"] .arc[data-anim~=left] {
    transform: rotate(313deg);
}
.arc-wrapper[data-progress^="0.88"] .arc[data-anim~=left] {
    transform: rotate(316deg);
}
.arc-wrapper[data-progress^="0.89"] .arc[data-anim~=left] {
    transform: rotate(320deg);
}
.arc-wrapper[data-progress^="0.9"] .arc[data-anim~=left] {
    transform: rotate(324deg);
}
.arc-wrapper[data-progress^="0.91"] .arc[data-anim~=left] {
    transform: rotate(327deg);
}
.arc-wrapper[data-progress^="0.92"] .arc[data-anim~=left] {
    transform: rotate(331deg);
}
.arc-wrapper[data-progress^="0.93"] .arc[data-anim~=left] {
    transform: rotate(334deg);
}
.arc-wrapper[data-progress^="0.94"] .arc[data-anim~=left] {
    transform: rotate(338deg);
}
.arc-wrapper[data-progress^="0.95"] .arc[data-anim~=left] {
    transform: rotate(342deg);
}
.arc-wrapper[data-progress^="0.96"] .arc[data-anim~=left] {
    transform: rotate(345deg);
}
.arc-wrapper[data-progress^="0.97"] .arc[data-anim~=left] {
    transform: rotate(349deg);
}
.arc-wrapper[data-progress^="0.98"] .arc[data-anim~=left] {
    transform: rotate(352deg);
}
.arc-wrapper[data-progress^="0.99"] .arc[data-anim~=left] {
    transform: rotate(356deg);
}
.arc-wrapper[data-progress^="1"] .arc[data-anim~=left] {
    transform: rotate(360deg);
}
#profileOverlay .world-title{
    /*width: 185px;*/
    height: 23px;
    color: #f7931e;
    font: 11px/11px 'titilliumWebBold';
    /*margin-left: 86px;*/
    margin-top: 19px;
    display: inline-block;
    float: left;
}
#profileOverlay .world-title:hover {
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#profileOverlay .rank_holder{
    position: absolute;
    width: 32px;
    height: 32px;
    background: sandybrown;
    font-size: 15px;
    margin-left: 45px;
    margin-top: 5px;
    border-radius: 50%;
}
#profileOverlay .user-details{
    /*width: 215px;*/
    width: 177px;
    height: 38px;
    margin-left: 80px;
}
#profileOverlay .user-details .flag{
    position: absolute;
    margin-top: 3px;
    margin-right: 14px;
    float: left;
    margin-left: 5px;
}
#profileOverlay .user-details .flag.uu{
    background: url("../images/new/warClicks/flags_new_updated.png");
    background-position: -416px -448px;
}
#profileOverlay .user-details .username{
    width: 105px;
    height: 21px;
    float: left;
    font: 11px/18px 'titilliumWebRegular';
    text-align: left;
    color: white;
    padding-left: 4px;
    /*margin-left: 54px;*/
    position: absolute;
    top: 43px;
    left: 130px;
}
#profileOverlay .user-details .username:hover{
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#profileOverlay .user-details .goals-all, #profileOverlay .user-details .ranks-all{
    /*position: absolute;*/
    /*margin-left: 157px;*/
    margin-left: 8px;
    display: inline-block;
    top: 21px;
    width: 30px;
    height: 14px;
    background: url('../images/new/warClicks/more_ranks_sprite_min.png') 0 0px;
    background-size: 100%;
    vertical-align: middle;
    margin-top: 19px;
}
#profileOverlay .user-details .goals-all:hover, #profileOverlay .user-details .ranks-all:hover {
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
    background-position-y: -15px;
}
#profileOverlay .currency{
    position: relative;
    width: 168px;
    height: 25px;
    margin-left: 16px;
    margin-top: 41px;
}
#profileOverlay .currency .icon{
    display: inline-block;
    vertical-align: middle;
    margin-top: -9px;
}
#profileOverlay .currency .value{
    width: 63px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    color: white;
    text-align: center;
    line-height: 20px;
}
#profileOverlay .convert-icon{
    width: 39px;
    height: 19px;
    vertical-align: middle;
    background: url("../../assets/images/new/bootCamp/bc_splosno/convert_icon_sprite_min.png");
    position: absolute;
    left: 143px;
    top: 81px;
    /*z-index: 2;*/
}
#profileOverlay .time-warps-icon{
    width: 46px;
    height: 42px;
    vertical-align: middle;
    background: url("../../assets/images/new/warClicks/wc_splosno/time_warp.png");
    position: absolute;
    left: 134px;
    top: 105px;
}
/* TODO improve the way of handlign these modular animations */
#profileOverlay .currency-change-holder {
    position: absolute;
    left: 0;
    top: 0;
}
#profileOverlay .change {
    position: absolute;
    opacity: 0.0;
    left: 4px;
    top: 12px;
    font: 12px/12px 'titilliumWebRegular';
    color: black;
    white-space: nowrap;
    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 4px white, 0 0 8px white, 0 0 16px white, 0 0 24px white, 0 0 32px white, 0 0 64px white, 0 0 64px white;
    pointer-events: none;
}
.change.anim_1 {
    animation: change_1 0.75s linear;
}
@keyframes change_1 {
    0%      { opacity: 0.0; transform: translate(0, 0) scale(0.25); }
    50%     { opacity: 1.0; transform: translate(16px, 0px) scale(1.0); }
    100%    { opacity: 0.0; transform: translate(32px, -12px) scale(1.25); }
}

#profileOverlay .gold{
    position: relative;
    width: 120px;
    height: 28px;
    margin-left: 11px;
    margin-top: 5px;
}
#profileOverlay .gold .icon{
    margin-top: -6px;
    margin-left: 7px;
    display:inline-block;
    vertical-align:middle;
}
#profileOverlay .gold .value{
    width: 61px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: white;
    line-height: 23px;
}
#profileOverlay .gold .more{
    padding: 8px !important;
    position: absolute !important;
    background-clip: content-box !important;
    background-size: auto !important;
    background-position: 9px 9px !important;
    margin-top: -2px !important;
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    background: url("../../assets/images/new/warClicks/more_gold_sprite_min.png") no-repeat;
}
#profileOverlay .damage{
    position: relative;
    width: 94px;
    height: 29px;
    margin-left: 18px;
    margin-top: -5px;
}
#profileOverlay .damage .icon{
    width: 20px;
    height: 20px;
    margin-top: 9px;
    margin-left: -1px;
    display: inline-block;
    vertical-align: middle;
}
#profileOverlay .damage .value{
    width: 40px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    line-height: 36px;
    text-align: center;
}
#menuOverlay {
    position: absolute;
    top: 0px;
    right: 9px;
    width: 697px;
    height: 60px;
    pointer-events: none;
}
#menuOverlay .left{
    display: inline-block;
    width: 400px;
    height: 40px;
    background: url("../../assets/images/new/warClicks/under_main_button.png") top no-repeat;
    text-align: center;
    margin-left: 12px;
    margin-top: -1px;
}
#menuOverlay .left.helloween{
    background: url("../../assets/images/new/warClicks/under_main_button_helloween.png") top no-repeat;
}
#menuOverlay .left .switchTo{
    width: 300px;
    height: 44px;
    margin: 0 auto;
    margin-top: 10px;
    margin-left: 47px;
}
#menuOverlay .left .switchTo .active {
    margin-top: -1px;
}
#menuOverlay .left .switchTo .bootCamp{
    position: absolute;
    display:inline-block;
    width: 150px;
    height: 42px;
    background: url("../../assets/images/new/warClicks/main_buttons_sprite.png?v=3") ;
    left: 59px;

    pointer-events: auto;
}
#menuOverlay .left .switchTo .bootCamp .bc-number {
    position: absolute;
    bottom: 3px;
    right: 0;
    width: 94px;
    text-align: left;
    font: 9px/14px 'titilliumWebSemiBold';
    color: #ddcbb8;
}
#menuOverlay .left .switchTo .bootCamp.not-active .bc-number {
    opacity: 0;
}
#menuOverlay .left .switchTo .warZone{
    position: absolute;
    display: inline-block;
    width: 150px;
    height: 42px;
    background: url("../../assets/images/new/warClicks/main_buttons_sprite.png?v=3") ;
    background-position-x: 150px;
    left: 209px;

    pointer-events: auto;
}
#menuOverlay .left .switchTo.helloween .bootCamp{
    background: url("../../assets/images/new/warClicks/soldier_zombie_v3.png") ;
}
#menuOverlay .left .switchTo.helloween .warZone{
    background: url("../../assets/images/new/warClicks/soldier_zombie_v3.png") ;
    background-position-x: 150px;
}

#menuOverlay .left .switchTo .bootCamp.active, #menuOverlay .left .switchTo .warZone.active{
    background-position-y: -42px;
}
#menuOverlay .left .switchTo .bootCamp.not-active, #menuOverlay .left .switchTo .warZone.not-active{
    background-position-y: -1px;
}
#menuOverlay .left .switchTo .bootCamp.not-active:hover, #menuOverlay .left .switchTo .warZone.not-active:hover{
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
    /*filter: brightness(150%);*/
    /*transform:scale(1.10);*/
    background-position-y: 42px;
    z-index: 1;
}
#menuOverlay .right{
    position: relative;
    display: inline-block;
    /*width: 216px;*/
    width: 280px;
    height: 60px;
    text-align: right;
    vertical-align: top;
    /*margin-left: 53px;*/
    margin-left: 0px;
}
#menuOverlay .right .social{
    display: inline-block;
    width: 57px;
    height: 60px;
}
#menuOverlay .right > div{
    vertical-align: top;
}
#menuOverlay .right .social > div{
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-top: 10px;
}
#menuOverlay .right .social > a > div{
    display:inline-block;
    width:22px;
    height:22px;
    margin-top:10px;
    position: relative;
}
/*#menuOverlay .right .social > div:hover{*/
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
    /*filter: brightness(102%);*/
/*}*/
#menuOverlay .right .social .fb{
    background: url("../../assets/images/new/warClicks/fb.png") ;
}
#menuOverlay .right .social .fb:hover, #menuOverlay .right .social .tw:hover{
    filter: brightness(108%);
}
#menuOverlay .right .social .tw{
    background: url("../../assets/images/new/warClicks/tw.png") ;
}
#gameHelp {
    display: inline-block;
    width: 63px;
    height: 60px;
    background: url('../images/new/warClicks/wc_splosno/help_icon_transparent.png');
    background-size: 100% 100%;
    transform: scale(0.50);
    margin-right: -31px;
    margin-top: -8px;
    pointer-events: auto;
}
#gameHelp:hover {
    transform: scale(0.7);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#event {
    position: absolute;
    top: 0px;
    left: -25px;
    display: inline-block;
    width: 69px;
    height: 60px;
    margin-top: 5px;

    text-align: center;
    font: 10px/18px 'titilliumWebSemiBold';
    color: #ddcbb8;

    background: url('../images/new/eventGame/event_icon/next_event.png') no-repeat top;

    pointer-events: auto;
}
#event.disabled {
    display: none !important;
}
#event:hover .calendar-icon {
    filter: brightness(150%);
}
#event .calendar-icon {
    position: relative;

    display: inline-block;
    width: 50px;
    height: 54px;

    top: -8px;

    background: url('../images/new/eventGame/event_icon/event_icon.png');
}
#event .timer {
    position: absolute;
    left: 3px;

    bottom: 13px;
    width: 44px;

    text-align: center;
    font: 10px/16px 'titilliumWebSemiBold';
    color: #ffffff;
}
#specialBoosts {
    position: absolute;
    top: 37px;
    right: 55px;

    width: 143px;
    height: 25px;
    /*padding-top: 15px;*/
    padding-top: 14px;
    /*padding-left: 40px;*/
    padding-left: 52px;

    text-align: center;
    pointer-events: auto;

    /*background: url('../images/new/eventGame/snowball_booster_button.png');*/
    /*background: url('../images/new/eventGame/special_booster_bg.png');*/
    background: url('../images/new/eventGame/special_booster_bg_santa.png');
    /*background: url('../images/new/eventGame/special_booster_bg_downtime.png');*/
}
#specialBoosts .boost-title {
    font: 11px/12px 'titilliumWebBold';
    color: #ffffff;
}
#specialBoosts .boosts {
    font: 10px/12px 'titilliumWebSemiBold';
    color: #f7931e;

}
#specialBoosts .boosts span {
    font: 10px/12px 'titilliumWebBold';
}
#dailyReset {
    display: inline-block;
    width: 70px;
    height: 36px;
    background: url('../images/new/warClicks/wc_splosno/daily_reset_icon.png');
    margin-top: 5px;
    margin-right: -5px;
    pointer-events: auto;
}
#dailyReset:hover {
    filter: brightness(125%);
    /*transform: scale(1.02);*/
}
#dailyReset .time-left {
    font: 10px/14px 'titilliumWebSemiBold';
    width: 40px;
    height: 14px;
    margin-left: 5px;
    margin-top: 3px;
}
#dailyReset .time-left > div {
    color: white;
    display: inline-block;
}
#menuOverlay .right .menus{
    font: 11px/11px 'titilliumWebRegular';
    position: relative;
    display:inline-block;
    /*width: 101px;*/
    width: 124px;
    height: 41px;
    pointer-events: auto;
}
#menuOverlay .right .menus > div{
    margin-top:7px;
    width:30px;
    height:30px;
    vertical-align:middle;
    background: url("../../assets/images/new/warClicks/settings_menu_icon_03.png") ;
}
#menuOverlay .right .menus > div:not(.burger-menu){
    display:inline-block;
}
#menuOverlay .right .menus .settings{
    background-position: 0;
}
#menuOverlay .right .menus .settings:hover{
    transform: scale(1.2);
}
#menuOverlay .expandFullScreen{
    position: absolute;
    right: 39px;
    margin-top: -49px;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    background: url("../../assets/images/new/warClicks/expand_ff_white_small.png") ;
    background-size: 100% 100%;
    pointer-events: auto;
    display: block;
}
#menuOverlay .expandFullScreen:hover{
    transform:scale(1.15);
}
#menuOverlay .right .menus .burger{
    background-position: 30px;
    margin-left: 39px;
}
#menuOverlay .right .menus .burger:hover{
    transform: scale(1.2);
}
#menuOverlay .right .menus .burger-menu{
    position: absolute;
    top: 0px;
    right: -5px;
    width: 125px;
    height: auto;
    color: white;
    background: #4d4d4d;
    text-align: right;
    padding-right: 27px;
    /*padding-top: 4px;*/
    padding-top: 35px;
    padding-bottom: 10px;
    z-index: 3;
}
#menuOverlay .right .menus .burger-menu > a{
    display:block;
    color:white;
    text-decoration: none;
    font: 14px/26px 'titilliumWebSemiBold';
}
#menuOverlay .right .menus .burger-menu > a:hover{
    filter: brightness(130%);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#menuOverlay .right .menus .burger-menu .refer {
    font: 14px/26px 'titilliumWebSemiBold';
}
#menuOverlay .right .menus .burger-menu .other-games,
#menuOverlay .right .menus .burger-menu .announcements {
    font: 14px/26px 'titilliumWebSemiBold';
}
#menuOverlay .right .menus .burger-menu .about-us {
    font: 14px/26px 'titilliumWebSemiBold';
}
#game_holder .switchTo.warZone {
    background-position: 0 44px;
}
#buttonsOverlay {
    position: absolute;
    top: 178px;
    left: 15px;
    height: 50px;
    /*text-align: center;*/


    text-align: left;
    width: 90px;
}
#buttonsOverlay .function-icons {
    margin-right: 8px;
    width: 34px;
    height: 33px;
    display: inline-block;
    background: url("../../assets/images/new/warClicks/stats_icon_sprite_min.png");
}
#buttonsOverlay .function-icons.achievements {
    margin-right: 14px;
}
#buttonsOverlay .function-icons.milestones:hover{
    background-position-y: 33px;
}
#buttonsOverlay .function-icons.country-invasion{
    background-position: -46px;
}
#buttonsOverlay .function-icons.second-prestige{
    height: 34px;
    background: url("../images/new/bootCamp/second_prestige_icon.png");
}
#buttonsOverlay .function-icons.second-prestige .pending-tasks{
    margin-top: 18px;
    margin-left: 22px;
    width: 22px;
    height: 22px;
    background: url("../chat/chat_notification_icon.png");
    transform: scale(0.82);
}
#buttonsOverlay .function-icons.research-system{
    position: relative;
    height: 34px;
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/command_centre_icon.png");
    background-size: 100% 100%;
}
#buttonsOverlay .function-icons.research-system .notification-icon {
    transform: scale(0.82);
    /*top: -1px;*/
    top: 17px;
    /*right: -10px;*/
    right: -12px;
}
#expirablesOverlay {
    position: absolute;
    bottom: -5px;
    right: 52px;
    /*width: 322px;*/
    width: 400px;
    height: 60px;
    text-align: right;
}
#expirablesOverlay .extra.summer-pack {
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 43px;
    top: 7px;
    /*left: 20px;*/
    left: 59px;
    background: url("../../assets/images/new/warClicks/wc_splosno/summer_pack_icon.png");
}
#expirablesOverlay .one-time-deal{
    position: absolute;
    display: inline-block;
    width: 46px;
    height: 46px;
    top: 4px;
    left: 1px;
    background: url("../../assets/images/new/warClicks/wc_splosno/one_time_deal_button_1.png");
}
#expirablesOverlay .one-time-deal > .time-left{
    position: absolute;
    bottom: 3px;
    color: white;
    text-align: center;
    width: 47px;
}
#expirablesOverlay .one-time-deal > .time-left > div{
    display: inline-block;
    font: 10px/14px 'titilliumWebSemiBold';
}
#expirablesOverlay .offerwalls {
    position: absolute;
    display: inline-block;
    width: 83px;
    height: 32px;
    top: 13px;
    /*left: 20px;*/
    left: 124px;
    background: url("../../assets/images/new/warClicks/wc_splosno/free_gold_icon.png");
}
#expirablesOverlay .offerwalls:hover {
    animation: anim_scale_101112 1.1s infinite ease-in-out;
}
#expirablesOverlay .offerwalls.offer-bonus {
    top: -3px;
    /*left: 10px;*/
    width: 93px;
    height: 48px;
    /*background: url("../../assets/images/new/warClicks/shop/rework/free_gold.png");*/
    background: url("../../assets/images/new/warClicks/shop/rework/free_gold_10.png");
}
#expirablesOverlay .offerwalls .extra-percent {
    background: white;
    position: relative;
    top: 3px;
    left: 19px;
    height: 14px;
    width: 27px;
    color: #feba6c;
    font: 12px/12px 'titilliumWebSemiBold';
    text-align: left;
    text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}
#expirablesOverlay .offerwalls.kongregate {
    position: absolute;
    display: inline-block;
    width: 96px;
    height: 45px;
    top: 13px;
    /*left: 20px;*/
    left: 124px;
    background: url("../../assets/images/free_kreds.png");
}
#expirablesOverlay .offerwalls .free-kreds-text {
    position: absolute;
    top: 6px;
    left: 22px;
    font: 12px/13px 'titilliumWebRegular';
    width: 60px;
}
#expirablesOverlay .time-icon {
    display: inline-block;
    width: 50px;
    height: 40px;
    margin-top: 10px;
    margin-right: -8px;
    vertical-align: top;
    /*background: url("../../assets/images/new/warClicks/time_icons_sprite_max.png");*/
    background: url("../../assets/images/new/warClicks/time_icons_sprite_max_new.png");
}
#expirablesOverlay .time-icon:hover {
    animation: anim_scale_101112 1.1s infinite ease-in-out;
}
#expirablesOverlay .time-icon.flicker {
    animation: anim_scale_101112 1.1s infinite ease-in-out;
}
#expirablesOverlay .time-icon.gifts{
    background-position: 0px;
    position: absolute;
    right: 158px;;
    animation: anim_scale_1011 0.8s infinite ease-in-out;
}

#expirablesOverlay .time-icon.video{
    background-position: 100px;
    position: relative;
    color: #ffffff;
    font: 23px/28px 'titilliumWebSemiBold';
    text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
    padding-left: 3px;
    width: 47px;
    text-align: center;
}
#expirablesOverlay .time-icon.video.disabled {
    opacity: 0.7;
}
#expirablesOverlay .time-icon.video span{
    position: relative;
    top: -3px;
    left: -3px;
    display: block;
    color: #ffffff;
    font: 10px/10px 'titilliumWebSemiBold';
    text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}
#expirablesOverlay .time-icon.video:hover:after {
    /*animation: anim_scale_101112_opposite 1.1s infinite ease-in-out;*/
}
#expirablesOverlay .time-icon.video .timer {
    position: absolute;
    bottom: 3px;
    width: 80%;
    text-align: center;
    font: 10px/12px 'titilliumWebSemiBold';
    color: #ffffff;
    text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}
#expirablesOverlay .time-icon.video .bonus-reward {
    position: absolute;
    top: -6px;
    right: 7px;
    padding: 2px 8px;
    background: url("../../assets/images/new/warClicks/wc_splosno/bonus_background.png");
    background-size: 100% 100%;


    width: 51px;
    right: -5px;
    /*font: 10px/10px 'titilliumWebBold';*/
    font: 10px/9px 'titilliumWebRegular';
    color: #000000;

}
#expirablesOverlay .time-icon.task-list{

    display: none !important;
    background-position: 50px;
}
#expirablesOverlay .shop {
    position: relative;
    display: inline-block;
    width: 59px;
    height: 47px;
    background: url("../../assets/images/new/warClicks/shop_icon.png");
    background-size: 100%;
}
#expirablesOverlay .shop:hover {
    animation: anim_scale_101112 1.1s infinite ease-in-out;
}
#expirablesOverlay .shop.flicker {
    animation: anim_scale_101112 1.1s infinite ease-in-out;
}
#expirablesOverlay .shop .active-sale {
    position: absolute;
    top: -9px;
    top: -14px;
    left: 11px;
    left: 7px;
    display: inline-block;
    width: 51px;
    width: 54px;
    height: 15px;
    height: 25px;
    /*background: url('../../assets/images/new/warClicks/wc_splosno/sale.png');*/
    background: url('../../assets/images/new/warClicks/wc_splosno/sale_new_box.png');
    font: 11px/11px 'titilliumWebSemiBold';
    text-align: center;
    color: #ffffff;
    background-size: 100% 100%;
    padding-top: 3px;
}
#expirablesOverlay .shop .active-sale > span {
    font: 10px/10px 'titilliumWebSemiBold';
    color: #84171f;
}
#expirablesOverlay .chat {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 47px;
    background: green;
}
#game_holder .icon {
    width: 19px;
    height: 21px;
    display: inline-block;
    background: url("../../assets/images/new/warClicks/wc_splosno/sp_5_currency_icons_min.png");
}
#game_holder .icon.battle_stars {
    background-position: 0px;
}
#game_holder .icon.gold {
    background-position: -19px;
}
#game_holder .icon.damage {
    background-position: -57px;
}
#game_holder .icon.score {
    background-position: -38px;
}
#game_holder .icon.pp, #game_holder .icon.power_points {
    background-position: -76px;
}
#game_holder .icon.pvp {
    background-position: -95px;
}
#game_holder .icon.kreds {
    margin-top: -2px;
    margin-right: 2px;
    width: 17px;
    height: 17px;
    background: url("../../assets/images/new/warClicks/shop/kred_single.png");
}
#game_holder .icon.kreds.big {
    width: 25px;
    height: 25px;
    background: url("../../assets/images/new/warClicks/wc_splosno/kred_single_25_25.png");
}
#game_holder .widget-icon {
    width: 44px;
    height: 50px;
    background: url("../../assets/images/new/warClicks/pomozne_ikone_sprite_v2.png");
}
#game_holder .widget-icon:hover{
    filter: brightness(110%);
}
#game_holder .tutArrow {
    pointer-events: none;
    position: absolute;
    display: none;
    top: 373px;
    left: 98px;
    width: 120px;
    height: 73px;
    background: url("../../assets/images/new/warClicks/arrow_bigger.png");
    animation: tutArrow 1.0s ease-in-out infinite;
}
#game_holder .tutArrow.up {
    margin-top: 52px;
    margin-left: -13px;
    transform: scale(0.8) rotate(-90deg);
    animation: tutArrowUp 1.0s ease-in-out infinite;
}
#game_holder .tutArrow.down {
     margin-top: 52px;
     margin-left: -13px;

     transform: scale(0.8) rotate(90deg);
     animation: tutArrowDown 1.0s ease-in-out infinite;
 }
#game_holder .tutArrow.right {
    margin-top: 52px;
    margin-left: -13px;

    transform: scale(0.8) rotate(0deg);

    animation: tutArrowRight 1.0s ease-in-out infinite;
}
#game_holder .tutArrow.left {
    margin-top: 52px;
    margin-left: -13px;

    transform: scale(0.8) rotate(180deg);

    animation: tutArrowLeft 1.0s ease-in-out infinite;
}
@keyframes tutArrow {
    0%     { transform: scale(0.8); }
    50%    { transform: scale(0.5); }

}
@keyframes tutArrowUp {
    0%     { transform: scale(0.8) rotate(-90deg); }
    50%    { transform: scale(0.5) rotate(-90deg); }
}
@keyframes tutArrowDown {
    0%     { transform: scale(0.8) rotate(90deg); }
    50%    { transform: scale(0.5) rotate(90deg); }
}
@keyframes tutArrowRight {
     0%     { transform: scale(0.8) rotate(0deg); }
     50%    { transform: scale(0.5) rotate(0deg); }
}
@keyframes tutArrowLeft {
    0%     { transform: scale(0.8) rotate(180deg); }
    50%    { transform: scale(0.5) rotate(180deg); }
}
#game_holder .tutorialHuman {
    position: absolute;
    left: 150px;
    top: 300px;
    width: 106px;
    height: 106px;
    background: url('../images/new/warClicks/wc_splosno/soldier.png') no-repeat;
}
#game_holder .tutArrowInfo {
    display: none;
    color: #4d4d4d;
    background: white;
    width: 175px;
    position: absolute;
    left: 150px;
    padding: 13px;
}
#game_holder .tutArrowInfo .icon{
    margin-top: -7px;
    margin-bottom: -5px;
    transform: scale(0.84);
}
#game_holder .tutArrowInfo .text{
    color: #4d4d4d;
    font: 12px/15px 'titilliumWebBold';
}
#game_holder .tutArrowInfo .text .tip{
    font: 11px/14px 'titilliumWebRegular';
    font-style: italic;
}
#game_holder .tutArrowInfo .button{
    font: 12px/14px 'titilliumWebBold';
    color: white;
    background: #7B9B5D;
    width: 50%;
    border-radius: 6px;
    text-align: center;
    padding: 4px;
    margin-top: 7px;
}
#game_holder .tutArrowInfo .button.skip-tutorial {
    font: 10px/12px 'titilliumWebSemiBold';
    color: #808080;
    width: auto;
    padding: 0;
    background: none;
    text-decoration: underline;
    display: inline-block;
    position: relative;
    bottom: -8px
}
#game_holder .widget-icon:hover{
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#game_holder .tutArrowInfo .power_points{
    height: 15px;
    width: 17px;
    margin-bottom: -9px;
    margin-top: -11px;
}
#game_holder .widget-icon.announcement{
    background-position: 0px 0px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 17px;
    margin-left: 8px;
}
#game_holder .widget-icon.announcement:hover {
    background-position: 0px -50px;
}
#game_holder .widget-icon.daily-mission{
    background-position: -44px 0;
    display: inline-block;
    vertical-align: middle;
    margin-top: 24px;
    margin-left: 6px;
}
#game_holder .widget-icon.daily-mission:hover{
    background-position: -44px -50px;
}
#game_holder .widget-icon.standings {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    margin-left: 8px;
    background-position: -88px 0;
}
#game_holder .widget-icon.standings:hover {
    background-position: -88px -50px;
}
#game_holder .widget-icon.competitions {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    margin-left: 8px;
    background-position: -132px 0;
}
#game_holder .widget-icon.competitions:hover {
    background-position: -132px -50px;
}
#game_holder .triangle{
    display:inline-block;
    margin-left: 5px;
    vertical-align: middle;
    width: 21px;
    height: 21px;
    background: url("../../assets/images/new/warClicks/close_open.png") right center;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#game_holder #announcementWidget .triangle{
    margin-top: 25px;
}
#game_holder #dailyMissionWidget .triangle{
    margin-top: 34px;
}
#game_holder #competitionsWidget .triangle{
    margin-top: 13px;
    margin-left: 3px;
}
#game_holder .triangle.closed{
    background-position: -20px 0;
}
#game_holder .triangle.opened{
    background-position: 0px 0px;
}
#announcementPopupHolder .announcement-widget .announcement-info{
    height: 34px;
    padding: 19px 10px 0px 10px;
    margin-left: 8px;
}
#announcementPopupHolder .announcement-widget{
    position: absolute;
    top: 59px;
    left: 250px;
    width: 687px;
    font: 14px/28px 'titilliumWebRegular';
    background: #3f4651;
    padding-bottom: 20px;
}
#announcementPopupHolder .announcement-icon{
    display: inline-block;
    width: 33px;
    height: 31px;
    background: green;
    background: url("../images/new/warClicks/wc_splosno/announcment.png");
    vertical-align: middle;
}
#announcementPopupHolder .announcement-header {
    display: inline-block;
    color: #f7931e;
    font-size: 23px;
    margin-left: 14px;
    vertical-align: middle;
}
#announcementPopupHolder .info-button {
    display: inline-block;
    margin-left: 17px;
    width: 19px;
    height: 19px;
    background: url("../images/new/bootCamp/question_mark.png");
    vertical-align: middle;
}
#announcementPopupHolder .text {
    background: rgba(255, 255, 255, 0.39);
    color: white;
    font-size: 14px;
    line-height: 17px;
    padding: 8px;
    margin: 15px 24px 0px 24px;
    overflow: auto;
    height: 370px;
    padding-bottom: 20px;
}
#announcementPopupHolder .text br {
    font-size: 6px;
    line-height: 6px;
}
#announcementPopupHolder iframe {
    transform: scale(0.5);
    margin-top: -100px;
    float: left;
    margin-left: -93px;
    margin-right: -68px;
    margin-bottom: -100px;
    z-index: initial;
}
#announcementPopupHolder .part {
    position: absolute;
    top: 60px;
    right: 37px;
    width: 34px;
    height: 42px;
    background: url("../images/new/warClicks/part.png");
}
#helpPopupHolder .help-widget{
    z-index: 2;
    position: absolute;
    top: 63px;
    left: 250px;
    width: 687px;
    font: 14px/28px 'titilliumWebRegular';
    background: #3f4651;
    border: 1px solid darkgrey;
}
#helpPopupHolder .help-widget.legend{
}
#helpPopupHolder .help-widget.legend .description{
    margin-left: -25px;
}
#helpPopupHolder.full-screen-help .help-widget {
    top: 0;
    left: 0;
    /*width: auto;*/
    width: 100%;
    height: calc(100% - 2px);
}
#helpPopupHolder.full-screen-help .help-widget .top,
#helpPopupHolder.full-screen-help .help-widget .help-info {
    height: 100%;
}
#helpPopupHolder.full-screen-help .help-widget .text {
    max-height: initial;
}
#helpPopupHolder .help-header {
    display: inline-block;
    color: #f7931e;
    font-size: 23px;
    margin-top: 13px;
    margin-left: 14px;
}
#helpPopupHolder .text {
    background: rgba(255, 255, 255, 0.39);
    color: white;
    font-size: 14px;
    line-height: 19px;
    padding: 8px;
    margin: 16px;
    padding-top: 3px;
    max-height: 390px;
    overflow-y: auto;
}
#helpPopupHolder .text h2,
#helpPopupHolder .text h3{
    color: #fbb03b;
}
#helpPopupHolder.full-screen-help .help-widget .text {
    height: 84%;
    overflow-y: auto;
}
#helpPopupHolder.full-screen-help .help-widget .text > p {
    margin-top: 0px;
    /*margin-bottom: 0px;*/
}
#helpPopupHolder .help-widget.legend .text {
    padding-left: 36px;
}
#helpPopupHolder .help-widget.legend .text > div {
    display: inline-block;
}
#helpPopupHolder .help-widget.legend .text > div:nth-child(-n+14):not(:first-child) {
    color: #f7931e;
}
#helpPopupHolder .help-widget.legend .text > .col_1 {
    width: 30px;
}
#helpPopupHolder .help-widget.legend .text > .col_2 {
    width: 80px;
}
#helpPopupHolder .header_01 {
    font: 18px/18px 'titilliumWebBold';
    text-decoration: underline;
}
#helpPopupHolder .header_02 {
    font: 15px/18px 'titilliumWebBold';
    text-decoration: underline;
}
#helpPopupHolder .header_03 {
    font: 16px/18px 'titilliumWebSemiBold';
    text-decoration: underline;
}
#helpPopupHolder.events-popup {
    position: relative;
    width: 100%;
    height: 100%;
    z-index:5;
    background: rgba(1,1,1,0.5);
}
#helpPopupHolder.events-popup .help-widget {
    left: 162px;
}
#getMoreGold_holder {
    display: none;
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
#getMoreGold_holder .get-more-popup{
    position: absolute;
    top: calc(50% - 61px);
    left: calc(50% - 95px);
    width: 214px;
    height:  110px;
    background: #a9a9a9;
    color: white;
    padding: 10px;
    padding-right: 20px;
    font: 14px/18px 'titilliumWebRegular';
    border: 1px solid white;
}
#getMoreGold_holder .get-more-popup .how-to-get-more{
    font: 12px/14px 'titilliumWebRegular';
    font-style: italic;
    text-decoration: underline;
    color: #333333;
    margin-top: 12px;
}
#getMoreGold_holder .get-more-popup > .gold{
    width: 16px;
    height: 16px;
    background: url("../images/new/warClicks/shop/rework/gold.png") 0 0;
}
#getMoreGold_holder .get-more-popup .button{
    width: 128px;
    height: 28px;
    background: url("../images/new/warClicks/shop/rework/button_inside_popup.png") 0 0;
    margin-top: 14px;
    color: white;
    font: 14px/26px 'titilliumWebBold';
    text-align: center;
}
#getMoreGold_holder .get-more-popup .button > .gold{
    width: 16px;
    height: 16px;
    background: url("../images/new/warClicks/shop/rework/gold.png") 0 0;
    margin-left: 6px;
    margin-top: -4px;
}
#getMoreGold_holder .get-more-popup .close{
    width: 14px;
    height: 14px;
    background: url("../images/new/warClicks/shop/rework/close.png") 0 0;
    margin-top: -107px;
    margin-left: 211px;
}
#getMoreGold_holder .get-more-popup .close:hover{
    filter: brightness(130%);
    /*cursor: pointer;*/
    transform: scale(1.2);
}
#getMoreGold_holder .how-to-get-popup{
    position: absolute;
    width: 572px;
    height: 474px;
    border: 1px solid white;
    top: 63px;
    right: 171px;
}
#getMoreGold_holder .how-to-get-popup .header{
    font: 16px/51px 'titilliumWebSemiBold';
    text-align: center;
    color: #f7931e;
    width: 100%;
    height: 51px;
    border-bottom: 1px solid white;
    background: #3f4651;
}
#getMoreGold_holder .how-to-get-popup .header .x{
    /*width: 14px;*/
    /*height: 14px;*/
    /*background: url("../images/new/warClicks/shop/rework/close.png") 0 0;*/
    position: absolute;
    top: 5px;
    right: 10px;
}
#getMoreGold_holder .how-to-get-popup .header .x:hover{
    filter: brightness(130%);
    transform: scale(1.2);
}
#getMoreGold_holder .how-to-get-popup .content{
    position: absolute;
    width: 100%;
    height: 422px;
    background: #3f4651 url("../images/new/warClicks/collect_gold.png") no-repeat 65px 20px;
}
#getMoreGold_holder .how-to-get-popup .content .entry{
    width: 60px;
    height: 40px;
    position: absolute;
    font: 12px/14px 'titilliumWebRegular';
    color: white;
}
#getMoreGold_holder .how-to-get-popup .content .entry > .requirement {
    margin-top: 1px;
    font: 10px/12px 'titilliumWebRegular';
    font-style: italic;
    color: #cccccc;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(1) {
    top: 85px;
    left: 64px;
    width: 100px;
    height: 41px;
    text-align: right;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(2) {
    top: 85px;
    left: 183px;
    width: 100px;
    height: 41px;
    text-align: center;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(3) {
    top: 85px;
    left: 295px;
    width: 100px;
    height: 41px;
    text-align: center;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(4) {
    top: 85px;
    left: 414px;
    width: 143px;
    height: 41px;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(5) {
    top: 185px;
    left: 417px;
    width: 106px;
    height: 57px;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(6) {
    top: 302px;
    left: 419px;
    width: 114px;
    height: 57px;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(7) {
    top: 302px;
    left: 296px;
    width: 100px;
    height: 57px;
    text-align: center;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(8) {
    top: 302px;
    left: 182px;
    width: 100px;
    height: 57px;
    text-align: center;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(9) {
    top: 302px;
    left: 65px;
    width: 100px;
    height: 57px;
    text-align: right;
}
#getMoreGold_holder .how-to-get-popup .content .entry:nth-of-type(10) {
    top: 182px;
    left: 61px;
    width: 100px;
    height: 57px;
    text-align: right;
}
#getMoreGold_holder .how-to-get-popup .content .buy-holder{
    position: absolute;
    right: 15px;
    bottom: 14px;
    font: 12px/17px 'titilliumWebRegular';
    color: #cccccc;
}
#getMoreGold_holder .how-to-get-popup .content .buy {
    width: 116px;
    height: 25px;
    font: 14px/23px 'titilliumWebBold';
    color: white;
    text-align: center;
    display: inline-block;
    border-radius: 10px;
    margin-left: 8px;
}
#getMoreGold_holder .how-to-get-popup .content .buy > .icon.gold{
    margin-left: 2px;
    margin-right: -4px;
}

#automationDash {
    position: absolute;
    right: 0px;
    top: 94px;
    background: rgba(255,255,255,0.2);
}
#automationDash .dash-title {
    text-align: center;
    font: 9px/14px 'titilliumWebSemiBold';
    padding: 5px;
    color: #ffffff;
    background: rgba(255,255,255,0.6);
}
#automationDash .credits-left {
    text-align: center;
    font: 10px/12px 'titilliumWebSemiBold';
    padding: 5px;
    color: #ffffff;
}
#automationDash .button {
    background: #f7931e;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 5px 7px;
    font: 11px/27px 'titilliumWebRegular';
    text-align: center;
    border: solid 1px white;
    border-right: none;
    width: 50px;
    color: #ffffff;
}
#automationDash .button.on {
    background: #08b000;
}
#automationDash .button.off {
    background: #ff0000;
}
#automationDash .button.disabled {
    opacity: 0.60;
    background: #6a6a6a;
    color: white;
}
#achievement_holder {
    position: absolute;
    /*bottom: 177px;*/
    bottom: 113px;
    left: 17px;
    margin-left: -9px;
    height: 72px;
}
#achievement_holder > div{
    position: absolute;
    opacity:0;
    height: 72px;
    pointer-events: none;
}
#achievement_holder .achievement-widget > div {
    vertical-align: top;
}
#achievement_holder .achievement-widget .left-outer {
    display: inline-block;
    width: 252px;
    height: 100%;
    background: url("../../assets/images/new/warClicks/achievements_popup.png");
}
#achievement_holder .achievement-widget .left-outer .left{
    display: inline-block;
    width: 77px;
    height: 100%;
}
#achievement_holder .achievement-widget .left-outer .left .milestone-icon {
    margin-left: -4px;
    margin-top: -8px;
    width: 80px;
    height: 80px;
    background: url('../images/new/bootCamp/sprite_units_min.png');
}
#achievement_holder .achievement-widget .left-outer .left .achievement-icon {
    margin-left: -4px;
    margin-top: -8px;
    width: 80px;
    height: 80px;
    background: url('../images/new/warZone/achievements/sprite_units_min_vse.png');
}
#achievement_holder .achievement-widget .left-outer .right{
    display: inline-block;
    vertical-align: top;
    width: 138px;
    height: 100%;
}
#achievement_holder .achievement-widget .left-outer .right .title-achievement{
    margin-top: 7px;
    margin-left: 3px;
    color: white;
    font: 11px/13px 'titilliumWebBold';
    padding: 0px 13px 5px 6px;
    width: 134px;
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement{
    width: 100%;
    height: 47px;
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement .reward-name{
    margin-left: 3px;
    margin-top: 1px;
    width: 167px;
    height: 15px;
    color: white;
    font: 11px/13px 'titilliumWebRegular';
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement .rewardT{
    color: white;
    font: 12px/13px 'titilliumWebRegular';
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement .value{
    margin-top: 11px;
    color: white;
    display: inline-block;
    font: 14px/13px 'titilliumWebLight';
    margin-left: 20px;
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement .rewardT + .value {
    margin-top: 0;
    margin-left: 0;
    font: 11px/13px 'titilliumWebLight';
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement .reward-icon{
    position: absolute;
    margin-top: 7px;
    display: inline-block;
}
#achievement_holder .achievement-widget .left-outer .right .reward-achievement .reward-icon.battle_stars{
    margin-top: 7px;
}
#achievement_holder .achievement-widget .right-outer {
    display: inline-block;
    width: 73px;
    height: 100%;
}

/* announcement orig */
#announcementWidget {
    position: absolute;
    bottom: 176px;
    left: 17px;
    margin-left: -9px;
    width: 329px;
    height: 72px;
    left: -243px;
}
#announcementWidget > div {
    vertical-align: top;
}
#announcementWidget .left-outer {
    display: inline-block;
    width: calc(252px - 22px);
    height: calc(100% - 20px);
    background: #3f4651;
    color: #ffffff;
    padding: 10px;
    font: 12px/14px 'titilliumWebRegular';
    border: 1px solid #8f959f;
}
#announcementWidget .left-outer .title {
    font: 10px/14px 'titilliumWebBold';
    background: #f9a94b;
    padding: 3px 8px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
#announcementWidget .right-outer {
    display: inline-block;
    width: 73px;
    height: 100%;
}
#announcementWidget.opened{
    /*animation: announcementWidgetOpened 1.0s ease-in-out;*/
    /*animation-fill-mode: forwards;*/
}
#announcementWidget.closed{
    /*animation: announcementWidgetClosed 1.0s ease-in-out;*/
    /*animation-fill-mode: forwards;*/
}
#simpocalypseWidget {
    position: absolute;
    bottom: 244px;
    left: 13px;
    width: 44px;
    height: 43px;
    background: url("../../assets/images/new/warClicks/wc_sp_icons_sprite.png");
}
#simpocalypseWidget:hover {
    background-position-y: -44px;
}
#missionsWidget  {
    position: absolute;
    bottom: 179px;
    left: 11px;
    width: 44px;
    height: 50px;

    background: url("../../assets/images/new/warClicks/pomozne_ikone_sprite_v2.png");
    background-position: -44px 0;
}
#missionsWidget .notification {
    position: absolute;
    top: -17px;
    left: 0;
    width: max-content;
    display: inline-block;
    padding: 3px;
    color: #f7931e;
    font: 11px/11px 'titilliumWebSemiBold';

    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    animation: anim_scale_0809 1s infinite;
}
#missionsWidget:hover {
    background-position: -44px -50px;
}
#dailyMissionWidget  {
    display: none !important;
    position: absolute;
    overflow-x: hidden;
    bottom: 101px;
    left: -193px;
    width: 285px;
    height: 94px;
    transition: left 0.9s ease-in-out;
}
#dailyMissionWidget > div {
    vertical-align: top;
}
#dailyMissionWidget .bar-background {
    background: #ecf0f1;
    position: absolute;
    width: 150px;
    height: 22px;
    margin-left: 13px;
    margin-top: 50px;
}
#dailyMissionWidget .bar-fill{
    position: absolute;
    top: 49px;
    left: -122px;
    width: 139px;
    height: 18px;
    background: url("../../assets/images/new/warClicks/inside_bar.png");
}
#dailyMissionWidget .left-outer {
    position: absolute;
    display: inline-block;
    width: 168px;
    height: 74px;
    text-align: center;
}
#dailyMissionWidget .left-outer.with-bar-bigger {
    height: 88px;
    background: url("../../assets/images/new/warClicks/exterminator_2.png");
}
#dailyMissionWidget .left-outer.with-bar-smaller {
    height: 74px;
    background: url("../../assets/images/new/warClicks/mission_with_bar.png");
}

#dailyMissionWidget .left-outer.no-bar {
    height: 74px;
    background: url("../../assets/images/new/warClicks/mission_no_bar.png");
}
#dailyMissionWidget .left-outer .title-mission{
    margin-top: 5px;
    margin-left: 10px;
    color: white;
    font: 11px/15px 'titilliumWebBold';
    text-align: left;
    padding: 5px 13px 5px 6px;
    width: 131px;
}
#dailyMissionWidget .left-outer .left {
    margin: 2px 0px 2px 10px;
    text-align:left;
}
#dailyMissionWidget .left-outer .left .instructions{
    height: 19px;
    position: relative;
    font: 11px/11px 'titilliumWebRegular';
    color:white;
    top: -4px;
    left: 5px;
    display: inline-block;
}
#dailyMissionWidget .left-outer.no-bar .left .instructions{
    top: 1px;
}
#dailyMissionWidget .left-outer .left .instructions .timeText{
    font-size: 15px;
}
#dailyMissionWidget .left-outer .left .progress{
    width: 92%;
    height: 18px;
    border-radius: 7px;
    margin: 0 auto;
    margin-left: -1px;
    margin-top: -3px;
}
#dailyMissionWidget .left-outer .left .progress.completed{
    width: 84%;
    height: 15px;
    background: #7b9b5d;
    margin-top: -7px;
    border: solid 1px white;
}
#dailyMissionWidget .left-outer .left .progress.completed:hover{
    filter: brightness(133%);
}
#dailyMissionWidget .left-outer .left .progress-text{
    text-align: center;
    color: white;
    font: 11px/16px 'titilliumWebRegular';
}
#dailyMissionWidget .left-outer .left .progress-text .icon{
    position: relative;
    margin-top: -3px;
    margin-left: 6px;
    transform: scale(0.8);
}
#dailyMissionWidget .left-outer .left .time-left-text{
    font: 12px/12px 'titilliumWebRegular';
    color: white;
}
#dailyMissionWidget .left-outer .left .time-left-value{
    position: relative;
    top: -4px;
    left: 30px;
    font: 11px/11px 'titilliumWebRegular';
    color: white;
    display: inline-block;
}
#dailyMissionWidget .right-outer {
    position: absolute;
    display: inline-block;
    width: 73px;
    height: 100%;
    margin-left: 173px;
}
#dailyMissionWidget.opened{
    left: 10px;
}
#dailyMissionWidget.closed{
    left: -168px;
}
#standingsWidget {
    position: absolute;
    bottom: 35px;
    left: 17px;
    margin-left: -9px;
    width: 329px;
    height: 72px;
    animation: announcementWidgetClosed 1.0s ease-in-out;
    animation-fill-mode: none;
    animation-fill-mode: forwards;
}
#standingsWidget > div {
    vertical-align: top;
}
#standingsWidget .left-outer {
    display: inline-block;
    width: calc(252px - 22px);
    height: calc(100% - 20px);
    background: #3f4651;
    color: #ffffff;
    padding: 10px;
    font: 12px/14px 'titilliumWebRegular';
    border: 1px solid #8f959f;
}
#standingsWidget .right-outer {
    display: inline-block;
    width: 73px;
    height: 100%;
}
#standingsWidget .timer {
    position: relative;
    bottom: 16px;
    font: 10px/13px 'titilliumWebSemiBold';
    color: #ffffff;
    padding: 2px 2px 2px 13px;
    width: 36px;
    text-align: center;
}
#competitionsWidget  {
    position: absolute;
    bottom: 0px;
    height: 62px;
}
#competitionsWidget > div {
    vertical-align: top;
}
#competitionsWidget .left-outer {
    position: relative;
    display: inline-block;
    height: 100%;
    text-align:center;
    bottom: -6px;
}
#competitionsWidget .right-outer {
    display: inline-block;
    margin-top: 15px;
    width: 73px;
    height: 100%;
}
#competitionsWidget {
    transition: transform 1.4s ease-in-out;
}
#competitionsWidget.opened{
    transform: translateX(10px);
}
#competitionsWidget.closed {
    transform: translateX(-426px);
}
@keyframes announcementWidgetOpened {
    0%     { left: -233px; }
    100%    { left: 20px; }
}
@keyframes announcementWidgetClosed {
    0%     { left: 0px; }
    100%    { left: -243px; }
}
@keyframes dailyMissionWidgetOpened {
    0%     { left: -168px; }
    100%    { left: 10px; }
}
@keyframes dailyMissionWidgetClosed {
    0%     { left: 10px; }
    100%    { left: -168px; }
}
@keyframes competitionsWidgetOpened {
    0%     { left: -426px; }
    100%    { left: 10px; }
}
@keyframes competitionsWidgetClosed {
    0%     { left: 10px; }
    100%    { left: -426px; }
}
#competitionsWidget .guestLocked {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 377px;
    height: 58px;
    background: url("../../assets/images/new/warClicks/guest_locked.png");
}
#competitionsWidget .guestLocked .join-rankings {
    position: absolute;
    bottom: 13px;
    left: 36px;


    background: #f7931e;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ffffff;

    font: 12px/13px 'titilliumWebSemiBold';
    color: #ffffff;
    text-align: center;

}
#partialsHolder {
    position: relative;
}
#game_holder .summer-pack-holder {
    margin: 0 auto;
    position: relative;
    background: url("../images/new/warClicks/wc_splosno/summer_pack_base.png");
    width: 576px;
    height: 397px;
    top: 67px;
}
#game_holder .summer-pack-holder > .claim{
    margin: 0 auto;
    position: absolute;
    bottom: 20px;
    right: 18px;
    background: url("../images/new/warClicks/wc_splosno/button_without_glow.png");
    width: 192px;
    height: 39px;
}
#game_holder .summer-pack-holder > .close {
    position: absolute;
    top: 70px;
    right: -7px;
    height: 44px;
    width: 44px;
    background: url("../images/close.png") 0 0;
}
#game_holder .summer-pack-holder > .close:hover{
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
    filter: brightness(146%);
    transform:scale(1.17);
}
#game_holder .summer-pack-holder > .hours-left{
    position: absolute;
    bottom: 29px;
    left: 261px;
    height: 17px;
    width: 28px;
    /*background: green;*/
    text-align: center;
    font: 12px/15px 'titilliumWebBold';
}
#game_holder .summer-pack-holder > .minutes-left {
    position: absolute;
    bottom: 29px;
    left: 294px;
    height: 17px;
    width: 28px;
    /*background: yellow;*/
    text-align: center;
    font: 12px/15px 'titilliumWebBold';
}
#game_holder .summer-pack-holder > .seconds-left {
    position: absolute;
    bottom: 29px;
    left: 327px;
    height: 17px;
    width: 28px;
    /*background: red;*/
    text-align: center;
    font: 12px/15px 'titilliumWebBold';
}


/* ANDRAZ CSS */
.js-partial {
    display: none;
    position: absolute;

    top: 63px;
    left: 250px;
    width: 685px;
    height: 476px;
    background: #ecf0f1;
    z-index: 1;
}
.js-partial .header {
    position: relative;
    padding: 5px 10px;
    height: 42px;
}
.js-partial .header .title {
    display: inline-block;
    font: 21px/30px 'titilliumWebSemiBold';
    color: #f7931e;
    margin-top: 8px;
    margin-left: 12px;
}
.info-button {
    margin-left: 25px;
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url("../images/new/bootCamp/question_mark.png");
    vertical-align: middle;
    margin-top: -9px;
}
.info-button:hover{
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
.js-partial .header .close {
    display: inline-block;
    position: absolute;

    width: 25px;
    height: 25px;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    background-position-x: -7px;
    background-position-y: -6px;

    top: 11px !important;
    right: 20px !important;

    opacity: 0.8;
}
.js-partial .header .close:hover {
    background-position-y: 30px;
}
.js-partial .header .close.white {
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    background-position-x: 30px;
    background-position-y: -6px;
}
.js-partial .header .close.white:hover {
    background-position-y: -42px;
}
.js-partial .header .title-icon {
    display:inline-block;
    vertical-align: middle;
    width: 40px;
    height: 30px;
    background: url("../images/new/warClicks/sp_1_min.png");
    margin-top: -14px;
    margin-left: 5px;
}
.js-partial .header .title-icon.tc {
    background-position-x: 40px;
}
.js-partial .header .title-icon.spw{
    background-position-x: -280px;
}
.js-partial .header .title-icon.activity-rewards{
    background-position-x: -320px;
}
.js-partial .close:hover {
    opacity: 1;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
/* TESTING BAR FILL WITH TRANSLATE */
.progress-bar {
    position: relative;
}
.progress-bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 0;
    background-color: #fff;

    will-change: transform;
    transition: transform 1500ms;
    transform-origin: 0 0;
}
.progress-bar[data-progress]:after {
    width: 100%;
    border-radius: 3px;
}
.milestone_bar.progress-bar[data-progress]:after {
    border-radius: 0px;
}
.progress-bar[data-progress*="e"]:after,
.progress-bar[data-progress^="0.0"]:after,
.progress-bar[data-progress="0"]:after {
    transform: scaleX(0.0);
}
.progress-bar[data-progress^="0.01"]:after {
    transform: scaleX(0.01);
}
.progress-bar[data-progress^="0.02"]:after {
    transform: scaleX(0.02);
}
.progress-bar[data-progress^="0.03"]:after {
    transform: scaleX(0.03);
}
.progress-bar[data-progress^="0.04"]:after {
    transform: scaleX(0.04);
}
.progress-bar[data-progress^="0.05"]:after {
    transform: scaleX(0.05);
}
.progress-bar[data-progress^="0.06"]:after {
    transform: scaleX(0.06);
}
.progress-bar[data-progress^="0.07"]:after {
    transform: scaleX(0.07);
}
.progress-bar[data-progress^="0.08"]:after {
    transform: scaleX(0.08);
}
.progress-bar[data-progress^="0.09"]:after {
    transform: scaleX(0.09);
}
.progress-bar[data-progress^="0.1"]:after {
    transform: scaleX(0.10);
}
.progress-bar[data-progress^="0.11"]:after {
    transform: scaleX(0.11);
}
.progress-bar[data-progress^="0.12"]:after {
    transform: scaleX(0.12);
}
.progress-bar[data-progress^="0.13"]:after {
    transform: scaleX(0.13);
}
.progress-bar[data-progress^="0.14"]:after {
    transform: scaleX(0.14);
}
.progress-bar[data-progress^="0.15"]:after {
    transform: scaleX(0.15);
}
.progress-bar[data-progress^="0.16"]:after {
    transform: scaleX(0.16);
}
.progress-bar[data-progress^="0.17"]:after {
    transform: scaleX(0.17);
}
.progress-bar[data-progress^="0.18"]:after {
    transform: scaleX(0.18);
}
.progress-bar[data-progress^="0.19"]:after {
    transform: scaleX(0.19);
}
.progress-bar[data-progress^="0.2"]:after {
    transform: scaleX(0.20);
}
.progress-bar[data-progress^="0.21"]:after {
    transform: scaleX(0.21);
}
.progress-bar[data-progress^="0.22"]:after {
    transform: scaleX(0.22);
}
.progress-bar[data-progress^="0.23"]:after {
    transform: scaleX(0.23);
}
.progress-bar[data-progress^="0.24"]:after {
    transform: scaleX(0.24);
}
.progress-bar[data-progress^="0.25"]:after {
    transform: scaleX(0.25);
}
.progress-bar[data-progress^="0.26"]:after {
    transform: scaleX(0.26);
}
.progress-bar[data-progress^="0.27"]:after {
    transform: scaleX(0.27);
}
.progress-bar[data-progress^="0.28"]:after {
    transform: scaleX(0.28);
}
.progress-bar[data-progress^="0.29"]:after {
    transform: scaleX(0.29);
}
.progress-bar[data-progress^="0.3"]:after {
    transform: scaleX(0.30);
}
.progress-bar[data-progress^="0.31"]:after {
    transform: scaleX(0.31);
}
.progress-bar[data-progress^="0.32"]:after {
    transform: scaleX(0.32);
}
.progress-bar[data-progress^="0.33"]:after {
    transform: scaleX(0.33);
}
.progress-bar[data-progress^="0.34"]:after {
    transform: scaleX(0.34);
}
.progress-bar[data-progress^="0.35"]:after {
    transform: scaleX(0.35);
}
.progress-bar[data-progress^="0.36"]:after {
    transform: scaleX(0.36);
}
.progress-bar[data-progress^="0.37"]:after {
    transform: scaleX(0.37);
}
.progress-bar[data-progress^="0.38"]:after {
    transform: scaleX(0.38);
}
.progress-bar[data-progress^="0.39"]:after {
    transform: scaleX(0.39);
}
.progress-bar[data-progress^="0.4"]:after {
    transform: scaleX(0.40);
}
.progress-bar[data-progress^="0.41"]:after {
    transform: scaleX(0.41);
}
.progress-bar[data-progress^="0.42"]:after {
    transform: scaleX(0.42);
}
.progress-bar[data-progress^="0.43"]:after {
    transform: scaleX(0.43);
}
.progress-bar[data-progress^="0.44"]:after {
    transform: scaleX(0.44);
}
.progress-bar[data-progress^="0.45"]:after {
    transform: scaleX(0.45);
}
.progress-bar[data-progress^="0.46"]:after {
    transform: scaleX(0.46);
}
.progress-bar[data-progress^="0.47"]:after {
    transform: scaleX(0.47);
}
.progress-bar[data-progress^="0.48"]:after {
    transform: scaleX(0.48);
}
.progress-bar[data-progress^="0.49"]:after {
    transform: scaleX(0.49);
}
.progress-bar[data-progress^="0.5"]:after {
    transform: scaleX(0.50);
}
.progress-bar[data-progress^="0.51"]:after {
    transform: scaleX(0.51);
}
.progress-bar[data-progress^="0.52"]:after {
    transform: scaleX(0.52);
}
.progress-bar[data-progress^="0.53"]:after {
    transform: scaleX(0.53);
}
.progress-bar[data-progress^="0.54"]:after {
    transform: scaleX(0.54);
}
.progress-bar[data-progress^="0.55"]:after {
    transform: scaleX(0.55);
}
.progress-bar[data-progress^="0.56"]:after {
    transform: scaleX(0.56);
}
.progress-bar[data-progress^="0.57"]:after {
    transform: scaleX(0.57);
}
.progress-bar[data-progress^="0.58"]:after {
    transform: scaleX(0.58);
}
.progress-bar[data-progress^="0.59"]:after {
    transform: scaleX(0.59);
}
.progress-bar[data-progress^="0.6"]:after {
    transform: scaleX(0.60);
}
.progress-bar[data-progress^="0.61"]:after {
    transform: scaleX(0.61);
}
.progress-bar[data-progress^="0.62"]:after {
    transform: scaleX(0.62);
}
.progress-bar[data-progress^="0.63"]:after {
    transform: scaleX(0.63);
}
.progress-bar[data-progress^="0.64"]:after {
    transform: scaleX(0.64);
}
.progress-bar[data-progress^="0.65"]:after {
    transform: scaleX(0.65);
}
.progress-bar[data-progress^="0.66"]:after {
    transform: scaleX(0.66);
}
.progress-bar[data-progress^="0.67"]:after {
    transform: scaleX(0.67);
}
.progress-bar[data-progress^="0.68"]:after {
    transform: scaleX(0.68);
}
.progress-bar[data-progress^="0.69"]:after {
    transform: scaleX(0.69);
}
.progress-bar[data-progress^="0.7"]:after {
    transform: scaleX(0.70);
}
.progress-bar[data-progress^="0.71"]:after {
    transform: scaleX(0.71);
}
.progress-bar[data-progress^="0.72"]:after {
    transform: scaleX(0.72);
}
.progress-bar[data-progress^="0.73"]:after {
    transform: scaleX(0.73);
}
.progress-bar[data-progress^="0.74"]:after {
    transform: scaleX(0.74);
}
.progress-bar[data-progress^="0.75"]:after {
    transform: scaleX(0.75);
}
.progress-bar[data-progress^="0.76"]:after {
    transform: scaleX(0.76);
}
.progress-bar[data-progress^="0.77"]:after {
    transform: scaleX(0.77);
}
.progress-bar[data-progress^="0.78"]:after {
    transform: scaleX(0.78);
}
.progress-bar[data-progress^="0.79"]:after {
    transform: scaleX(0.79);
}
.progress-bar[data-progress^="0.8"]:after {
    transform: scaleX(0.80);
}
.progress-bar[data-progress^="0.81"]:after {
    transform: scaleX(0.81);
}
.progress-bar[data-progress^="0.81"]:after {
    transform: scaleX(0.81);
}
.progress-bar[data-progress^="0.82"]:after {
    transform: scaleX(0.82);
}
.progress-bar[data-progress^="0.83"]:after {
    transform: scaleX(0.83);
}
.progress-bar[data-progress^="0.84"]:after {
    transform: scaleX(0.84);
}
.progress-bar[data-progress^="0.85"]:after {
    transform: scaleX(0.85);
}
.progress-bar[data-progress^="0.86"]:after {
    transform: scaleX(0.86);
}
.progress-bar[data-progress^="0.87"]:after {
    transform: scaleX(0.87);
}
.progress-bar[data-progress^="0.88"]:after {
    transform: scaleX(0.88);
}
.progress-bar[data-progress^="0.89"]:after {
    transform: scaleX(0.89);
}
.progress-bar[data-progress^="0.9"]:after {
    transform: scaleX(0.90);
}
.progress-bar[data-progress^="0.91"]:after {
    transform: scaleX(0.91);
}
.progress-bar[data-progress^="0.92"]:after {
    transform: scaleX(0.92);
}
.progress-bar[data-progress^="0.93"]:after {
    transform: scaleX(0.93);
}
.progress-bar[data-progress^="0.94"]:after {
    transform: scaleX(0.94);
}
.progress-bar[data-progress^="0.95"]:after {
    transform: scaleX(0.95);
}
.progress-bar[data-progress^="0.96"]:after {
    transform: scaleX(0.96);
}
.progress-bar[data-progress^="0.97"]:after {
    transform: scaleX(0.97);
}
.progress-bar[data-progress^="0.98"]:after {
    transform: scaleX(0.98);
}
.progress-bar[data-progress^="0.99"]:after {
    transform: scaleX(0.99);
}
.progress-bar[data-progress^="1"]:after {
    transform: scaleX(1);
}


/* TESTING PANEL */

#testingPanel {
    position: absolute;
    left: calc(50% - 760px);
    top: 200px;
    width: 200px;
    padding: 20px;
    background: #000000;
    color: #ffffff;
    font: 16px/18px 'titilliumWebBold';
}
#testingPanel > span {
    display: block;
    background: #ffffff;
    padding: 10px;
    color: #000000;
    margin-bottom: 10px;
    font-size: 12px;

}
#testingPanel > div {
    background: #f7931e;
    padding: 10px;
    border: 3px solid #ffffff;
    color: #ffffff;
    margin-bottom: 5px;
}
#testingPanel > div:hover {
    color: #000000;
    filter: brightness(1.15);
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#testingPanel > div.updating {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
    color: #ffffff;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    padding: 30px;
}
@keyframes glowingGarage {
    0%      { opacity: 0; }
    50%     { opacity: 1.00; }
    100%    { opacity: 0; }
}
.orange-text{
    color: #f7931e;
}

#sidePromo {
    position: absolute;
    /*for 160px wide*/
    left: calc(50% - 740px);
    /*left: calc(50% - 670px);*/
    top: 200px;
    width: 220px;
    text-align: right;
}
#sidePromo.on-right {
    left: auto;
    right: calc(50% - 740px);
    text-align: left;
}
#sidePromo .promo-title {
    font: 15px/30px 'titilliumWebBold';
    text-align: center;
    margin-bottom: 20px;
    color: white;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#sidePromo .promo-title span {
    font: 12px/30px 'titilliumWebBold';
}
#sidePromo .promo-title.sub {
    margin-top: 20px;
    font: 15px/25px 'titilliumWebBold';
    font-style: italic;
}
#sidePromo:not(.on-right) > a {
    display: block;
    text-align: center;
}
#sidePromo img:hover {
    filter: brightness(127%);
}

@media screen and (max-width: 1200px) {
    #sidePromo {
        display: none;
    }
}
/* HOVER TOOLTIPS - add only any classes, don't overgeneralize with *! */
/*.my-super-class-type-here[data-title]:hover:after, */
#gameHelp[data-title]:hover:after,
#profileOverlay .currency[data-title]:hover:after,
#profileOverlay .gold[data-title]:hover:after,
#profileOverlay .damage[data-title]:hover:after,
#competitionsHolder .badge[data-title]:hover:after,
#attackMonitor .farming-toggle[data-title]:hover:after,
.button[data-title]:hover:after,
.reward[data-title]:after,
#specialBoosts[data-title]:hover:after {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 100%;

    display: inline-block;

    content: attr(data-title);
    background: #6b717a;

    padding: 4px 8px;
    color: #ffffff;
    font: 12px/14px 'titilliumWebLight';
    white-space: nowrap;

    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
}
#competitionsHolder .badge[data-title]:hover:after {
    top: -50%;
}
.button[data-title][data-title-position-right]:hover:after,
#specialBoosts[data-title][data-title-position-right]:hover:after  {
    left: auto;
    right: 0;
}
#competitionsHolder .badge[data-title-position-right]:hover:after {
    left: auto;
    transform: scale(2);
    /*top: -10px;*/
    right: 270px;
}
.button[data-title][data-title-position-right="top"]:hover:after {
    top: -20px;
}
/*.button.expandFullScreen:hover:after {*/
    /*left: auto;*/
    /*right: 0;*/
    /*transform: scale(1.1) !important;*/
/*}*/
#gameHelp[data-title]:hover:after {
    transform: scale(1.4);
}
.info-button:hover{
    filter: brightness(111%);
}
#warZone #w_main .free-gifts-icon{
    position: absolute;
    left: 674px;
    top: 7px;
    width: 99px;
    height: 99px;
    background: url("../images/warZone/gift.png") center;
    animation: anim_scale_0809 0.8s infinite ease-in-out;
}
/*mislm da se neikjer ne rab*/
#warZone #w_main .free-gifts-icon:hover{
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
    filter: brightness(127%);
}
/* product purchased popup */
.product-purchased {
    z-index: 1;
    position: absolute;
    top: 200px;
    left: calc(50% - 170px);
    padding: 40px 20px 20px 20px;
    width: 440px;

    background: #3f4651;
    color: #ffffff;
    font: 14px/20px 'titilliumWebRegular';
    box-shadow: 4px 4px 3px rgba(0,0,0,0.75);
}
.product-purchased .close {
    display: inline-block;
    position: absolute;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    background-position-x: 30px;
    background-position-y: -6px;
    width: 25px;
    height: 25px;

    top: 11px !important;
    right: 20px !important;

    opacity: 0.8;
}
.product-purchased .close:hover {
    background-position-y: -42px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
.product-purchased .image {
    width: 100px;
    height: 100px;
    display: inline-block;
    float: left;
    margin-right: 20px;
}
.product-purchased .image[data-image='1'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_1.png');
}
.product-purchased .image[data-image='2'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_2.png');
}
.product-purchased .image[data-image='3'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_3.png');
}
.product-purchased .image[data-image='4'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_4.png');
}
.product-purchased .image[data-image='5'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_5.png');
}
.product-purchased .image[data-image='6'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_6.png');
}
.product-purchased .image[data-image='7'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_7.png');
}
.product-purchased .image[data-image='8'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_8.png');
}
.product-purchased .image[data-image='9'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_9.png');
}
.product-purchased .image[data-image='10'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_10.png');
}
.product-purchased .image[data-image='11'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_11.png');
}

.product-purchased .image[data-image='12'] {
    background: url('../images/new/warClicks/shop/item_thumbs/product_12.png');
}
/* offerwall reward notification */
.offer-completed {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 10px;
    width: 200px;

    background: #3f4651;

    color: #ffffff;
    font: 14px/20px 'titilliumWebRegular';
    box-shadow: 4px 4px 3px rgba(0,0,0,0.75);
}
.offer-completed .close {

    display: inline-block;
    position: absolute;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    background-position-x: 30px;
    background-position-y: -6px;

    width: 25px;
    height: 25px;

    top: 11px !important;
    right: 20px !important;

    opacity: 0.8;
}
.offer-completed .close:hover {
    background-position-y: -42px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
.offer-completed .gold {
    vertical-align: top;
    transform: scale(0.8);
}

/* ad reward added popup */
.video-reward {
    z-index: 1;
    position: absolute;
    top: 200px;
    left: calc(50% - 170px);
    padding: 0px 70px 10px 20px;
    width: 350px;

    background: #3f4651;

    color: #ffffff;
    font: 14px/20px 'titilliumWebRegular';
    box-shadow: 4px 4px 3px rgba(0,0,0,0.75);
    border: 1px solid #777777;
    text-align: center;
}
.video-reward .close {
    display: inline-block;
    position: absolute;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    background-position-x: 30px;
    background-position-y: -6px;
    width: 25px;
    height: 25px;
    top: 11px !important;
    right: 20px !important;
    opacity: 0.8;
}
.video-reward .close:hover {
    background-position-y: -42px;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
.video-reward .success-note {
    margin: 10px 0;
}
.video-reward .reward-note {
    margin: 10px 0;
    color: #f7931e;
    font: 16px/30px 'titilliumWebBold';
    text-align: center;
}
.video-reward .watch-another {
    display: inline-block;
    margin-left: 25px;
    font: 15px/20px 'titilliumWebBold';
    padding: 5px 10px;
    color: black;
    text-align: center;
    background: #f7931e;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.75);
    border: 1px solid black;
}
.video-reward .watch-another:hover {
    color: white;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
.video-reward .rewards-info {
    margin: 10px 0;
    font: 12px/14px 'titilliumWebLight';
    font-style: italic;
    color: #ffffff;
}

/* 3rd party cookie note */
#cookieNote {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    background: rgba(0,0,0,0.9);

    text-align: center;
    color: #ffffff;
    font: 18px/25px 'titilliumWebRegular';
    padding: 50px;

}
/* Modal Help */
#modalHelp {
    position: absolute;
    display: none;
    z-index: 1;
    background: rgba(0,0,0,0.8);

    top: 0;
    left: 0;
    width: 1000px;
    height: 551px;
}
#modalPayment {
    position: absolute;
    display: none;
    z-index: 3;
    background: rgba(0,0,0,0.8);

    top: 0;
    left: 0;
    width: 1000px;
    height: 511px;
    padding-top: 40px;
}
#modalPayment .x {
    z-index: 999;
}
#modalPayment .header-line{
    z-index: 999;
    background: #3f4651;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    font: 13px/40px 'titilliumWebSemiBold';
    vertical-align: top;
    color: #ffffff;
}
/* END Modal help */
/* modal Auth */
#modalAuth {
    position: absolute;
    display: none;
    z-index: 3;
    background: rgba(0,0,0,0.3);

    top: 0;
    left: 0;
    width: 100%;
}
#modalAuth .button {
    font: 18px/32px 'titilliumWebBold';
    text-align: center;
    background: #f7931e;
    padding: 6px 24px;
    color: #ffffff;
}
#modalAuth form {
    margin-top: 50px;
}
#modalAuth .right{
    position: relative;
    vertical-align: top;
    margin: 10px auto;
    width: 750px;
    height: 530px;
    padding-right: 70px;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
}
#modalAuth .right:not(.sign) {
    border-left: 1px solid grey;
}
#modalAuth .right .inner-holder {
    height: 100%;
    width: 100%;
    transition: transform 1s;
}
#modalAuth .right .inner-holder.show-register {
    animation: slideLeftBounceAuth 1000ms ease-in-out;
    animation-fill-mode: forwards;
}
#modalAuth .right .inner-holder.show-login {
    animation: slideRightBounceAuth 1000ms ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes slideRightBounceAuth {
    0%   { transform: translateX(-321px);   }
    70%  {transform: translateX(20px); }
    100% {transform: translateX(0px); }
}
@keyframes slideLeftBounceAuth {
    0%   { transform: translateX(0px);   }
    70%  {transform: translateX(-341px); }
    100% {transform: translateX(-321px); }
}
#modalAuth .right .inner {
    display: inline-block;
    vertical-align: top;
    height: 89%;
    width: calc(50% - 32px);
    padding: 18px 0 0 32px;

    font: 14px/15px 'titilliumWebRegular';
}
#modalAuth .right .inner .login-text{
    font: 20px/20px 'titilliumWebRegular';
}
#modalAuth .right .inner .form-error {
    color: red;
    margin-top: 20px;
}
#modalAuth .right .inner .login{
    margin-top: 42px;
    width: 252px;
    border: none;
    border-width: 0;
    box-shadow: none;
}
#modalAuth .right .inner.login #email {
    margin-top: 13px;
}
#modalAuth .right .inner input:not(.login) {
    border-width: 0px;
    border: none;
    background: none;
    height: 21px;
    font: 19px/6px 'titilliumWebRegular';
    vertical-align: middle;
    padding: 2px 0px;
    border-bottom: 1px solid grey;
    padding-top: 25px;
}
#modalAuth .right .inner #remember:hover {
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#modalAuth .right .inner input.error {
    border-color: #ff0000;
}
#modalAuth .right .inner .email{
    margin-top: 0px;
    width: 251px;
}
#modalAuth .right .inner .password{
    margin-bottom: 29px;
    width: 251px;
}
#modalAuth .right .inner .forget{
    margin-top: 14px;
}
#modalAuth .right .inner .form-loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    display: none;
}
#modalAuth #registerForm {
    width: 285px;
}
#modalAuth #registerForm input:not([type=submit]) {
    padding-top: 18px;
    width: 251px;
}
#modalAuth #registerForm .password {
    margin-top: 0;
    margin-bottom: 0;
}
/* če daš ta cursor pol ne morš zbrat prejših usernamou iz seznama
#registerForm .username:hover {
    cursor: url("public_html/assets/images/cursorType.ico"), text;
    cursor: url("../images/cursorType.ico") 14 14, text;
}*/
#modalAuth #registerForm .passwordconf {
    margin-bottom: 20px;
}
#modalAuth #registerForm label {
    font: 12px/16px 'titilliumWebRegular';
}
#modalAuth #registerForm .select-country {
    width: 253px;
}
#modalAuth #registerForm #country {
    width: 253px;
    background: transparent;
    border-color: lightgrey;
    border-radius: 0;
}
#modalAuth #registerForm #register {
    margin-top: 10px;
}
#modalAuth #registerForm #register.disabled {
     pointer-events: none;
     opacity: 0.6;
}
#modalAuth #registerForm #marketingConfirm,
#modalAuth #registerForm #tosConfirm {
    margin-left: -2px;
}
#modalAuth #registerForm label[for] {
    font-size: 12px;
    display: inline-block;
    width: 248px;
    vertical-align: middle;
}
#modalAuth #registerForm label[for=tosConfirm],
#modalAuth #registerForm label[for=marketingConfirm] {
    margin-top: 10px;
}
#modalAuth #registerForm input[type=checkbox] {
    margin-top: 16px;
}
#modalAuth #registerForm a {
    font-size: 12px;
}

#modalAuth #registerForm #country optgroup {
    background: transparent;
    font: 14px/16px 'titilliumWebRegular'
}
#modalAuth #registerForm option.country {
    width: 210px;
    background: transparent;
}
#modalAuth .gold-bag {
    position: absolute;
    width: 240px;
    height: 138px;
    top: 45px;
    right: 41px;
    background: url('../images/new/warClicks/register_benefits.png') no-repeat;
}

/* Modal country Change */

#countryChange {
    position: absolute;
    display: none;
    z-index: 3;
    background: rgba(0,0,0,0.3);

    top: 0;
    left: 0;
    width: 1000px;
    height: 550px;
}
#countryChange .inner-holder {
    position: relative;
    vertical-align: top;
    margin: 100px auto;
    width: 550px;
    padding-right: 70px;
    padding-bottom: 50px;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
}
#countryChange .button {
    font: 16px/20px 'titilliumWebBold';
    text-align: center;
    background: #f7931e;
    padding: 6px 24px;
    color: #ffffff;
}
#countryChange form {
    margin-top: 20px;
}
#countryChange .inner {
    display: inline-block;
    vertical-align: top;
    padding: 18px 0 0 32px;

    font: 14px/15px 'titilliumWebRegular';
}
#countryChange .inner .text{
    font: 20px/20px 'titilliumWebRegular';
}
#countryChange .inner .form-error {
    color: red;
    margin-top: 20px;
}
#countryChange .inner input.error {
    border-color: #ff0000;
}
#countryChange #countryChangeForm {
    /*width: 285px;*/
}
#countryChange #countryChangeForm input:not([type=submit]) {
    padding-top: 18px;
    width: 251px;
}
#countryChange #countryChangeForm label {
    font: 12px/16px 'titilliumWebRegular';
}
#countryChange #countryChangeForm .select-country {
    width: 550px;
}
#countryChange #countryChangeForm #country {
    width: 253px;
    background: transparent;
    border-color: lightgrey;
    border-radius: 0;
}
#countryChange #countryChangeForm #change {
    margin-top: 10px;
}
#countryChange #countryChangeForm #change.disabled {
    pointer-events: none;
    opacity: 0.6;
}
#countryChange #countryChangeForm label[for] {
    font-size: 12px;
    display: inline-block;
    width: 248px;
    vertical-align: middle;
}
#countryChange #countryChangeForm a {
    font-size: 12px;
}

#countryChange #countryChangeForm #country optgroup {
    background: transparent;
    font: 14px/16px 'titilliumWebRegular'
}
#countryChange #countryChangeForm option.country {
    width: 210px;
    background: transparent;
}
/* END modal country change */

#customHolder {
    position: absolute;
    display: none;
    z-index: 3;
    background: rgba(0,0,0,0.3);

    top: 0;
    left: 0;
    width: 1000px;
    height: 550px;
}
#customHolder.missions {
    top: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;

    width: 700px;
    height: 500px;
    background: #ecf0f1;

    border: 1px solid white;
}
#customHolder.missions .header {
    padding: 5px 10px;
    height: 30px;
}
#customHolder.missions .header .title {
    display: inline-block;
    font: 21px/30px 'titilliumWebSemiBold';
    color: #f7931e;
}
#customHolder.missions .header .x {
    position: absolute;
    top: 2px;
    right: 18px;
    width: 36px;
    height: 36px;
    background: url(../images/new/warClicks/wc_splosno/sp_2_close_min.png) 0 0;
    z-index: 2;
}
#customHolder.missions .header .x:hover {
    background-position-y: -36px;
}
#customHolder.missions .loading-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/loading_new_32.gif) no-repeat center center, rgba(0,0,0,0.9);
    z-index: 1;
}
#customHolder.missions .loading-cover .desc{
    position: absolute;
    top: calc(50% + 20px);
    left: 0;
    right: 0;
    margin: 0 auto;

    width: max-content;

    font: 15px/20px 'titilliumWebBold';
    color: #ffffff;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#customHolder.missions .section {
    display: inline-block;
    vertical-align: top;

    margin-left: 10px;
    background: #dbdbdb;
}
#customHolder.missions .section.missions {
    width: calc(36% - 15px);
}
#customHolder.missions .section.career {
    width: calc(64% - 15px);
}
#customHolder.missions .section .title {
    height: 38px;
    padding: 0 10px;

    color: #ffffff;
    font: 16px/38px 'titilliumWebSemiBold';
    text-align: center;
    background: #3f4651;
}
#customHolder.missions .section:not(:first-child) {
    margin-right: 10px;
}
#customHolder.missions .section .content {
    padding: 5px;
    font: 12px/14px 'titilliumWebRegular';
    color: #000000;

    height: 400px;
    overflow-y: auto;
}
#customHolder.missions .info-text {
    text-align: center;
    font: 14px/16px 'titilliumWebRegular';
}
#customHolder.missions .name {
    font: 14px/16px 'titilliumWebBold';
    text-align: center;
    color: #009245;
}
#customHolder.missions .name > span {
    font: 12px/14px 'titilliumWebSemiBold';
    color: #000000;
}
#customHolder.missions .desc {
    margin: 10px 0;
    font: 12px/14px 'titilliumWebRegular';
    text-align: center;
}
#customHolder.missions .progress {
    position: relative;
    background: #ffffff;
    padding: 2px;
    height: 16px;
    transition: transform 500ms;
}
#customHolder.missions .progress:after {
    border-radius: 0;
    background: #009245;
    transition: transform 500ms;
}
#customHolder.missions .progress[data-progress^="1"]:after{
    background: #009245;
}
#customHolder.missions .progress span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;

    width: max-content;

    z-index: 1;
    font: 14px/20px 'titilliumWebSemiBold';

    color: #ffffff;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;

}
#customHolder.missions .missions .rewards {
    margin-top: 20px;
    font: 14px/16px 'titilliumWebBold';
    text-align: center;
}
#customHolder.missions .rewards > div {
    display: inline-block;
    height: 30px;

    font: 14px/30px 'titilliumWebBold';
    color: #000000;
    text-align: center;

    min-width: 30px;
    max-width: max-content;
    vertical-align: middle;
}
#customHolder.missions .rewards .reward .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
}
#customHolder.missions .rewards .reward .icon.gold {
    width: 28px;
    height: 30px;
    background-size: auto 100%;
    background-position: -27px;
}
#customHolder.missions .rewards .reward .icon.pvp {
    width: 28px;
    height: 30px;
    background-size: auto 100%;
    background-position: -136px;
}
#customHolder.missions .rewards .reward .icon.tw {
    width: 31px;
    height: 30px;
    background: url("../images/new/warClicks/wc_splosno/time_warp.png") no-repeat center center;
    background-size: 100% 100%;
}
#customHolder.missions .rewards .reward .icon.dpc_30s {
    width: 25px;
    height: 25px;
    background: url("../images/new/warZone/2xdpc.png") no-repeat center center;
    background-size: 100% 100%;
}
#customHolder.missions .rewards .reward .icon.spw {
    width: 30px;
    height: 30px;
    background: url("../images/new/warClicks/shop/rework/icon_sprite.png?v=2") no-repeat center center;
    background-size: auto 100%;
    background-position: -210px;
}
#customHolder.missions .rewards .reward {
    min-width: 50px;

    padding: 2px 5px;

    color: #f7931e;
    background: #ffffff;

    border-radius: 5px;
    border: 1px #009245 solid;
}
#customHolder.missions .rewards .reward.disabled {
    pointer-events: auto;
}
#customHolder.missions .missions .rewards .reward:hover:not(.disabled) {
    filter: brightness(120%);
    border: 1px #009245 dashed;
}
#customHolder.missions .career .rewards .reward {
    font: 14px/14px 'titilliumWebBold';
    height: 14px;
    width: 60px;
}
#customHolder.missions .rewards > div:not(:last-child) {
    margin-right: 10px;
}
#customHolder.missions .rewards .or {
}
#customHolder.missions .requirements {
    text-align: center;
    color: red;
}
#customHolder.missions .tip {
    padding: 4px 5px;
    margin: 10px auto;
    font: 12px/16px 'titilliumWebRegular';
    background: #ffffff;
    overflow: auto;
    font-style: italic;
}
#customHolder.missions .go {
    background: #009245;
    display: inline-block;
    float: right;
    margin-top: 3px;
    margin-left: 10px;
    padding: 3px 5px;

    color: #ffffff;
    font: 14px/18px 'titilliumWebBold';
    border-radius: 5px;
    border: 1px #009245 solid;
}
#customHolder.missions .go:hover {
    filter: brightness(120%);
    border: 1px #ffffff dashed;
}
#customHolder.missions .skip-options {
    text-align: center;
    font: 12px/14px 'titilliumWebRegular';
}
#customHolder.missions .skip-options .mission-skip {
    display: block;

    width: max-content;

    margin: 20px auto 0 auto;
    padding: 2px 5px;

    border: 1px #ffffff solid;
    background: #f7931e;
    color: #ffffff;
    font: 13px/24px 'titilliumWebBold';
    border-radius: 5px;
}

#customHolder.missions .skip-options .mission-skip:hover {
    border: 1px #ffffff dashed;
    filter: brightness(127%);
}
#customHolder.missions .skip-options .mission-skip:hover {
    filter: brightness(120%);
}
#customHolder.missions .collapse-tiers {
    display: inline-block;
    vertical-align: middle;
    font: 12px/38px 'titilliumWebSemiBold';
    margin-left: 114px;
}
#customHolder.missions .condition-checkbox {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    margin-top: 1px;
    background: url(../images/warZone/wc_yes_no.png) no-repeat;
    background-position-x: -14px;
    text-align: center;
    background-size: 200% 100%;
}
#customHolder.missions .condition-checkbox.selected {
    background-position-x: 0px;
}
#customHolder.missions .condition-checkbox:hover {
    filter: brightness(127%);
}
#customHolder.missions .career .career-group {
    position: relative;
    margin-bottom: 5px;
    padding-bottom: 1px;

    background: #ffffff;

}
#customHolder.missions .career .career-group .completed-note {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #009245;
    color: #ffffff;

    text-align: center;
    font: 14px/38px 'titilliumWebBold';
}
#customHolder.missions .career .career-group.collapsed.activated {
    height: 38px;
    overflow: hidden;
}
#customHolder.missions .career .career-group.collapsed.activated .completed-note {
    display: block;
}
#customHolder.missions .career .career-group .tier {
    margin-left: 10px;
    font: 17px/23px 'titilliumWebBold';
    text-transform: uppercase;
    color: #009245;
}
#customHolder.missions .career .career-group .lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    text-align: center;
    font: 14px/16px 'titilliumWebBold';
    color: #ffffff;
    /* prevents bars from below showing up? */
    will-change: transform;

    background: url("../images/new/warZone/country_hq/hq/lock.png") no-repeat center center, #000000;
}
#customHolder.missions .career .career-group .lock > div.tier-name {
    margin-top: 20px;
    text-align: center;
    font: 20px/20px 'titilliumWebBold';
    color: #f7931e;
}
#customHolder.missions .career .career-group .lock > div:not(.tier-name) {
    margin-top: 20px;
    text-align: center;
    font: 14px/16px 'titilliumWebBold';
    color: #ffffff;
}
#customHolder.missions .career .career-goal {
    position: relative;
    margin: 0 5px 5px 5px;
    background: #ffdfac;
    padding: 2px;
    min-height: 49px;
}
#customHolder.missions .career .career-group.collapsed.activated .career-goal {
    display: none;
}
#customHolder.missions .career .career-goal > div {
    margin-left: 10px;

    font: 12px/20px 'titilliumWebRegular';
    color: #000000;

}
#customHolder.missions .career .career-goal > div.name {
    font: 13px/20px 'titilliumWebSemiBold';
    text-align: left;
}
#customHolder.missions .career .career-goal > div.requires {
    font: 12px/14px 'titilliumWebRegular';
    text-align: left;
    max-width: 250px;
    min-height: 20px;
}
#customHolder.missions .career .career-goal .rewards {
    position: absolute;
    right: 11px;
    top: 3px;
    height: 40px;
}
#customHolder.missions .career .career-goal .reward-collected {
    color: #009245;
}
#customHolder.missions .career .career-goal .reward-collected > span{
    display: inline-block;
    height: 20px;
    width: 20px;
    max-width: none;

    background: url("../images/new/warClicks/daily_tasks/daily_tasks_icons_sprite_min.png") 0 0;
    vertical-align: middle;
    margin-top: -3px;

}
#customHolder.missions .career .career-goal .collect-reward {
    position: absolute;
    top: 22px;
    right: -10px;
    padding: 0px 8px;
    font: 12px/14px 'titilliumWebSemiBold';
    height: auto;
    color: #ffffff;
    background: #f7931e;
    border-radius: 5px;
    border: 1px #f7931e solid;
}
#customHolder.missions .career .career-goal .collect-reward:hover {
    filter: brightness(120%);
    border: 1px #f7931e dashed;
}
#customHolder.missions .career .career-goal .collect-reward:hover {
    filter: brightness(120%);
}
#customHolder.missions .career .progress {
    position: relative;
    background: #ffffff;
    padding: 0px;
    height: 3px;
    margin-right: 10px;
    transition: transform 500ms;
}
#customHolder.missions .career .progress:after {
    border-radius: 0;
    background: #009245;
    transition: transform 500ms;
}
/* COmpetition details modal */
#competitionDetails {
    position: absolute;
    display: none;
    z-index: 1;

    top: 0;
    left: 0;
    width: 100%;
}

#competitionDetails .competitions-holder {
    background: white;
    padding: 10px 20px;
    width: 960px;
    height: 530px;
}
#competitionDetails .head {
    height: 34px;
}
#competitionDetails .head .title {
    display: inline-block;
    font: 25px/30px 'titilliumWebRegular';
    color: #f7931e;
}
#competitionDetails .head .x {
    top: 9px;
}
#competitionDetails .head .special-text{
    display: inline-block;
    /*width: fit-content;*/
    vertical-align: middle;
    margin-top: -11px;
    font: 17px/17px 'titilliumWebRegular';
    margin-left: 43px;
    color: #009245;
    width: 627px;
}
#competitionDetails .head .special-text .smaller{
    font: 13px/16px 'titilliumWebRegular' !important;
}
#competitionDetails .head .special-text .smaller > a{
    font: 12px/16px 'titilliumWebRegular' !important;
}
#competitionsHolder {
    width: 100%;
    height: 100%;
    /*margin-left:10px;
    background: rgba(207, 214, 215, 0.6);*/
}
#competitionsHolder .competition-types {
    position: relative;
    width: 150px;
    padding-right: 20px;
    float: left;
    background: rgba(207, 214, 215, 0.6);

    height: 445px;
}
#competitionsHolder .competition-types .button {
    box-shadow: 0 1px 2px rgba(0,0,0, 0.5), 1px 0px 2px rgba(0,0,0, 0.5);
    font: 13px/24px 'titilliumWebSemiBold';
    padding: 4px 5px;
    display: block;
    margin: 7px 0;
    margin-left: 10px;
    background: #f7931e;
    color: #ffffff;
    text-align: left;
}
#competitionsHolder .competition-types .button:first-child {
    margin: 0 0 7px 10px;
}
#competitionsHolder .competition-types .button.active{
    font: 13px/24px 'titilliumWebSemiBold';
    background: #999999;
    margin-left: 0px;
    padding-left:15px;
    color: #ffffff;
}
#competitionsHolder .competition-types .button:hover:not(.active) {
    color: #000000;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}

#competitionsHolder .competition-types .competitions-banner {
    width: 101px;
    height: 210px;
    padding: 0 20px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: url('../images/new/warClicks/wc_splosno/competition_square.png') no-repeat;
    z-index: 1;
}
#competitionsHolder .competitions-banner .text-note {
    text-align: center;
    color: #ffffff;
    font: 12px/16px 'titilliumWebSemiBold';
    margin-top: 105px;
    height: 80px;
}
#competitionsHolder .competitions-banner .text-note.shorter {
    height: 40px;
}
#competitionsHolder .competitions-banner .timer {
    text-align: center;
    color: #ffffff;
}
#competitionsHolder .competitions-banner .timer > div {
    display: inline-block;
    width: 27px;
    height: 17px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    text-align: center;
    font: 12px/16px 'titilliumWebSemiBold';
    color: #ffffff;
    vertical-align: middle;
}
#competitionsHolder .competitions-banner .timer .days {
    margin-right: 1px;
}
#competitionsHolder .competitions-banner .timer .hours {
    margin-right: 1px;
    margin-left: 1px;
}
#competitionsHolder .competitions-banner .timer .minutes {
    margin-left: 1px;
}
#competitionsHolder .competitions-banner .rules,
#competitionsHolder .competitions-banner .join-competition {
    text-decoration: none;
    display: block;
    width: 101px;
    position: absolute;
    bottom: 14px;
    height: 26px;
    text-align: center;
    background: #f7931e;
    border-radius: 5px;
    color: #000000;
    font: 14px/26px 'titilliumWebBold';
}
#competitionsHolder .competitions-banner .join-competition.disabled {
    bottom: 9px;
    height: 36px;
    width: 96px;
    font: 14px/18px 'titilliumWebSemiBold';
}
#competitionsHolder .competitions-banner .rules:hover {
    color: #000000;
    filter: brightness(111%);
}
#competitionsHolder .competitions-banner .join-competition:hover {
    color: #ffffff;
    filter: brightness(111%);
}
#competitionsHolder .button-holder {
    height: 40px;
    background: #999999;
    margin-bottom: 10px;
}

#competitionsHolder .button-holder .no-border{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
#competitionsHolder .nav-holder {
    position: relative;
}
#competitionsHolder .button-holder .nav-button-left {
    position: absolute;
    top: 10px;
    left: 148px;
    padding: 0 5px;

    font: 14px/20px 'titilliumWebBold';
    color: #cccccc;
    text-decoration:none;
    background-color: #545454;
    width: 123px;

    border-radius: 5px;
}
#competitionsHolder .button-holder .nav-button-center {
    position: absolute;
    top: 5px;
    left: 339px;

    border:none;
    /*background: grey;*/
    padding: 5px 10px;

    margin-left:64px;
    font: 18px/20px 'titilliumWebSemiBold';
    color: #ffffff;

}
#competitionsHolder .button-holder .nav-button-center:hover {
    pointer-events:none;
}
#competitionsHolder .button-holder .nav-button-center > span {
    font: 14px/16px 'titilliumWebSemiBold';
}
#competitionsHolder .button-holder .left-arrow-span {
    margin-right:4px;
}
#competitionsHolder .button-holder .right-arrow-span {
    margin-left:10px;
}
#competitionsHolder .button-holder .next-round-text {
    font: 13px/24px 'titilliumWebRegular';
    margin-left:18px;
}
#competitionsHolder .button-holder .left-button, .right-button {
    text-decoration:none;
}
#competitionsHolder .button-holder .nav-button-right {
    position: absolute;
    top: 10px;
    right: 80px;

    padding: 0 5px;

    font: 14px/20px 'titilliumWebBold';
    color: #cccccc;
    text-decoration:none;
    background-color: #545454;
    width:123px;
    border-radius: 5px;
}
#competitionsHolder .button-holder .hidden-left-button {
    pointer-events: none;
    opacity:0;
}
#competitionsHolder .competitions_stats_page {
    float: left;
    width: calc(100% - 170px);
}

#competitionsHolder .competitions_stats_holder {
    background: rgba(207, 214, 215, 0.6);
    /*padding: 10px;*/
    padding: 0 10px;
    height: 445px;
}
#competitionsHolder .competitions_stats_holder .competitions_stats {
    position: relative;
    /*height: 425px;*/
    height: 395px;
}
#competitionsHolder .competitions_stats_holder .competitions_stats.veterans {
    height: 390px;
}
#competitionsHolder .competitions_stats_holder .competitions_stats.veterans table {
    /*height: 300px;
    overflow-y: auto;*/
    margin-top: 3px;
}
#competitionsHolder .competitions_stats_holder .competitions_stats.veterans tbody {
    overflow-y: auto;
    display: block;
    height: 312px;
}
#competitionsHolder .competitions_stats_holder .competitions_stats.veterans .macro-holder {
    position: absolute;
    left: -54px;
    top: -58px;
}
#competitionsHolder .competitions_stats_holder .competition-subtypes {
    height: 30px;
    text-align: center;
}
#competitionsHolder .competitions_stats_holder .competition-subtypes .type-button {
    display: inline-block;
    padding: 2px 5px;
    font: 14px/20px 'titilliumWebBold';
    color: #cccccc;
    background-color: #545454;
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 5px;
}
#competitionsHolder .competitions_stats_holder .competition-subtypes .type-button:hover {
    color: white;
}
#competitionsHolder .competitions_stats_holder .competition-subtypes .type-button.active {
    pointer-events: none;
    color: white;
}
#competitionsHolder .competitions_stats_holder .competition-subtypes .info-button {
    margin-top: -5px;
    margin-left: -12px;
}
#competitionsHolder .competitions_stats_holder .veterans-desc {
    font: 12px/16px 'titilliumWebRegular';
    margin: 0;
}
#competitionsHolder .competitions_stats_holder .competitions_stats h3{
    margin-top: 0;
    margin-bottom: 0;
    font: 15px/17px 'titilliumWebBold';
    text-align:center;
    padding-top: 0px;
}
#competitionsHolder table th {
    text-align: center;
    height: 35px;
}
#competitionsHolder table {
    font: 15px/18px 'titilliumWebRegular';
}
#competitionsHolder table td {
    position: relative;
    text-align: center;
}
#competitionsHolder table td:nth-of-type(2),
#competitionsHolder table td:nth-of-type(3),
#competitionsHolder table td:nth-of-type(4),
#competitionsHolder table:not(.countrytab) td:nth-of-type(5),
#competitionsHolder table th:nth-of-type(2),
#competitionsHolder table th:nth-of-type(3),
#competitionsHolder table:not(.countrytab) th:nth-of-type(4),
#competitionsHolder table:not(.countrytab) th:nth-of-type(5){
     text-align: left;
}
#competitionsHolder table.countrytab td:nth-of-type(1),
#competitionsHolder table.countrytab th:nth-of-type(1) {
    text-align: left;
    padding-left:33px; width: 157px;
}
/*#competitionsHolder table tr:nth-child(2n) td {
    background: rgba(244, 245, 246, 1);
}*/
#competitionsHolder table tr:nth-child(2n+1) td {
    background: rgba(244, 245, 246, 1);
}
#competitionsHolder table .back_icon{
    /*height: 32px*/;
    height: 31px;
    width: 52px;
}
#competitionsHolder table .back_icon > .macro-holder{
    left: -55px;
    top: -59px;
}
#competitionsHolder table td.country_flag {
    height: 30px;
}
#competitionsHolder table td.reward {
    position: relative;
}
#competitionsHolder table td.trophy{
    text-align:center;
}
#competitionsHolder table td.trophy >div {
    position: absolute;
    top: 0;
    left: calc(50% - 35px);
}
#competitionsHolder table.countrytab td.trophy >div {
    position: absolute;
    top: 0;
    left: 15px;
}
#competitionsHolder .flag {
    position: absolute;
    /*left: calc(50% - 16px);*/
    left: 0;
    top:0px;
}
#competitionsHolder .badge {
    display:inline-block;
    height: 56px;
    width: 32px;
    background: url('../images/badges_sprite.png') 0 0;
    transform: scale(0.5);
    position: absolute;
    top: -12px;
    left: calc(50% - 16px);
}
#competitionsHolder table tr.user-marked td {
    background: #00ffff !important;
    box-shadow: inset 0 -1px 0 #29abe2, inset 0 1px 0 #29abe2;
}
#competitionsHolder table tr.user-marked td:first-child {
    box-shadow: inset 0 -1px 0 #29abe2, inset 0 1px 0 #29abe2, inset 1px 0 0px #29abe2;
}
#competitionsHolder table tr.user-marked td:last-child {
    box-shadow: inset 0 -1px 0 #29abe2, inset 0 1px 0 #29abe2, inset -1px 0 0px #29abe2;
}
#competitionsHolder .special-text{
    color: #333333;
    font: 12px/12px 'titilliumWebRegular';
    font-style: italic;
    position: absolute;
    /*bottom: 23px;*/
    /*bottom: 6px;*/
    bottom: 17px;
    bottom: 2px;
    right: 35px;
}
.competitions_stats .w_50{
    width: 50px;
    text-align: left
}
.competitions_stats .w_60{
    width: 60px;
    text-align: left
}
.competitions_stats .w_65{
    width: 65px;
    text-align: left
}
.competitions_stats .w_100{
    width: 100px;
    text-align: left
}
.competitions_stats .w_110{
    width: 110px;
    text-align: left
}
.competitions_stats .w_120{
    width: 120px;
    text-align: left
}
.competitions_stats .w_130{
    width: 130px;
}
.competitions_stats .w_140{
    width:140px;
    text-align:left
}
.competitions_stats .w_150{
    width:150px;
    text-align:left
}
.competitions_stats .w_160{
    width:160px;
    text-align:left
}
.competitions_stats .w_170{
    width:170px;
    text-align:left
}

.competitions_stats .w_180{
    width:180px;
    text-align:left
}
.competitions_stats .w_190{
    width:190px;
}
.competitions_stats .w_200{
    width:210px;
    text-align:left
}
.competitions_stats .w_210{
    width:210px;
    text-align:left
}
.competitions_stats .w_220{
    width:220px;
    text-align:left
}
.competitions_stats .w_230{
    width:230px;
    text-align:left
}
.competitions_stats .w_240{
    width:240px;
    text-align:left
}
.competitions_stats .w_260{
    width:260px;
    text-align:left
}
.competitions_stats .w_400{
    width:400px;
    text-align:left
}
#competitionsHolder .country,
#competitionsHolder .country_flag,
#competitionsHolder .country_name {
    text-align: lefT;
}

#competitionsHolder span.pagination {
    position: absolute;
    bottom: 0;
}
#competitionsHolder a.pagination {
    font: 14px/18px 'titilliumWebRegular';
}
#competitionsHolder .current-page {
    font: 14px/18px 'titilliumWebBold';
    color: #453a26;
}

/* USED FOR OVERRIDING KITS CSS more easily */
#game_holder  .product-kit .icon.kreds {
    margin-top: 0px;
}
#game_holder  .product-kit .icon.kreds.big {
    margin-right: 5px;
}
#game_holder  .product-kit .old-kit-price {
    position: absolute;
    top: 342px;
    left: 63px;
    width: 125px;
    height: 21px;
    font: 14px/21px 'OpenSansBold';
    color: #6B6354;
    text-align: center;
    vertical-align: middle;
}
#game_holder  .product-kit .new-kit-price {
    position: absolute;
    top: 406px;
    /*top: 40px;*/
    left: 312px;
    /*left: 338px;*/
    font: 21px/21px 'openSansExtraBold';
    color: #EE2227;
    text-align: center;
    vertical-align: middle;
}
#game_holder  .product-kit .ultimate .new-kit-price {
    color: #ffffff;
}
#game_holder  .product-kit .crossed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 21px;
    background: url("../images/new/warClicks/shop/line.png") center center no-repeat;
}
#generalPopupCurtain {
    width: 1000px;
    height: 551px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
}
#dailyResetInfoHolder {
    position: relative;
    margin: 0 auto;
    margin-top: 12px;
    width: 304px;
    height: 522px;
    background: yellow;
    background: url('../images/new/warClicks/wc_splosno/daily_reset_base.png');
    padding-left: 18px;
    padding-right: 18px;
}
#dailyResetInfoHolder .close{
    width: 15px;
    height: 16px;
    background: url('../images/new/warClicks/wc_splosno/daily_reset_close.png');
    position: absolute;
    right: 12px;
    top: 11px;
}
#dailyResetInfoHolder .close:hover{
    transform: scale(1.1);
    filter: brightness(120%);
}
#dailyResetInfoHolder > .header {
    font: 14px/18px 'titilliumWebBold';
    color: #f7931e;
    height: 53px;
    padding-top: 13px;
}
#dailyResetInfoHolder > .sub-header {
    font: 12px/28px 'titilliumWebBold';
    color: white;
    height: 54px;
    padding-top: 11px;
}
#dailyResetInfoHolder > .sub-header .daily-reset {
    width: 70px;
    height: 29px;
    background: url('../images/new/warClicks/wc_splosno/daily_reset_icon.png');
    margin-left: 14px;
    display: inline-block;
    /*position: relative;*/
    /*top: 3px;*/
}
#dailyResetInfoHolder > .sub-header .daily-reset .time-left {
    font: 10px/14px 'titilliumWebSemiBold';
    width: 40px;
    height: 14px;
    margin-left: 5px;
    margin-top: 3px;
}
#dailyResetInfoHolder > .sub-header .daily-reset .time-left > div {
    color: white;
    display: inline-block;
}
#dailyResetInfoHolder > .sub-header .daily-reset .time-left > .minutes-left{
    margin-left: 1px;
}
#dailyResetInfoHolder > .info-text {
    padding-top: 6px;
    font: 12px/23px 'titilliumWebSemiBold';
    color: white;
}
#dailyResetInfoHolder > .info-text > .title{
    font: 14px/23px 'titilliumWebSemiBold';
    color: #00A99D;
}
#dailyResetInfoHolder > .info-text .require{
    font: 11px/23px 'titilliumWebSemiBold';
    font-style: italic;
    margin-left: 8px;
    color: #999999;
}
#dailyResetInfoHolder > .info-text > .entries{
    font: 12px/23px 'titilliumWebSemiBold';
}
#dailyResetInfoHolder > .info-text > .tip{
    font: 12px/15px 'titilliumWebSemiBold';
    font-style: italic;
    color: #999999;
    margin-top: 20px;
}
#dailyResetInfoHolder > .info-text > .dont-show-notice{
    display: inline-block;
    position: relative;
    left: 174px;
    top: 5px;
}
.dailyResetSmallPopup{
    position: relative;
    margin: 0 auto;
    width: 279px;
    height: 79px;
    background: #3f4651;
    border: 1px white solid;
    padding: 14px;
    color: white;
    font: 12px/14px 'titilliumWebSemiBold';
    padding-right: 46px;
    top: 110px;
}
.dailyResetSmallPopup .close{
    width: 15px;
    height: 16px;
    background: url('../images/new/warClicks/wc_splosno/daily_reset_close.png');
    position: absolute;
    right: 12px;
    top: 11px;
}
.dailyResetSmallPopup .close:hover {
    transform: scale(1.1);
    filter: brightness(120%);
}
#specialPopupHolder {
    position: relative;
    margin: 0 auto;
    margin-top: 43px;
    font: 12px/15px 'titilliumWebSemiBold';
    background: url('../images/new/warClicks/wc_splosno/background_shine.png');
    /*color: white;*/
    width: 669px;
    height: 476px;
    padding-left: 18px;
    padding-right: 18px;
}
#specialPopupHolder > .inner-holder{
    width: 279px;
    /*height: 236px;*/
    background: #ECF0F1;
    border: 1px solid #3F4651;
    position: absolute;
    top: 125px;
    left: 158px;
    padding-top: 18px;
    padding-left: 27px;
    padding-right: 47px;
    font: 12px/18px 'titilliumWebRegular';
    color: black;
    box-shadow: 0 0 46px 28px rgba(255, 206, 0, 0.25);
}
#specialPopupHolder > .inner-holder.post-privatize {
    /*height: 131px;*/
    top: 153px;
}

#specialPopupHolder > .inner-holder.post-bc-expansion {
    /*height: 131px;*/
    width: 370px;
    top: 30px;
}
#specialPopupHolder > .inner-holder .inner-text{
    position: relative;
    margin-left: 6px;
    top: -5px;
}
#specialPopupHolder .close{
    width: 36px;
    height: 36px;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    /*width: 15px;*/
    /*height: 16px;*/
    /*background: url('../images/new/warClicks/wc_splosno/daily_reset_close.png');*/
    position: absolute;
    right: 9px;
    top: 5px;
    transform: scale(0.80);
}
#specialPopupHolder .close:hover{
    transform: scale(0.92);
    filter: brightness(120%);
}
#specialPopupHolder > .inner-holder .header{
    font: 18px/18px 'titilliumWebBold';
    color: #37A541
}
#specialPopupHolder > .inner-holder .faster{
    font: 12px/18px 'titilliumWebBold';
    color: #37A541
}
#timeWarpsPopupHolder{
    position: absolute;
    width: 286px;
    /*height: 200px;*/
    padding: 15px;
    background: #3f4651;
    border: 1px solid white;
    top: 77px;
    left: 129px;
}
#timeWarpsPopupHolder.event {
    width: 460px;
}
#timeWarpsPopupHolder .x {
    top: 4px;
    right: 7px;
}
#timeWarpsPopupHolder .title{
    display: inline-block;
    width: 231px;
    height: 34px;
    background: url('../images/new/warClicks/wc_splosno/gradient.png');
    font: 13px/15px 'titilliumWebSemiBold';
    color: #ffff00;
    vertical-align: top;
    margin-left: -5px;
    margin-top: 2px;
    padding-left: 15px;
    padding-top: 2px;
}
#timeWarpsPopupHolder .tw-icon {
    display: inline-block;
    position: relative;
    width: 41px;
    height: 41px;
    background: url("../images/new/warClicks/wc_splosno/icon_for_popup.png");
}
#timeWarpsPopupHolder .time-warp-limit {
    font: 12px/25px 'titilliumWebRegular';
    color: white;
}
#timeWarpsPopupHolder .time-warp-limit span {
    font: 12px/25px 'titilliumWebBold';
}
#timeWarpsPopupHolder .item {
    margin-top: 7px;
}
#timeWarpsPopupHolder .item > div{
    display: inline-block;
}
#timeWarpsPopupHolder .item .timer{
    position: absolute;
    text-align: center;
    background: url("../images/new/warClicks/wc_splosno/timer.png");
    width: 34px;
    height: 37px;
    font: 13px/39px 'titilliumWebSemiBold';
    color: white;
}
#timeWarpsPopupHolder /*.item*/ .gain-info {
    width: 117px;
    background: white;
    font: 13px/29px 'titilliumWebBold';
    color: #22b573;
    text-align: center;
    /*height: 28px;*/
    min-height: 28px;
    vertical-align: top;
    margin-top: 6px;
    /*margin-left: -17px;*/
    margin-left: 19px;
}
#timeWarpsPopupHolder.event .item .gain-info {
    width: 270px;
    vertical-align: top;
    padding-left: 12px;
}
#timeWarpsPopupHolder /*.item*/ .extra-gains {
    font: 10px/12px 'titilliumWebSemiBold';
    padding: 4px 5px 0px 10px;
    text-align: left;
    color: black;
    display: inline-block;
    width: 150px;
    vertical-align: top;
}
#timeWarpsPopupHolder .item .use{
    border: 1px #f7931e solid;
    display: inline-block;
    background: #f7931e;
    color: #ffffff;
    width: 60px;
    font: 13px/27px 'titilliumWebBold';
    border-radius: 5px;
    padding: 0 5px;
    height: 27px;
    text-align: center;
    margin-top: 6px;
    margin-left: -4px;
}
#timeWarpsPopupHolder .item .chances-more{
    font: 13px/21px 'titilliumWebRegular';
    font-style: italic;
    color: #cccccc;
    margin-left: 11px;
}
#timeWarpsPopupHolder .no-more-text{
    margin-top: 4px;
    font: 13px/16px 'titilliumWebRegular';
    color: white;
}
#timeWarpsPopupHolder .buy-more-tw {
    color: #ffff00;
    text-decoration: underline;
}
#timeWarpsPopupHolder .buy-more-tw:hover {
    color: #ed1c24;
}
#timeWarpsPopupHolder .additional-tip {
    font: 13px/14px 'titilliumWebRegular';
    color: #cccccc;
    margin-top: 15px;
}
#timeWarpsPopupHolder .custom-calculate {
    border-top: 1px solid #cccccc;
    color: #cccccc;
    margin-top: 20px;
    padding-top: 3px;
    font: 12px/20px 'titilliumWebRegular';
}
#timeWarpsPopupHolder .custom-calculate #calculateAmount {
    display: inline-block;
    width: 100px;
    margin-right: 20px;
    vertical-align: middle;
    text-align: center;
}
#timeWarpsPopupHolder .custom-calculate #customCalculate {
    display: inline-block;
    vertical-align: middle;

    padding: 0px 14px;

    border: 1px #f7931e solid;
    background: #f7931e;
    border-radius: 5px;
    color: #ffffff;

    font: 13px/20px 'titilliumWebSemiBold';
}
#timeWarpsPopupHolder .custom-calculate #customCalculate:hover {
    filter: brightness(130%);
}
#timeWarpsPopupHolder .custom-calculate #calculateResult {
    /*display: none;*/
    margin-top: 10px;
    background: #ffffff;
    font: 12px/15px 'titilliumWebSemiBold';
    color: #000000;
    width: 359px;
    height: 32px;
    padding-left: 10px;
    border-radius: 5px;
}
#timeWarpsPopupHolder .custom-calculate #calculateResult .estimated-gain {
    display: inline-block;
    vertical-align: top;
}
#timeWarpsPopupHolder .custom-calculate #calculateResult .gain-info {
    position: relative;
    top: -20px;
    left: 34px;
    width: 270px;
    background: white;
    font: 13px/29px 'titilliumWebBold';
    color: #22b573;
    text-align: center;
    min-height: 28px;
    margin-left: 0;
}
#settingsPopupHolder{
    position: absolute;
    /*width: 700px;*/
    width: 740px;
    height: 542px;
    background: #ecf0f1;
    border: 1px solid white;
    top: 3px;
    left: 129px;
}
#settingsPopupHolder > *{
    padding-left: 7px;
}
#settingsPopupHolder .head{
    height: 51px;
    color: #f7931e;
    font: 21px/34px 'titilliumWebSemiBold';
}
#settingsPopupHolder .head  .x{
    top: 5px;
    right: 14px;
}
#settingsPopupHolder .head > div{
    display: inline-block;
}
#settingsPopupHolder .head > .name {
    position: relative;
    top: 4px;
    left: 3px;
}
#settingsPopupHolder .head .settings_icon{
    top: 10px;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 30px;
    background: url("../images/new/warClicks/sp_1_min.png") -200px 0;
    transform: scale(0.8);
}
#settingsPopupHolder .head .hotkeys {
    display: inline-block;
    width: 97px;
    height: 26px;
    font: 14px/25px 'titilliumWebBold';
    color: white;
    border-radius: 5px;
    text-align: center;
    margin-top: 5px;
    margin-left: 27px;
}
#settingsPopupHolder .tabs-holder{
    padding-top: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid white;
    background: #999999;
}
#settingsPopupHolder .tabs-holder > .tab{
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid white;
    border-radius: 5px;
    margin-left: 13px;
    color: white;
    background: #4bada4;
    font: 14px/17px 'titilliumWebSemiBold';
}
#settingsPopupHolder .tabs-holder > .tab:first-child{
    margin-left: 0px;
}
#settingsPopupHolder .tabs-holder > .tab.active{
    background: white;
    color: black;
    border: 1px solid #4bada4;
}
#settingsPopupHolder .tabs-holder > .tab:hover{
    filter: brightness(130%);
}
#settingsPopupHolder .main-content-holder{
    width: 99%;
    height: 377px;
    padding-top: 7px;
    padding-bottom: 7px;
    background: #cfd6d7;
    border-bottom: 1px solid white;
    color: white;
}
#settingsPopupHolder .content-holder{
    display: none;
    height: 384px;
    overflow-y: scroll;
}
#settingsPopupHolder .content-holder.active{
    display: block;
}
#settingsPopupHolder .content-holder .special-notice{
    display: block;
    font: 12px/16px 'titilliumWebSemiBold';
    padding: 10px;
    color: black;
}
#settingsPopupHolder .content-holder .special-notice .info-button{
    margin-top: 0px;
    margin-left: 5px;
}
#settingsPopupHolder .content-holder .credits-available {
    font: 12px/18px 'titilliumWebSemiBold';
    color: black;
    text-align: left;
    padding: 5px;
    display: inline-block;
}
#settingsPopupHolder .content-holder .column-holder{
    display: inline-block;
    width: 48%;
    vertical-align: top;
}
#settingsPopupHolder .content-holder .column-holder.right{
    margin-left: 14px;
}
#settingsPopupHolder .content-holder .section{
     color: black;
     margin-bottom:10px;
}
#settingsPopupHolder .content-holder > .section{
    width: 47%;
}
#settingsPopupHolder .content-holder .section .section-name{
    color: black;
    height: 29px;
    font: 14px/28px 'titilliumWebSemiBold';
}
#settingsPopupHolder .content-holder .section .edit-hotkeys{
    margin-left: 34px;
    display: inline-block;
    background: #f7931e;
    padding: 3px 4px;
    color: white;
    border-radius: 4px;
    font: 15px/17px 'titilliumWebSemiBold';
}
#settingsPopupHolder .content-holder .section .edit-hotkeys.disabled{
    opacity: 0.4;
}
#settingsPopupHolder .content-holder .section .group-holder{
    border: white 1px solid;
    padding: 3px 0;
    position: relative;
}
#settingsPopupHolder .content-holder .section .group-holder:nth-of-type(n+3){
    margin-top: 10px;
}
#settingsPopupHolder .content-holder .section .group-holder .settings-item{
    border: none;
}
#settingsPopupHolder .content-holder .section .group-holder.group-locked {
    min-height: 40px;
}
#settingsPopupHolder .content-holder .section .group-holder > .locked-under {
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 0px;
    left: 0px;

    background: rgba(50,50,50,0.99);
    text-align: center;

    border: 1px solid black;
}
#settingsPopupHolder .content-holder .section .group-holder > .locked-under > .align-helper {
    display: inline-block;
    /*height: 100%;*/
    vertical-align: middle
}
#settingsPopupHolder .content-holder .section .group-holder > .locked-under > span {
    vertical-align: middle;
    color: #ffffff;
    font: 15px/20px 'titilliumWebRegular';

    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    right: 0;
}
#settingsPopupHolder .content-holder .section .settings-item{
    padding: 4px;
    border: white 1px solid;
    overflow: auto;
    position: relative;
}
#settingsPopupHolder .content-holder .section .settings-item.setting-locked {
    min-height: 40px;
}
#settingsPopupHolder .content-holder .section .settings-item[data-id="96"] .info-button{
    margin-top: -2px;
    margin-right: 4px;
}
#settingsPopupHolder .content-holder .section .settings-item.special{
    padding: 0;
    border: none;
    display: inline-block;
    float: right;
    margin-right: 5px;
}
#settingsPopupHolder .content-holder .section .settings-item *{
    display: inline-block;
}
#settingsPopupHolder .content-holder .section .settings-item .locked-under {
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 0px;
    left: 0px;

    background: rgba(50,50,50,0.99);
    text-align: center;

    border: 1px solid black;
}
#settingsPopupHolder .content-holder .section .settings-item .locked-under > .align-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle
}
#settingsPopupHolder .content-holder .section .settings-item .locked-under > span {
    vertical-align: middle;
    color: #ffffff;
    font: 15px/20px 'titilliumWebRegular';
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    right: 0;
}
#settingsPopupHolder .content-holder .section .settings-item .currently-selected-shortcut{
    padding: 5px 9px;
    border: 1px solid white;
    border-radius: 4px;
    background: #3f4651;
    color: white;
    font: 14px/13px 'titilliumWebSemiBold';
    pointer-events: none;
}
#settingsPopupHolder .content-holder .section .settings-item .currently-selected-shortcut.editable{
    pointer-events: auto;
    border: 1px solid #f7931e;
    color: #f7931e;
    animation: anim_scale_101112 1.1s ease-in-out;
    animation-iteration-count: 2;
}
#settingsPopupHolder .content-holder .section .settings-item .currently-selected-shortcut.disabled{
    opacity: 0.3;
}
#settingsPopupHolder .content-holder .section .settings-item > .item-name{
    font: 14px/22px 'titilliumWebRegular';
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder,
#settingsPopupHolder .content-holder  .section .section-name  .options-holder{
    float: right;
}
#settingsPopupHolder .content-holder  .section .section-name > .options-holder{
    margin-right: 5px;
}
#settingsPopupHolder .content-holder  .section .section-name  .options-holder > *{
    display: inline-block;
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder .option,
#settingsPopupHolder .content-holder  .section .section-name .options-holder .option {
    padding: 2px 3px;
    border: 1px solid black;
    border-radius: 4px;
    margin-left: 6px;
    font: 15px/17px 'titilliumWebSemiBold';
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder .option.selected,
#settingsPopupHolder .content-holder  .section .section-name .options-holder .option.selected{
    background: #f7931e;
    color: white;
    border: none;
    padding: 3px 4px;
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder .option.selected{
    background: #4bada4;
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder .option.disabled{
    opacity: 0.4;
}
#settingsPopupHolder .content-holder  .section .section-name .options-holder .option.selected{
    background: #f7931e;
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder .option:not(.selected):hover,
#settingsPopupHolder .content-holder  .section .section-name .options-holder .option:not(.selected):hover{
    background: black;
    color: white;
}
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder #eventCustomSell,
#settingsPopupHolder .content-holder  .section .settings-item > .options-holder #deployCustomNote{
    width: 55px;
}
#settingsPopupHolder .content-holder  .section .settings-item .cost-info {
    font: 12px/13px 'titilliumWebSemiBold';
    color: red;
    display: block;
}
#settingsPopupHolder .main-buttons-holder{
     width: 99%;
     height: 50px;
     /*background: #ecf0f1;*/
}
#settingsPopupHolder .main-buttons-holder > div{
    position: Relative;
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid white;
    border-radius: 5px;
    margin-left: 10px;
    color: white;
    font: 14px/17px 'titilliumWebSemiBold';
    margin-top: 9px;
    float: right;
    right: 13px;
    top: 2px;
    /*background: #4bada4;*/
    background: #f7931e;;
}
#settingsPopupHolder .main-buttons-holder > div.save-text{
    background: none;
    color: black;
}
#settingsPopupHolder .main-buttons-holder > div.save-text > span{
    font-weight: bold;
}
#announcementLogPopupHolder{
    position: absolute;
    /*width: 700px;*/
    width: 740px;
    height: 542px;
    /*background: #ecf0f1;*/
    /*background: #999999;*/
    /*background: #eaeeef;*/
    background: #ecf0f1;
    border: 1px solid white;
    top: 3px;
    left: 129px;
    z-index: 1501;
}
#announcementLogPopupHolder .head{
    width: 100%;
    height: 49px;
    background: white;
}
#announcementLogPopupHolder .head .announcement-icon{
    display: inline-block;
    width: 33px;
    height: 31px;
    background: green;
    background: url("../images/new/warClicks/wc_splosno/announcment.png");
    vertical-align: middle;
    margin-left: 13px;
    margin-top: -8px;
}
#announcementLogPopupHolder .head .name{
    font: 25px/38px 'titilliumWebRegular';
    color: #f7931e;
    display: inline-block;
    margin-left: 16px;
    margin-top: 6px;
}
#announcementLogPopupHolder .tabs-holder{
    width: 100%;
    height: 40px;
    background: grey;
    background: #999999;
}
#announcementLogPopupHolder .tabs-holder .unread {
    width: 22px;
    height: 22px;
    background: url("../chat/chat_notification_icon.png");
    position: absolute;
    top: 1px;
    right: -11px;
}
#announcementLogPopupHolder .tabs-holder .unread {
    width: 22px;
    height: 22px;
    background: url("../chat/chat_notification_icon.png");
    position: absolute;
    top: 1px;
    right: -11px;
    display: none;
}
#announcementLogPopupHolder .tabs-holder .unread.active {
    display: block;
}
#announcementLogPopupHolder .tabs-holder > .tab{
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid white;
    border-radius: 5px;
    margin-left: 13px;
    color: white;
    background: #4bada4;
    font: 14px/17px 'titilliumWebSemiBold';
    margin-top: 6px;
    position: relative;
    padding-right: 16px;
}
#announcementLogPopupHolder .tabs-holder > .tab.active{
    background: white;
    color: black;
    border: 1px solid #4bada4;
}
#announcementLogPopupHolder .tabs-holder > .tab:hover{
    filter: brightness(130%);
}
#announcementLogPopupHolder .main-content-holder{
    /*background: #cfd6d7;*/
    background: #cfd6d7;
}
#announcementLogPopupHolder .main-content-holder .content-holder{
    height: 401px;
    display: none;
    overflow-y: scroll;
    padding: 10px 10px;
    padding-bottom: 27px;
    padding-top: 25px;

}
#announcementLogPopupHolder .main-content-holder .content-holder.active{
    display: block;
}
#announcementLogPopupHolder .main-content-holder .content-holder .item-holder{
    padding: 5px 12px;
    border: 1px solid white;
    /*border-radius: 4px;*/
    margin-bottom: 20px;
    padding-bottom: 22px;
}
#announcementLogPopupHolder .main-content-holder .content-holder .item-holder.unread{
    border: 2px solid yellow;
}
#announcementLogPopupHolder .main-content-holder .content-holder .item-holder .title{
    padding: 4px 0px;
    font: 15px/17px 'titilliumWebSemiBold';
    display: inline-block;
}
#announcementLogPopupHolder .main-content-holder .content-holder .item-holder .date{
    padding: 4px 0px;
    font: 12px/17px 'titilliumWebRegular';
    display: inline-block;
    float: right;
}
#announcementLogPopupHolder .main-content-holder .content-holder .item-holder .message{
    padding-top: 9px;
    font: 13px/17px 'titilliumWebRegular';
    border-top: 1px solid rgba(255,255,255,0.4);
}
#aboutUsPopupHolder{
    position: absolute;
    width: 740px;
    height: 542px;
    background: #ecf0f1;
    border: 1px solid white;
    top: 3px;
    left: 129px;
    z-index: 1501;
}
#aboutUsPopupHolder .head{
    width: 100%;
    height: 49px;
    background: white;
}
#aboutUsPopupHolder .head .announcement-icon{
    display: inline-block;
    width: 33px;
    height: 31px;
    background: green;
    background: url("../images/new/warClicks/wc_splosno/announcment.png");
    vertical-align: middle;
    margin-left: 13px;
    margin-top: -8px;
}
#aboutUsPopupHolder .head .name{
    font: 25px/38px 'titilliumWebRegular';
    color: #f7931e;
    display: inline-block;
    margin-left: 16px;
    margin-top: 6px;
}
#aboutUsPopupHolder .main-content-holder{
    padding: 33px;
    font: 14px/18px 'titilliumWebRegular';
}
#aboutUsPopupHolder .main-content-holder .highlighted{
    font: 15px/18px 'titilliumWebBold';
}
#aboutUsPopupHolder .main-content-holder .discord-icon{
    display: inline-block;
    width: 100px;
    height: 65px;
    background: url("../images/new/warClicks/wc_splosno/discord-logo.png");
    background-size: 100% auto;
    margin-left: 67px;
}
#aboutUsPopupHolder .main-content-holder .reddit-icon{
    display: inline-block;
    width: 200px;
    height: 71px;
    background: url("../images/new/warClicks/wc_splosno/reddit-icon.png");
    background-size: 100% auto;
    margin-left: 67px;
}
#aboutUsPopupHolder .main-content-holder .blog-icon{
    display: inline-block;
    background: url("../images/new/warClicks/wc_splosno/blog_icon.png");
    background-size: 100% auto;
    width: 107px;
    height: 76px;
    margin-left: 67px;
}






#otherGamePopupHolder{
    position: absolute;
    width: 740px;
    height: 542px;
    background: #ecf0f1;
    border: 1px solid white;
    top: 3px;
    left: 129px;
    z-index: 1501;
}
#otherGamePopupHolder .head{
    width: 100%;
    height: 49px;
    background: white;
}
#otherGamePopupHolder .head .announcement-icon{
    display: inline-block;
    width: 33px;
    height: 31px;
    background: green;
    background: url("../images/new/warClicks/wc_splosno/announcment.png");
    vertical-align: middle;
    margin-left: 13px;
    margin-top: -8px;
}
#otherGamePopupHolder .head .name{
    font: 25px/38px 'titilliumWebRegular';
    color: #f7931e;
    display: inline-block;
    margin-left: 16px;
    margin-top: 6px;
}
#otherGamePopupHolder .main-content-holder{
    padding: 33px;
    /*padding-top: 20px;*/
    font: 15px/18px 'titilliumWebRegular';
    padding-right: 2px;
}
#otherGamePopupHolder .main-content-holder .text-holder{
    height: 461px;
    overflow-y: scroll;
    /*padding-bottom: 30px;*/
    padding-right: 12px;
}
#otherGamePopupHolder .main-content-holder img{
    margin-top: 8px;
}
#otherGamePopupHolder .main-content-holder .fire-icon{
    display: inline-block;
    background: url("../images/fire-vector-icon-png-27-min.png");
    width: 18px;
    height: 20px;
    background-size: 100% 100%;
    position: relative;
    top: 5px;
    margin-left: 4px;
    margin-right: 5px;
}
#otherGamePopupHolder .main-content-holder .wishlist{
    font-size: 16px;
}
#otherGamePopupHolder .main-content-holder .centered{
    text-align: center;
}
#otherGamePopupHolder .main-content-holder .join-disc{
    /*margin-left: 38px;*/
}
#otherGamePopupHolder .main-content-holder .highlighted{
    font: 15px/18px 'titilliumWebBold';
}
#otherGamePopupHolder .main-content-holder .discord-icon{
    display: inline-block;
    width: 100px;
    height: 65px;
    background: url("../images/new/warClicks/wc_splosno/discord-logo.png");
    background-size: 100% auto;
    margin-left: 67px;
}
#otherGamePopupHolder .main-content-holder .reddit-icon{
    display: inline-block;
    width: 200px;
    height: 71px;
    background: url("../images/new/warClicks/wc_splosno/reddit-icon.png");
    background-size: 100% auto;
    margin-left: 67px;
}
#otherGamePopupHolder .main-content-holder .blog-icon{
    display: inline-block;
    background: url("../images/new/warClicks/wc_splosno/blog_icon.png");
    background-size: 100% auto;
    width: 107px;
    height: 76px;
    margin-left: 67px;
}





#firstSimpPopupHolder{
    position: absolute;
    width: 780px;
    height: 542px;
    background: #ecf0f1;
    border: 1px solid white;
    top: 3px;
    z-index: 1501;
    left: 0;
    right: 0;
    margin: 0 auto;

}
#firstSimpPopupHolder .head{
    width: 100%;
    height: 49px;
    background: white;
}
#firstSimpPopupHolder .head .announcement-icon{
    display: inline-block;
    width: 33px;
    height: 31px;
    background: green;
    background: url("../images/new/warClicks/wc_splosno/announcment.png");
    vertical-align: middle;
    margin-left: 13px;
    margin-top: -8px;
}
#firstSimpPopupHolder .head .name{
    font: 25px/38px 'titilliumWebRegular';
    color: #f7931e;
    display: inline-block;
    margin-left: 16px;
    margin-top: 6px;
}
#firstSimpPopupHolder .main-content-holder{
    padding: 0 33px;
    /*padding-top: 20px;*/
    font: 15px/18px 'titilliumWebRegular';
    padding-right: 2px;
    padding-top: 15px;
}
#firstSimpPopupHolder .main-content-holder .text-holder{
    /*padding-bottom: 30px;*/
    padding-right: 12px;
}
#firstSimpPopupHolder .main-content-holder img{
    margin-top: 8px;
}
#firstSimpPopupHolder .main-content-holder .fire-icon{
    display: inline-block;
    background: url("../images/fire-vector-icon-png-27-min.png");
    width: 18px;
    height: 20px;
    background-size: 100% 100%;
    position: relative;
    top: 5px;
    margin-left: 4px;
    margin-right: 5px;
}
#firstSimpPopupHolder .main-content-holder .magic-icon{
    display: inline-block;
    background: url("../images/new/warClicks/sprite_icons_within_sp_popup.png");
    width: 15px;
    height: 15px;
    background-size: auto 100%;
    position: relative;
    top: 1px;
    margin-right: 3px;
    margin-left: 76px;
}
#firstSimpPopupHolder .main-content-holder .custom-holder{
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 10px;
}
#firstSimpPopupHolder .main-content-holder .custom-holder.first{
    margin-top: 10px;
}
#firstSimpPopupHolder .main-content-holder .magic-icon.much-love{
    background-position-x: -15px;
}
#firstSimpPopupHolder .main-content-holder .already-whitelisted{
    text-align: center;
    margin-top: 6px;
    font: 13px/15px 'titilliumWebRegular';
    font-style: italic;
    text-decoration: underline;
}
#firstSimpPopupHolder .main-content-holder .scroll{
    position: relative;
    margin: 5px;
    padding: 22px;
    width: calc(100% - 56px);
    /*height: calc(472px - 42px - 2*5px - 5px - 72px);*/
    height: 418px;
    overflow-y: scroll;
}
#firstSimpPopupHolder .main-content-holder .wishlist{
    font-size: 16px;
}
#firstSimpPopupHolder .main-content-holder .centered{
    text-align: center;
}
#firstSimpPopupHolder .main-content-holder .centered iframe{
    z-index: 5;
}
#firstSimpPopupHolder .main-content-holder .join-disc{
    /*margin-left: 38px;*/
}
#firstSimpPopupHolder .main-content-holder .highlighted{
    font: 15px/18px 'titilliumWebBold';
}
#firstSimpPopupHolder .main-content-holder .discord-icon{
    display: inline-block;
    width: 100px;
    height: 65px;
    background: url("../images/new/warClicks/wc_splosno/discord-logo.png");
    background-size: 100% auto;
    margin-left: 67px;
}
#firstSimpPopupHolder .main-content-holder .reddit-icon{
    display: inline-block;
    width: 200px;
    height: 71px;
    background: url("../images/new/warClicks/wc_splosno/reddit-icon.png");
    background-size: 100% auto;
    margin-left: 67px;
}
#firstSimpPopupHolder .main-content-holder .blog-icon{
    display: inline-block;
    background: url("../images/new/warClicks/wc_splosno/blog_icon.png");
    background-size: 100% auto;
    width: 107px;
    height: 76px;
    margin-left: 67px;
}






.special-thanks {
    display: inline-block;
    padding: 5px 10px;
    background: #f7931e;
    color: #ffffff;
    font: 15px/18px 'titilliumWebBold';

    position: absolute;
    top: 6px;
    right: 100px;
}
.special-thanks:hover {
    filter: brightness(127%);
}
.special-thanks-holder {
    position: absolute;
    top: 50px;
    left: 0px;
    background: #ecf0f1;
    font: 14px/18px 'titilliumWebRegular';
    padding: 20px;
    height: 453px;
    overflow-y: auto;
}
#useStorePopupHolder{
    z-index: 2;
    color: white;
    position: absolute;
    width: 252px;
    /*height: 87px;*/
    padding: 15px;
    background: #3f4651;
    border: 1px solid white;
    top: 200px;
    left: 400px;
    font: 14px/18px 'titilliumWebRegular';
}
#useStorePopupHolder .tip{
    font: 12px/18px 'titilliumWebRegular';
    font-style: italic;
    opacity: 0.5;
}
#useStorePopupHolder .red{
    color: red;
    font: 14px/18px 'titilliumWebSemiBold';
}
#useStorePopupHolder .button{
    width: 99px;
    height: 26px;
    font: 13px/25px 'titilliumWebBold';
    background: #f7931e;
    border-radius: 7px;
    text-align: center;
    display: inline-block;
}
#useStorePopupHolder .button.use{
    /*float: right;*/
}
#useStorePopupHolder .button.use.disabled{
    opacity: 0.5;
}
#useStorePopupHolder .x{
    right: 6px;
}
#useStorePopupHolder .amount{
    color: #00ff00;
}
#useStorePopupHolder .info-button-special {
    margin-top: -1px;
    margin-left: 11px;
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url("../images/new/bootCamp/question_mark.png");
    vertical-align: middle;
}


#timeWarpsStoringPopupHolder{
    z-index: 2;
    color: white;
    position: absolute;
    width: 252px;
    height: 268px;
    padding: 15px;
    background: #3f4651;
    border: 1px solid white;
    top: 200px;
    left: 400px;
    font: 14px/18px 'titilliumWebRegular';
}
#timeWarpsStoringPopupHolder .x{
    right: 6px;
}
#timeWarpsStoringPopupHolder .title{
    font: 13px/18px 'titilliumWebSemiBold';
    color: #f7931e;
    padding-bottom: 11px;
}
#timeWarpsStoringPopupHolder .icon{
    float: left;
    padding-right: 9px;
    /*display: inline-block;*/
    /*vertical-align: top;*/
    font: 13px/18px 'titilliumWebSemiBold';
    width: 52px;
    height: 51px;
    background: url("../../assets/images/new/warZone/wz_splosno/popup_3_icon.png") no-repeat;
    /*margin-top: 11px;*/
}
#timeWarpsStoringPopupHolder .text{
    /*vertical-align: top;*/
    font: 13px/20px 'titilliumWebSemiBold';
    color: white;
    /*display: inline;*/
    margin-top: 11px;
}
#timeWarpsStoringPopupHolder .post-text{
    font: 13px/19px 'titilliumWebRegular';
    font-style: italic;
    color: #cccccc;
    display: inline-block;
    margin-top: 14px;
}
#timeWarpsStoringPopupCurtain {
    width: 1000px;
    height: 551px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    z-index: 2;

}

/* EVENTS animations */

#ghosts {
    position: absolute;
    top: 0;
    left: -766px;
    width: 766px;
    height: 544px;
    /*background: url('../images/new/warClicks/events/halloween/clouds_ghosts.png');*/
    background: url('../images/new/warClicks/events/halloween/clouds.png');
    pointer-events: none;
}
#ghosts.animated {
    will-change: transform;
    animation: animateCloud 300s linear;
}
@keyframes animateCloud {
    0%       { transform: translate(0px, 0px)    translateZ(0); }
    10%      { transform: translate(177px, 15px)  translateZ(0); }
    20%      { transform: translate(353px, 0px)  translateZ(0); }
    30%      { transform: translate(530px, 15px)  translateZ(0); }
    40%      { transform: translate(706px, 0px)  translateZ(0); }
    50%      { transform: translate(883px, 15px)  translateZ(0); }
    60%      { transform: translate(1060px, 0px) translateZ(0); }
    70%      { transform: translate(1236px, 15px) translateZ(0); }
    80%      { transform: translate(1413, 0px)   translateZ(0); }
    90%      { transform: translate(1589px, 15px) translateZ(0); }
    100%     { transform: translate(1766px, 0px) translateZ(0); }
    /*0%       { transform: translateX(0px)}
    100%      { transform: translateX(1766px)}*/
}
#ghosts .ghost {
    position: absolute;
    width: 78px;
    height: 61px;
    background: url('../images/new/warClicks/events/halloween/ghost.png');
    will-change: transform, opacity;
    animation: animateGhosts 7s ease-in-out infinite;
}
#ghosts .ghost1 {
    top: 211px;
    left: 177px;
}
#ghosts .ghost2 {
    top: 122px;
    left: 325px;
    animation-delay: 3s;
}
#ghosts .ghost3 {
    top: 180px;
    left: 690px;
    animation-delay: 6s;
}
@keyframes animateGhosts {
    0%       {   transform: translate(0,0) scale(1) translateZ(0);       opacity: 1;}
    17%     {   transform: translate(20px,10px) scale(0.95) translateZ(0);     opacity: 0.2;}
    34%     {   transform: translate(20px,-10px) scale(1) translateZ(0);     opacity: 1;}
    51%     {   transform: translate(10px,0) scale(0.95) translateZ(0);     opacity: 0.2;}
    68%     {   transform: translate(-5px,10px) scale(1) translateZ(0);     opacity: 1;}
    84%     {   transform: translate(5px,5px) scale(0.95) translateZ(0);     opacity: 0.2;}
    100%     {   transform: translate(0,0) scale(1) translateZ(0);     opacity: 1;}
}


/* SPIDER */

#spider_net {
    position           : absolute;
    top                : 0px;
    left               : 117px;

    background            : url("../images/new/warClicks/events/halloween/spider/net.png") bottom;
    width              : 402px;
    height             : 97px;
    pointer-events: none;
}
.spider-overflow {
    position           : relative;
    top                : 62px;
    left               : 61px;
    height             : 290px;
    width              : 85px;
    overflow: hidden;
}

#spider {
    position: absolute;
    top: -200px;
    left: 0;
    pointer-events:     none;

    transition         : transform 5.0s linear/*, transform 0.5s linear*/;
    z-index: 1;
}
.spider-rotate {
    transform          : rotateY(180deg);
}
#spider.down {
    /*top                : 0px;*/
    transform: translateY(200px);
}
#spider.up {
    /*top                : -200px !important;*/
    transform: translateY(0px);
}
#spider .rope {
    position           : relative;
    left               : 38px;

    background            : url("../images/new/warClicks/events/halloween/spider/nitka.png") bottom;
    width              : 1px;
    height             : 205px;
}
#spider .body {
    position           : relative;
    top                : -18px;

    background            : url("../images/new/warClicks/events/halloween/spider/spider.png");
    width              : 76px;
    height             : 85px;

    pointer-events: auto;
}
#spider .body .modal-explosion {
}
#spider:not(.down) .body {
    will-change: transform, opacity;
    animation: shakeSpider 10s infinite;
}
#spider .body.shake {
    will-change: transform, opacity;
    animation: shakeSpider2 0.5s;
}
#spider .eyes {
    position           : absolute;
    top                : 38px;
    left               : 31px;

    width              : 12px;
    height             : 10px;
    background         : url('../images/new/warClicks/events/halloween/spider/eyes.png');

    animation: animateEyes 4s infinite;
    will-change: transform, opacity;
}
@keyframes shakeSpider {
    0%       {  transform: translate(0,0) translateZ(0); }
    1%      {  transform: translate(2px,0) translateZ(0); }
    2%      {  transform: translate(-3px,2px) translateZ(0); }
    3%      {  transform: translate(1px,-1px) translateZ(0); }
    4%      {  transform: translate(3px,1px) translateZ(0); }
    5%      {  transform: translate(0px,0) translateZ(0); }
    100%     {  transform: translate(0,0) translateZ(0);}
}
@keyframes shakeSpider2 {
    0%       {  transform: translate(0,0) translateZ(0); }
    20%      {  transform: translate(3px,0) translateZ(0); }
    40%      {  transform: translate(-3px,3px) translateZ(0); }
    60%      {  transform: translate(1px,-2px) translateZ(0); }
    80%      {  transform: translate(3px,1px) translateZ(0); }
    100%     {  transform: translate(0,0) translateZ(0);}
}
@keyframes animateEyes {
    0%       { transform: translateX(0) translateZ(0); }
    20%      {  transform: translateX(3px) translateZ(0); }
    40%      {  transform: translateX(-3px) translateZ(0); }
    60%      {  transform: translateX(0px) translateZ(0); }
    100%     {  transform: translateX(0) translateZ(0);}
}
/* END EVENTS ANIMATIONS */

.help-info .ghost {
    display: inline-block;
    vertical-align: middle;
    width: 78px;
    height: 61px;
    background: url('../images/new/warClicks/events/halloween/ghost.png');
    will-change: transform, opacity;
    animation: animateGhosts 7s ease-in-out infinite;
}

#game_holder .event-popup {
    position: relative;
    top: 120px;

    width: 390px;
    height: 255px;

    margin: 0 auto;

    background: #596475;

    border: 1px solid #ffffff;
}
#game_holder .event-popup.unlock {
    height: 304px;
}
#game_holder .event-popup .close {
    display: inline-block;
    position: absolute;

    top: 10px;
    right: 20px;

    width: 25px;
    height: 25px;
    background: url("../images/new/warClicks/wc_splosno/sp_2_close_min.png") 0 0;
    background-position-x: 30px;
    background-position-y: -6px;
}
#game_holder .event-popup .close:hover {
    background-position-y: -42px;
}
#game_holder .event-popup .head {
    height: 40px;
    padding: 25px 30px 10px 30px;

    background: #596475;
}
#game_holder .event-popup .title {
    margin-bottom: 8px;
    font: 14px/16px 'titilliumWebBold';
    color: #f7931e;
}
#game_holder .event-popup .grabber {
    padding-left: 4px;
    font: 12px/13px 'titilliumWebSemiBold';
    color: #ffffff;
    border-left: 2px solid #f7931e;
}
#game_holder .event-popup .description {
    position: relative;
    height: 165px;
    padding: 15px 30px 0 30px;
    background: url('../images/new/eventGame/event_popup/horizontal_line.png') top no-repeat,
    url('../images/new/eventGame/event_popup/event_image.png') bottom no-repeat;

    font: 12px/13px 'titilliumWebSemiBold';
    color: #ffffff;
}
#game_holder .event-popup .description > div {
    font: 12px/20px 'titilliumWebSemiBold';
    color: #00a99d;
}
#game_holder .event-popup .event-rankings {
    position: absolute;
    bottom: 10px;
    left: 113px;

    padding: 4px 9px;
    display: inline-block;

    font: 12px/16px 'titilliumWebSemiBold';
    color: white;
    border-radius: 4px;
    background: #f7931e;

    box-shadow: 2px 3px 2px rgba(0,0,0, 0.2), 0 3px 4px rgba(0,0,0, 0.2);

    display: none;
}
#game_holder .event-popup .event-rankings:hover {
    filter: brightness(127%);
}
#game_holder .event-popup .popup-footer {
    width: 250px;
    height: 25px;
    padding: 10px 10px 15px 130px;

    background: url('../images/new/eventGame/event_popup/add.png') top no-repeat;

    font: 12px/20px 'titilliumWebSemiBold';
    color: #39b54a;
}
#game_holder .event-popup .popup-footer > div {
    display: inline-block;
    vertical-align: middle;
}
#game_holder .event-popup .popup-footer > div:not(.buy) {
    margin-right: 26px;
}
#game_holder .event-popup .popup-footer .reward2 {
    margin-right: 10px !important;
}
#game_holder .event-popup .popup-footer .icon {
    margin-top: -2px;
    margin-left: 5px;
}
#game_holder .event-popup .popup-footer .icon.time-warp {
    width: 20px;
    height: 20px;
    background: url("../images/new/eventGame/organization/tw_icon.png");
    background-size: 100% 100%;
}
#game_holder .event-popup .popup-footer .buy {
    width: 86px;
    height: 29px;

    background: url('../images/new/eventGame/event_popup/button.png');

    text-align: centeR;
    font: 15px/27px 'titilliumWebSemiBold';
    color: #6b5324;
}
.z-index2 {
    z-index: 2 !important;
}
.z-index3 {
    z-index: 3 !important;
}
.z-index4 {
    z-index: 4 !important;
}
#game_holder .icon.cash {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 19px;
    background: url("../images/new/eventGame/organization/cash_icon.png");
}

.help-h1{

}
.help-h2{

}
.help-h3{
    display: block;
    color: #f7931e;
    font: 15px/22px 'titilliumWebSemiBold';
}

/* research system */
.notification-icon {
    position: absolute;
    width: 22px;
    height: 22px;

    background: url("../chat/chat_notification_icon.png");
}

#researchSystem{
    position: absolute;
    /*width: 700px;*/
    width: 900px;
    height: 542px;
    background: #ecf0f1;
    border: 1px solid white;
    top: 3px;
    left: 50px;
}
#researchSystem .header{
    padding: /*1*/5px 10px;
    height: 42px;
}
#researchSystem .header .title-icon {
    background-position-x: -160px;
}
#researchSystem .header .title {
    display: inline-block;
    font: 21px/30px 'titilliumWebSemiBold';
    color: #f7931e;
    margin-top: 8px;
    margin-left: 12px;
}
#researchSystem .tabs {
    background: #3f4651;
    height: 38px;
}
#researchSystem .research-points {
    color: #ffffff;
    font: 12px/16px 'titilliumWebRegular';
}
#researchSystem .research-points span {
    font: 12px/16px 'titilliumWebBold';
}
#researchSystem .button.tab {
    position: relative;
    width: auto;
    min-width: 133px;
    height: 35px;
    display: inline-block;
    padding: 0 10px;
    margin: 0 9px;
    color: #ffffff;
    font: 16px/35px 'titilliumWebSemiBold';
}
#researchSystem .button.tab .notification-icon {
    transform: scale(0.8);
    top: calc(50% - 12px);
    left: -12px;
}
#researchSystem .button.tab:hover {
    background: #4bada4;
    top: -5px;
    /*top: -2px;*/
    height: 45px;
    line-height: 45px;
    vertical-align: top;
    /*cursor: url("../images/cursorPointer.ico") 11 1, pointer;*/
}
#researchSystem .button.tab.active {
    background: #4bada4;
    top: -5px;
    height: 45px;
    line-height: 45px;
    vertical-align: top;
    pointer-events: none;
}
#researchSystem .button.tab.disabled {
    height: 34px;
    font: 16px/12px 'titilliumWebSemiBold';
    padding-top: 8px;
    border: 2px solid #cccccc;
    margin-top: -5px;
    background: #3f4651;
    opacity: 1;
}
#researchSystem .button.tab:not(.active):not(.disabled) {
    vertical-align: top;
    /* margin-top: -12px;*/
}
#researchSystem .button.tab > .lock{
    display: inline-block;
    width: 13px;
    height: 15px;
    background: url("../images/new/warZone/upgrades/lock.png");
    margin-right: 7px;
}
#researchSystem .button.tab > .lock.disabled{
    display: none;
}
#researchSystem .button.tab > span {
    font: 11px/12px 'titilliumWebSemiBold';
    color: #cccccc;
}

#researchSystem .content-holder {
    position: relative;
    height: 436px;
    padding: 8px;
}
#researchSystem .content {
    position: absolute;
    display: none;
    width: 314px;
    height: calc(100% - 16px);

    font: 12px/14px 'titilliumWebRegular';
}
#researchSystem .content.active {
    display: block;
}
#researchSystem .inventory {
    position: absolute;
    right: 7px;
    top: 8px;
    width: 560px;
    height: calc(100% - 16px);

    background: #dbdbdb;
    color: #000000;
    font: 12px/14px 'titilliumWebSemiBold';
}
#researchSystem .content-holder > div .title {
    background: #3f4651;
    padding: 3px 10px;
    color: #ffffff;
    font: 14px/20px 'titilliumWebRegular';
}

#researchSystem .content.loadout .title {
    margin-bottom: 16px;
    font-style: italic;
}
#researchSystem .content.loadout .slot-type {
    margin-top: 5px;
    margin-bottom: 5px;
}
#researchSystem .content.loadout .slot-type[data-item-filter-whitelist=bc] .inv-row {
    background: #08b000;
    padding: 2px 0;
}
#researchSystem .content.loadout .slot-type[data-item-filter-whitelist=wz] .inv-row {
    background: #ad0a3c;
    padding: 2px 2px;
}
#researchSystem .content.loadout .slot-type[data-item-filter-whitelist=chq] .inv-row {
    background: #009ce3;
    padding: 2px 0;
}
#researchSystem .content.loadout .slot-title {
    font: 12px/16px 'titilliumWebSemiBold';
    text-align: left;
    /*margin: 0 0px 5px 0px;*/
    color: #3f4651;
    margin: 0;
    /*border-bottom: 1px solid #3f4651;*/
}
#researchSystem .content.loadout .slot {
    position: relative;
    /*display: inline-block;*/
    width: 98px;
    height: 98px;
    margin: 2px 2px 2px 3px;
    /*width: 80px;*/

    background: #ffffff;


    border-radius: 5px;

    flex-shrink: 0;

    display: flex;
    flex-direction: row;
    justify-content: center; /* align items in Main Axis */
    align-items: center; /* align items in Cross Axis */
    align-content: center; /* Extra space in Cross Axis */
}
#researchSystem .content.loadout .slot.locked {
    background: url("../images/new/warZone/upgrades/lock.png") no-repeat center center, #ffffff;
    pointer-events: none;
}
#researchSystem .content.loadout .unlock-note {
    position: absolute;
    bottom: 6px;
    left: 0px;
    margin: 0 10px;
    width: 80px;
    font: 12px/14px 'titilliumWebSemiBold';
    color: #7f7f7f;
    text-align: center;
}
#researchSystem .content.research .title {
    font: 14px/16px 'titilliumWebRegular';
}
#researchSystem .content.research .research-level {
    float: right;
    font: 14px/16px 'titilliumWebSemiBold';
    color: #ffffff;
}
#researchSystem .content.research .research-level > span {
    font: 14px/16px 'titilliumWebBold';
}
#researchSystem .content.research .research-level-progress {
    width: 100%;
    height: 5px;
    background: #ffffff;
    /*border-radius: 8px;*/
    overflow: hidden;
    display: inline-block;
}
#researchSystem .content.research .research-level-progress:after {
    background: orange;
}
#researchSystem .content.research .research-team {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #3f4651;
    padding: 4px;
}
#researchSystem .force-disabled {
    pointer-events: none !important;
    filter: brightness(70%) !important;
}
#researchSystem .content.research .research-team.locked {
    pointer-events: none;
    background: url("../images/new/warZone/upgrades/lock.png") no-repeat 25px center;
}
#researchSystem .content.research .research-team .unlock-note {
    margin-top: 1px;
    margin-left: 50px;
    font: 12px/41px 'titilliumWebSemiBold';
    color: #7f7f7f;
    text-align: left;
}
#researchSystem .content.research .team-title {
    font: 12px/14px 'titilliumWebSemiBold';
    color: #000000;
}
#researchSystem .content.research .conduct-research {
    display: inline-block;

    /*padding: 4px 7px;*/
    /*border: 2px #ffffff solid;*/
    background: #f7931e;
    margin-top: 3px;

    font: 12px/25px 'titilliumWebSemiBold';
    color: #ffffff;

    width: 180px;
    border-radius: 5px;
    background: #ffffff;
    color: #000000;
}
#researchSystem .content.research .conduct-research:hover {
    /*border: 2px #ffffff dashed;*/
}
#researchSystem .content.research .conduct-research.disabled {
    filter: brightness(70%);
}
#researchSystem .content.research .conduct-research:hover span:not(.cost){
    border: 1px #ffffff dashed;
    filter: brightness(127%);
}
#researchSystem .content.research .conduct-research span.cost {
    display: none;
}
#researchSystem .content.research .conduct-research span:not(.cost) {
    width: calc(100% - 2px);

    text-align: center;
    display: inline-block;
    float: right;

    border: 1px #ffffff solid;
    background: #f7931e;
    color: #ffffff;
    font: 13px/24px 'titilliumWebBold';
    border-radius: 5px;
}
#researchSystem .content.research .conduct-research.buying span.cost {
    display: inline-block;
    padding-left: 5px;
}
#researchSystem .content.research .conduct-research.buying span:not(.cost) {
    width: 130px;
}
#researchSystem .content.research .research-time {
    float: right;
    width: 110px;
    padding-right: 5px;
    margin-top: 3px;

    font: 12px/12px 'titilliumWebRegular';
    color: #000000;

    text-align: center;
}
#researchSystem .content.research .tech-management {
    margin-top: 90px;
}
#researchSystem .content.research .tech-management .dump-desc {
    display: inline-block;
    width: 33%;
    font: 12px/14px 'titilliumWebSemiBold';
    color: #000000;
}
#researchSystem .content.research .tech-management .combine-desc {
    display: inline-block;
    width: 66%;
    font: 12px/14px 'titilliumWebSemiBold';
    color: #000000;
    margin-left: 1%;
    text-align: center;
}
#researchSystem .content.research .tech-management .combine-desc .info-button {

    margin-bottom: -6px;
    margin-left: 4px;
}
#researchSystem .content.research .dump-tech {
    display: inline-block;
    vertical-align: middle;
}
#researchSystem .content.research .dump-tech .slot {
    background: url("../images/new/warClicks/wc_splosno/research_system/dump_tech.png");
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/recycle_2.png");
    background-size: 100% 100%;
}

#researchSystem .content.research .combine-tech {
    display: inline-block;
    margin-left: 6%;
    font: 12px/16px 'titilliumWebRegular';
    text-align: center;
    color: #000000;
    width: 50%;
    vertical-align: middle;
}
#researchSystem .content.research .combine-tech .slot {
    background: green;
    background-size: 100% 100%;
}
#researchSystem .content.research .tech-management .inv-row {
    /*padding: 2px;
    border: 1px solid grey;*/
    line-height: 90px;
}
#researchSystem .content.research .tech-management .slot {
    position: relative;
    /*display: inline-block;*/
    /*width: 96px;
    height: 90px;*/
    width: 100px;
    height: 100px;
    margin-left: 2px;
    margin-right: 1px;
    /*width: 80px;*/

    flex-shrink: 0;

    display: flex;
    flex-direction: row;
    justify-content: center; /* align items in Main Axis */
    align-items: center; /* align items in Cross Axis */
    align-content: center; /* Extra space in Cross Axis */
}
/*
#researchSystem .content.research .tech-management .inventory-item[data-item-type*=bribery] {
    background-position: -160px -76px;
}
#researchSystem .content.research .tech-management .inventory-item[data-item-type*=inflation] {
    background-position: 0px 0px;
}
#researchSystem .content.research .tech-management .inventory-item[data-item-type*=advanced_warfare] {
    background-position: -80px 0px;
}
#researchSystem .content.research .tech-management .inventory-item[data-item-type*=ammunition_upgrades] {
    background-position: 0px -76px;
}
#researchSystem .content.research .tech-management .inventory-item[data-item-type*=spionage] {
    background-position: 0px -152px;
}
#researchSystem .content.research .tech-management .inventory-item[data-item-type*=propaganda] {
    background-position: -80px -76px;
}*/
#researchSystem .content.upgrades {
    width: calc(100% - 15px);
}
#researchSystem .content.upgrades .section {
    display: inline-block;
    height: 100%;
    width: 33%;
    overflow-y: auto;

    background: white;
}
#researchSystem .content.upgrades .section:nth-of-type(2) {
    margin: 0 0.5%;
}
#researchSystem .content.upgrades .section .upgrade-list {
}
#researchSystem .content.upgrades .section .upgrade-list .group-title{
    padding: 5px 10px 2px 5px;
    margin: 10px 5px 0 0px;
    /*background: white;*/
    font: 12px/14px 'titilliumWebSemiBold';
    color: red;
}
#researchSystem .content.upgrades .section .upgrade-list .item {
    position: relative;
    padding: 5px 10px;
    margin: 3px 3px 0 3px;
    background: lightgrey;
    font: 12px/14px 'titilliumWebSemiBold';
    color: #000000;
}

#researchSystem .content.upgrades .section .upgrade-list .item[data-item-sub-sub-type=settings] {
    background: #ffdfac;
}
#researchSystem .content.upgrades .section .upgrade-list .item > div {
    display: inline-block;
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-name {

}
#researchSystem .content.upgrades .section .upgrade-list .item .item-name span {
    font: 11px/13px 'titilliumWebRegular';
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-name span span {
    font: 11px/13px 'titilliumWebBold';
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-desc {
    font: 12px/14px 'titilliumWebRegular';
    width: 250px;
    margin: 5px 0px;
}
#researchSystem .content.upgrades .section .upgrade-list .item .sale-plaquette{
    position: absolute;
    font: 13px/38px 'titilliumWebSemiBold';
    background: url("../images/new/warZone/upgrades/price.png");
    width: 41px;
    height: 40px;
    top: 24px;
    right: 36px;
    padding: 0;
    border: none;
    color: white;
    text-align: center;
}
#researchSystem .content.upgrades .section .upgrade-list .item .old-price{
    font: 12px/13px 'titilliumWebSemiBold';
    width: 60px;
    height: 9px;
    position: relative;
    left: 76px;
    top: -16px;
    padding: 0;
    border: none;
    text-align: center;
}
#researchSystem .content.upgrades .section .upgrade-list .item .old-price > .line{
    position: absolute;
    background: url("../images/new/warZone/upgrades/line.png");
    width: 51px;
    height: 9px;
    top: 3px;
    left: 16px;
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-cap {
    float: right;
    margin-left: 10px;
    font: 12px/14px 'titilliumWebRegular';
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-cap > span {
    font: 12px/14px 'titilliumWebSemiBold';
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy {
    /*padding: 4px 7px;/*
    /*border: 2px #ffffff solid;*/
    background: #f7931e;
    font: 12px/16px 'titilliumWebSemiBold';
    color: #ffffff;

    font: 12px/25px 'titilliumWebSemiBold';
    color: #ffffff;

    width: 155px;
    border-radius: 5px;
    background: #ffffff;
    color: #000000;
    display: inline-block;
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy:hover {
    /*filter: brightness(127%);*/
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy.disabled {
     filter: brightness(70%);
}
#researchSystem .content.upgrades .section .upgrade-list .item[data-item-type=unlocks] .item-buy {
    width: 210px;
}
#researchSystem .content.upgrades .section .upgrade-list .item[data-item-type=unlocks] .item-buy span.cost {
    width: 135px;
    padding: 0 5px;
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy:hover span:not(.cost){
    border: 1px #ffffff dashed;
    filter: brightness(127%);
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy span.cost {
    display: none;
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy span:not(.cost) {
    text-align: center;
    display: inline-block;
    float: right;

    border: 1px #ffffff solid;
    background: #f7931e;
    color: #ffffff;
    font: 13px/24px 'titilliumWebBold';
    border-radius: 5px;
    width: 60px;
}
#researchSystem .content.upgrades .section .upgrade-list .item .item-buy span.cost {
    display: inline-block;
    width: 85px;
    text-align: center;
}
#researchSystem .content.upgrades .section .upgrade-list .coming-soon {
    text-align: center;
    font: 14px/30px 'titilliumWebRegular';
    color: #000000;

}
#researchSystem .inventory-slots {
    padding: 5px 0 5px 0;
    text-align: left;
    height: calc(100% - 33px);
    overflow-y: scroll;
}
.inv-row
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: flex-start; /* align items in Cross Axis */
    align-content: flex-start; /* Extra space in Cross Axis */
}
#researchSystem .inventory .inv-slot {
    /*display: inline-block;*/
    vertical-align: top;
    background: #ffffff;

    font: 11px/13px 'titilliumWebSemiBold';
    color: #000000;
    padding: 3px;



    flex-shrink: 0;

    display: flex;
    flex-direction: row;
    justify-content: center; /* align items in Main Axis */
    align-items: center; /* align items in Cross Axis */
    align-content: center; /* Extra space in Cross Axis */
}

#researchSystem .inventory .inv-slot.locked {
    background: url("../images/new/warZone/upgrades/lock.png") no-repeat center center, #ffffff;
    pointer-events: none;
}
#researchSystem .inventory .inv-slot .unlock-note {
    position: relative;
    top: 31px;
    left: 0px;
    margin: 0 10px;
    width: 80px;
    font: 12px/14px 'titilliumWebSemiBold';
    color: #7f7f7f;
    text-align: center;
}
#researchSystem .inventory .inv-slot.not-unlockable {
    display: none;
}
#researchSystem .inventory .inv-slot.c5 {
    width: 98px;
    height: 98px;
    margin-left: 2px;
    margin-bottom: 2px;
}
#researchSystem .inventory .inv-slot.c6 {
    width: 85px;
    height: 85px;
    margin-left: 7px;
    margin-bottom: 3px;
}
#researchSystem .inventory .inv-slot.c8 {
    width: 60px;
    height: 60px;
    margin-left: 5px;
    margin-bottom: 1px;
}

.inventory-item {
    position: relative;
    /*width: 86px;
    height: 86px;*/
    width: 100px;
    height: 100px;

    /*background: url("../images/new/warClicks/wc_splosno/research_system/strategy_icons.png");*/
    /*background-size: 300%;*/
    background-size: 100% 100% !important;

    /*background-position: -98px 92px;*/

    font: 11px/13px 'titilliumWebSemiBold';
    color: #000000;
    text-align: center;

    /*border: 6px solid transparent;*/

    cursor: pointer;

    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;

    border-radius: 5px;
    border: 1px solid #ffffff;
}

/* basically rarity icons of the item; */
.inventory-item:before {
    content: "";
    display: inline-block;

    height: 14px;
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/1_star.png") left bottom;
    background-repeat: repeat-x;
}
/* basically icon of the item; */
.inventory-item:after {
    content: "";
    position: absolute;
    /*top: 0px;*/
    top: 4px;
    left: 0px;
    /*width: 100%;
    height: 100%;*/
    width: 97%;
    height: 97%;

    background-size: 100% 100% !important;
}
.inventory-item > span {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
    width: 100%;
    text-align: center;
    font: 11px/14px 'titilliumWebSemiBold';
    color: #ffffff;
    background: #636363;

    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
.inventory-item[data-slot-type=bc] {
    /*background-color: #78c500;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/bc.png");
}
.inventory-item[data-slot-type=wz] {
    /*background-color: orangered;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/wz.png");
}
.inventory-item[data-slot-type=chq] {
    /*background-color: #74b9b9;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/chq.png");
}
.inventory-item[data-rarity=common]:before {
    /*background-color: greenyellow;*/
    /*border: 6px solid darkgrey;*/
    width: 12px;
}
.inventory-item[data-rarity=uncommon]:before {
    /*background-color: yellow;*/
    /*border: 6px solid green;*/
    width: 24px;
}
.inventory-item[data-rarity=rare]:before {
    /*background-color: orange;*/
    /*border: 6px solid darkblue;*/
    width: 36px;
}
.inventory-item[data-rarity=very_rare]:before {
    /*background-color: red;*/
    /*border: 6px solid purple;*/
    width: 48px;
}
.inventory-item[data-rarity=epic]:before {
    /*background-color: rebeccapurple;*/
    /*border: 6px solid gold;*/
    width: 60px;
}


.inventory-item[data-item-type*=bribery]:after {
    /*background-position: -168px -80px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/bribery.png");
}
.inventory-item[data-item-type*=inflation]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/inflation.png");
}
.inventory-item[data-item-type*=higher_education]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/higher_education.png");
}
.inventory-item[data-item-type*=factory_upgrades]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/factory_upgrades.png");
}
.inventory-item[data-item-type*=economic_growth]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/economic_growth.png");
}
.inventory-item[data-item-type*=advanced_warfare]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/advanced_warfare.png");
}
.inventory-item[data-item-type*=ai_targeting]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/ai_targeting.png");
}
.inventory-item[data-item-type*=headquarters]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/headquarters.png");
}
.inventory-item[data-item-type*=morale_booster]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/morale_booster.png");
}
.inventory-item[data-item-type*=ammunition_upgrades]:after {
    /*background-position: 0px -80px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/ammunition_upgrades.png");
}
.inventory-item[data-item-type*=spionage]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/spionage.png");
}
.inventory-item[data-item-type*=diplomacy]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/diplomacy.png");
}
.inventory-item[data-item-type*=mercenaries]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/mercenaries.png");
}
.inventory-item[data-item-type*=politican]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/politician.png");
}
.inventory-item[data-item-type*=sabotage]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/sabotage.png");
}
.inventory-item[data-item-type*=propaganda]:after {
    /*background-position: -86px -80px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/propaganda.png");
}

.inventory-item.ui-sortable-helper, .inventory-item.ui-draggable-dragging
{
    opacity: .6;
}


.inventory-item-sortable-placeholder
{
    display: none;
}

.highlight-droppoint:not(.inventory-item) {
    background: #9eff9c !important;
}
.inventory-item.highlight-droppoint {
    opacity: 0.7;
}
.inventory-item.locked-droppoint {
    filter: brightness(60%);
}
#popupHelper {
    position: absolute;
    display: none;

    background: white;
    width: 200px;
    /*padding: 10px;*/

    padding-bottom: 10px;

    font: 12px/16px 'titilliumWebSemiBold';
    color: #000000;
    box-shadow: 0 -1px 2px rgba(0,0,0, 0.5), 0 1px 2px rgba(0,0,0, 0.5);
    z-index: 1;
}
#popupHelper.shown {
    display: block;
}
#popupHelper.res-item,
#popupHelper.combine-item {
    top: -90px !important;
    left: 0 !important;
    right: 0;
    margin: 0 auto;

    width: 400px;
    height: auto;
    z-index: 2;

    text-align: center;
    padding-bottom: 20px;
}
#popupHelper.combine-item {
    width: 600px;
}
#popupHelper .name {
    padding: 2px 10px 0px 10px;
    background: #3f4651;
    color: #ffffff;
    font: 13px/15px 'titilliumWebSemiBold';
}
#popupHelper .name .level {
    display: inline-block;
    width: 70px;
    text-align: left;
    margin-left: 10px;
    color: #ffffff;
    font: 13px/15px 'titilliumWebSemiBold';
}
#popupHelper .rarity {
    color: yellow;
    background: #3f4651;
    margin-bottom: 10px;
    padding: 2px 10px;
    font: 12px/14px 'titilliumWebSemiBold';
    text-transform: capitalize;
}
#popupHelper .rarity .level {
    display: inline-block;
    width: 50px;
    float: right;
    margin-left: 10px;
    color: #ffffff;
    font: 12px/14px 'titilliumWebSemiBold';
    vertical-align: middle;
}
#popupHelper .rarity .rarity-stars {
    display: inline-block;
    float: right;
    height: 12px;
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/1_star.png") left bottom;
    background-repeat: repeat-x;
    vertical-align: middle;
}
#popupHelper.res-item .rarity .rarity-stars,
#popupHelper.combine-item .rarity .rarity-stars {
    float: none;
    margin-left: 10px;
    vertical-align: top;
}
#popupHelper.res-item .rarity .level,
#popupHelper.combine-item .rarity .level {
    float: none;

}
#popupHelper .rarity[data-rarity=common] .rarity-stars {
    width: 12px;
}
#popupHelper .rarity[data-rarity=uncommon] .rarity-stars {
    width: 24px;
}
#popupHelper .rarity[data-rarity=rare] .rarity-stars {
    width: 36px;
}
#popupHelper .rarity[data-rarity=very_rare] .rarity-stars {
    width: 48px;
}
#popupHelper .rarity[data-rarity=epic] .rarity-stars {
    width: 60px;
}
#popupHelper .desc {
    margin: 2px 10px;
}
#popupHelper .rarity-boost {
    margin: 5px 10px 0px 10px;
    color: #000000;
    font: 12px/16px 'titilliumWebSemiBold';
}
#popupHelper .rarity-boost > span {
    color: green;
    font: 12px/15px 'titilliumWebSemiBold';
}
#popupHelper .boosts {
    margin: 0px 10px;
    color: #000000;
    font: 12px/16px 'titilliumWebSemiBold';
}
#popupHelper .boost {
    color: green;
    font: 12px/15px 'titilliumWebSemiBold';
}
#popupHelper .boost.merged {
    color: green;
}
#popupHelper .boost.kept {
    color: green;
}
#popupHelper .boost.removed {
    color: red;
}
#popupHelper .boost.highest {
    color: blue;
}
#popupHelper .combined {
    font-style: italic;
    margin: 5px 10px;
    font: 11px/14px 'titilliumWebRegular';
}
#popupHelper .type {
    margin: 0px 10px;
    font-style: italic;
    font: 11px/14px 'titilliumWebRegular';
}
/* below are for various popups of items - combine, send to inv */
#popupHelper.res-item .desc,
#popupHelper.combine-item .desc {
    margin: 15px 50px 10px 0;
}
#popupHelper .item-details  {
    text-align: center;
    margin-bottom: 20px;

    vertical-align: top;
}

#popupHelper.combine-item .item-details  {
    display: inline-block;
    width: calc(48% - 2px);
    text-align: center;
    margin-bottom: 5px;
    border: 1px solid #3f4651;
}
#popupHelper.combine-item .item-details.item1 {
    margin-right: 2%;
}

#popupHelper.combine-item .item-details.item3 {
    width: auto;
    display: block;
    margin: auto;
    border: none;
}
#popupHelper .warning {
    color: #ff0000;
    font: 12px/16px 'titilliumWebRegular';
    margin-bottom: 5px;
}
#popupHelper .button {
    display: inline-block;
    padding: 4px 7px;
    border: 2px #ffffff solid;
    background: #f7931e;
    font: 14px/16px 'titilliumWebSemiBold';
    color: #ffffff;
}
#popupHelper .button:hover {
    filter: brightness(127%);
    border: 2px #ffffff dashed;
}
#popupHelper .button.cancel {
    margin-right: 50px;
    background: grey;
}
#popupHelper .img {
    position: relative;
    display: inline-block;
    /*width: 86px;
    height: 86px;*/
    width: 100px;
    height: 100px;
    margin-bottom: 5px;


    /*border: 6px solid transparent;

    background: url("../images/new/warClicks/wc_splosno/research_system/strategy_icons.png");
    background-size: 300%;*/
    background-size: 100% 100% !important;

    font: 11px/13px 'titilliumWebSemiBold';
    color: #000000;
    text-align: center;
}
#popupHelper.combine-item .img {
    transform: scale(0.5);
    margin-bottom: -45px;
    top: -25px;
}
#popupHelper .img:before {
    content: "";
    display: inline-block;

    height: 14px;
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/1_star.png") left bottom;
    background-repeat: repeat-x;
}
/* basically icon of the item; */
#popupHelper .img:after {
    content: "";
    position: absolute;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;

    background-size: 100% 100% !important;
}
#popupHelper .img[data-slot-type=bc] {
    /*background-color: #78c500;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/bc.png");
}
#popupHelper .img[data-slot-type=wz] {
    /*background-color: orangered;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/wz.png");
}
#popupHelper .img[data-slot-type=chq] {
    /*background-color: #74b9b9;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/backgrounds/chq.png");
}
#popupHelper .img[data-rarity=common]:before {
    /*background-color: greenyellow;*/
    /*border: 6px solid darkgrey;*/
    width: 12px;
}
#popupHelper .img[data-rarity=uncommon]:before {
    /*background-color: yellow;*/
    /*border: 6px solid green;*/
    width: 24px;
}
#popupHelper .img[data-rarity=rare]:before {
    /*background-color: red;*/
    /*border: 6px solid purple;*/
    width: 36px;
}
#popupHelper .img[data-rarity=very_rare]:before {
    /*background-color: red;*/
    /*border: 6px solid purple;*/
    width: 48px;
}
#popupHelper .img[data-rarity=epic]:before {
    /*background-color: rebeccapurple;*/
    /*border: 6px solid gold;*/
    width: 60px;
}
#popupHelper .img[data-item-type*=bribery]:after {
    /*background-position: -168px -80px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/bribery.png");
}
#popupHelper .img[data-item-type*=inflation]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/inflation.png");
}
#popupHelper .img[data-item-type*=higher_education]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/higher_education.png");
}
#popupHelper .img[data-item-type*=factory_upgrades]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/factory_upgrades.png");
}
#popupHelper .img[data-item-type*=economic_growth]:after {
    /*background-position: 0px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/economic_growth.png");
}
#popupHelper .img[data-item-type*=advanced_warfare]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/advanced_warfare.png");
}
#popupHelper .img[data-item-type*=ai_targeting]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/ai_targeting.png");
}
#popupHelper .img[data-item-type*=headquarters]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/headquarters.png");
}
#popupHelper .img[data-item-type*=morale_booster]:after {
    /*background-position: -86px 0px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/morale_booster.png");
}
#popupHelper .img[data-item-type*=ammunition_upgrades]:after {
    /*background-position: 0px -80px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/ammunition_upgrades.png");
}
#popupHelper .img[data-item-type*=spionage]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/spionage.png");
}
#popupHelper .img[data-item-type*=diplomacy]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/diplomacy.png");
}
#popupHelper .img[data-item-type*=mercenaries]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/mercenaries.png");
}
#popupHelper .img[data-item-type*=politican]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/politician.png");
}
#popupHelper .img[data-item-type*=sabotage]:after {
    /*background-position: 0px -160px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/sabotage.png");
}
#popupHelper .img[data-item-type*=propaganda]:after {
    /*background-position: -86px -80px;*/
    background: url("../images/new/warClicks/wc_splosno/research_system/icons/propaganda.png");
}
/* TESTING inventory system */


.inventory-table
{

}

.inventory-row
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: flex-start; /* align items in Cross Axis */
    align-content: flex-start; /* Extra space in Cross Axis */
}


.inventory-cell
{
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    flex-direction: row;
    justify-content: center; /* align items in Main Axis */
    align-items: center; /* align items in Cross Axis */
    align-content: center; /* Extra space in Cross Axis */

    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8709/inventory-atlas.png');
    background-position: -229px -331px;
}

/* left */
.inventory-cell:first-child
{
    width: 38px;
    padding-left: 2px;

    background-position: -190px -331px;
}

/* right */
.inventory-cell:last-child
{
    width: 38px;
    padding-right: 2px;

    background-position: -266px -331px;
}


/* top ROW */
.inventory-row:first-child .inventory-cell
{
    height: 38px;
    padding-top: 2px;

    background-position: -229px -292px;
}

/* bottom ROW */
.inventory-row:last-child .inventory-cell
{
    height: 38px;
    padding-bottom: 2px;

    background-position: -229px -368px;
}

/* top left */
.inventory-row:first-child .inventory-cell:first-child
{
    width: 38px;
    height: 38px;

    background-position: -190px -292px;
}

/* top right */
.inventory-row:first-child .inventory-cell:last-child
{
    width: 38px;
    height: 38px;

    background-position: -266px -292px;
}

/* bottom left */
.inventory-row:last-child .inventory-cell:first-child
{
    width: 38px;
    height: 38px;

    background-position: -190px -368px;
}

/* bottom right */
.inventory-row:last-child .inventory-cell:last-child
{
    width: 38px;
    height: 38px;

    background-position: -266px -368px;
}


/* single horizontal */
.inventory-row:only-child .inventory-cell
{
    height: 40px;

    background-position: -613px -286px;
}
/* single horizontal left */
.inventory-row:only-child .inventory-cell:first-child
{
    width: 38px;
    height: 40px;

    background-position: -574px -286px;
}
/* single horizontal right */
.inventory-row:only-child .inventory-cell:last-child
{
    width: 38px;
    height: 40px;

    background-position: -650px -286px;
}

/* single vertical */
.inventory-row .inventory-cell:only-child
{
    width: 40px;

    background-position: -563px -463px;
}
/* single vertical top */
.inventory-row:first-child .inventory-cell:only-child
{
    width: 40px;
    height: 38px;

    background-position: -563px -424px;
}
/* single vertical bottom */
.inventory-row:last-child .inventory-cell:only-child
{
    width: 40px;
    height: 38px;

    background-position: -563px -500px;
}

/* single by singel */
.inventory-row:only-child .inventory-cell:only-child
{
    width: 40px;
    height: 40px;

    background-position: -30px -288px;
}

#chat .chat-response-holder{
    position: absolute;
    padding: 30px;
    background: #1a1a1a;
    border: 1px solid #b3b3b3;
    color: #cccccc;
    z-index: 1;
    font: 14px/18px 'titilliumWebSemiBold';
    width: 353px;

    left: 0;
    right: 0;
    margin: 0 auto;
    top: 200px;
}



/* ITEMS */
/*
.inventory-item
{
    width: 34px;
    height: 34px;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8709/item-atlas.png');
    background-repeat: no-repeat;

    cursor: hand;
    cursor: pointer;

    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.inventory-item-sortable-placeholder
{
    display: none;
    background: red;
}

.inventory-item.ui-sortable-helper, .inventory-item.ui-draggable-dragging
{
    opacity: .6;
}*/