/* UI HARDCODE FOR FILMING! */
/*#gameUI .overlay .ui-holder {
    display: none !important;
}
#dynamicDOM .notifications {
    display: none !important;

}*/

/* END UI HARDCODE*/
#dynamicDOM .artillery-time {
    position: absolute;
    pointer-events: none;
}
#dynamicDOM .artillery-time .progress-bar {
    width: 50px;
    height: 5px;
    background: green;

}
#dynamicDOM .cursor-note {
    position: absolute;
    width: 200px;
    text-align: center;
    pointer-events: none;
    color: #ffffff;
    font: 700 12px/14px var(--font-reg);
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#dynamicDOM .overlay-text {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    width: max-content;
    color: #ffffff;
    font: 700 40px/50px var(--font-reg);
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;

}
    /* END cursor helpers */
/* END cursor stuff */
#dynamicDOM .notifications {
    position: absolute;
    bottom: 1px;
    right: 0px;
    /*left: 51px;*/
    /*left: 0px;*/

    /*padding: 3px 20px 3px 0px;
    padding: 3px 0px 3px 0px;
    height: 48px;
    background: white;
    color: #000000;
    font-weight: 700;
    border: 2px solid black;
    border-bottom: none;*/
    /*background: url('../images/new/notification_icon.png') 10px center no-repeat, rgba(28,215,235,0.2);*/
    /*background: url('../images/new/notification_icon.png') 5px center no-repeat, #15636c;
    background-size: 35px 33px;*/

    /*background: rgba(35,35,35, 1);*/


    width: 37px;
    height: 28px;
    background: url('../images/new_ui/game/up_arrow.png') 10px center no-repeat, linear-gradient(180deg, #313131 0%, #0E0E0E 100%);
    padding-right: 8px;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.45);*/

}
/*
#dynamicDOM .notifications:before {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('../images/resources_sprite_64_64.png') left center no-repeat, rgba(35,35,35, 1);
    background-size: auto 600%;
    background-position: -96px -48px;
    margin-right: 12px;
}
#dynamicDOM .notifications.off {
    width: 40px;
    padding: 3px 20px 3px 0px;
}
#dynamicDOM .notifications.on {
    height: 410px;
    max-height: 410px;
    background: url('../images/new/notification_icon.png') 5px 377px no-repeat, #15636c;
    background-size: 35px 33px;
}*/
/*
#dynamicDOM .notifications span {
    position: absolute;
    bottom: 27px;
    left: 41px;
    display: inline-block;
    background: #95681c;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    border: 1px solid black;
}
#dynamicDOM .notifications.on span {
    background: #1c952b;
}
#dynamicDOM .notifications.off span {
    background: #952b1c;
}
#dynamicDOM .notifications:hover {
    color: #0199e2;
}*/
#dynamicDOM .notifications-holder {
    display: none;
    position: absolute;
    /*right: 0;
    bottom: 23px;*/
    bottom: 2px;
    right: 0px;
    left: 90px;
    height: 44px;

    max-height: 63px;
    /*width: 210px;*/
    /*padding: 3px 0px 3px 10px;*/
    /*border: 3px solid #00b0ff;
    background: white;*/
    color: #ffffff;
    font: 14px/18px var(--font-reg);
    /*pointer-events: none;*/
}
#dynamicDOM .notifications-holder.on {
    /*bottom: 40px;
    max-height: 60px;*/
    /* TO DO - this won't work resizably*/
    max-height: 410px;
    height: 410px;
}
#dynamicDOM .notifications-holder.off {
    display: none;
}
#dynamicDOM .notification {
    /*display: inline-block;
    width: calc(100% - 10px);
    margin-right: 10px;
    margin-top: 2px;*/
    /*font: 700 14px/18px var(--font-reg);*/
    font: 12px/20px var(--font-reg);
}

#dynamicDOM .notification {
    /*width: calc(100% - 10px);*/
}
#dynamicDOM .notification.cit-gain,
#dynamicDOM .notification.explorer-gain,
#dynamicDOM .notification.positive {
    color: #1cd005;
    color: white;
}
#dynamicDOM .notification.warning {
    /*color: #ffdb00;*/
    color: #b59b00;
}
#dynamicDOM .notification.danger {
    color: #ffa05b;
}

#dynamicDOM .notification .table-list{
    padding-left: 4px;
}
#dynamicDOM .notifications-holder .notification.cit-gain,
#dynamicDOM .notifications-holder .notification.explorer-gain,
#dynamicDOM .notifications-holder .notification.positive {
    color: #ffffff;
}
#dynamicDOM .notifications-holder .notification.warning {
    /*color: #ffdb00;*/
    color: #95681c;
}
#dynamicDOM .notifications-holder .notification.danger {
    color: #95681c;
}
#dynamicDOM .notification .time-note {
    display: inline-block;
    /*width: 105px;*/
}
#dynamicDOM .notifications-holder > div {
    height: 100%;
    height: 43px;
    margin-right: 10px;
}
#dynamicDOM .notifications-holder.on > div {
    height: 410px;

}
#dynamicDOM .notifications-holder.on {
    font: 14px/18px var(--font-reg);
}
#dynamicDOM .notifications-new {
    position: absolute;
    right: 0;
    bottom: 53px;
    padding-bottom: 1px;
    padding-top: 15px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    /*max-height: 80%;*/
    /*max-height: 300px;*/
    overflow-y: hidden;
}
#dynamicDOM .notifications-new .close-all {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 25px;

    width: 20px;
    height: 20px;
    background: url('../images/new/button_close_all_notifications.png') center center no-repeat;
    background-size: auto 100%;

    z-index: 1; /* TODO potential issue with this z.index showing on top fo certain popups?*/
}
#dynamicDOM .notifications-new .close-all:only-child {
    display: none;
}
#dynamicDOM .notifications-new .close-all:hover {
    transform: scale(1.2);
    transform-origin: center 0;
}
#dynamicDOM .notifications-new .notification {
    display: block;
    width: max-content;
    margin: 0 3px 6px 3px; /* left & right margin helps ensure box shadow is shown properly*/
    padding: 5px;
    background: #232323;
    min-width: 200px;

    /*box-shadow: -2px -2px 3px black;*/
    box-shadow: -1px -1px 1px #cb672e, 1px 1px 1px #cb672e;

    position: relative;
    color: white;
    font: 700 14px/18px var(--font-reg);
    transform-origin: 100% 100%;
    /*transform-origin: center 0%;*/

    min-height: 30px;
    animation: fadeInHeightStay 30s ease-in-out; /* fadeInHeightStay has 90% of time of "waiting" before it removes itself*/

    /* ensures they vertically align to center height*/
    display: flex;
    align-items: center;
}
#gameContent.battle #dynamicDOM .notifications-new .notification {
    display: none;
}
#dynamicDOM .notifications-new .notification.objective-completed {
    /* TODO stick with basic animation for now as its a bit ugly/buggy*/
    /*animation: fadeInHeightStayPlusScale 30s ease-in-out;*/
}
/*#dynamicDOM .notifications-new .notification:first-child {*/
#dynamicDOM .notifications-new .notification:last-child {
    /*background:rgba(250, 125, 45, 0.5);*/
    background: #cb672e;
    box-shadow: none;
    border-top: 1px solid #232323;
}
#dynamicDOM .notifications-new .notification .action-shortcut {
    display: inline-block;
    width: 50px;
    text-align: center;
    vertical-align: middle;
    /*border-radius: 50%;*/
    margin-right: 5px;
    height: 20px;

    background: url('../images/new/button_user_guidance_used_within_notifications.png') center center no-repeat;
    background-size: auto 100%;
}
#dynamicDOM .notifications-new .notification .action-shortcut:hover {
    /*box-shadow: 0 0 5px rgba(255,255,255,0.8);*/
    /*background: rgba(255,255,255,0.2);*/
    transform: scale(1.2);
}
#dynamicDOM .notifications-new .notification .text {
    display: inline-block;
    vertical-align: middle;
    max-width: 400px;
    padding-right: 30px;
}
#dynamicDOM .notifications-new .notification .text > span {
    color: #1d6f25;
    font-weight: bold;
}
#dynamicDOM .notifications-new .notification:last-child .text > span {
    color: #ffffff;
    font-weight: bold;
}
#dynamicDOM .notifications-new .notification .icon {
    vertical-align: middle;
}
#dynamicDOM .notifications-new .notification .close {
    position: absolute;
    top: 7px;
    right: 10px;
    font: 700 18px/18px var(--font-reg);
    padding: 1px 3px;
    border-radius: 50%;
}
#dynamicDOM .notifications-new .notification .close:hover {
    box-shadow: 0 0 5px rgba(255,255,255,0.8);
}
#loading {
    /*display: none;*/
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    z-index: 3;
    /*background: url('../images/logo_sp_loading_screen.png') center 20% no-repeat, black;*/
    /*background: url('../images/simpocalypse_logo.png') center 20% no-repeat, black;*/
    /*background: url('../images/main_menu/sp_logo_white_new_650_195.png') center 20% no-repeat, black;*/
    background: url('../images/new_ui/menu/logo_full.png') center 20% no-repeat, black;
    background-size: 40% auto;
    /*opacity : 0.2;*/
}
#loading .loading-info {
    position: absolute;
    /*bottom: 20%;*/
    top: 42%;
    right: 0;
    left: 0;
    width: 500px;
    max-width: 80%;
    margin: 0 auto;
}
#loading .description {
    margin: 0 auto;
    font: 700 20px/25px var(--font-reg);
    color: #a09d9f;
    text-align: center;
}
#loading .progress {
    margin: 10px auto 20px auto;
    height: 20px;
    text-align: center;
    /*background: white;*/
    /*background: linear-gradient(to right, #676767 0%, #ffffff 20%, #ffffff 65%, #676767 100%);*/
    overflow: hidden;
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.75);
}
#loading .progress:before {
    /*width: 50%;*/

    /*background: rgba(0,174,239,1);*/
    /*background: linear-gradient(to right, #882900 0%, #d85a17 20%, #d85a17 65%, #882900 100%);*/
    background: #5D8D4B;
    /*animation: infiniteStretch 1s infinite;*/
    border-radius: 0;
}
#loading .loading-progress {
    text-align: center;
    font: 700 16px/20px var(--font-reg);
    color: #a09d9f;
}
/* Content */
/*modular*/
.animation-holder {
    /*top: 40px;
    height: 500px;*/
    position: relative;
    width: 100%;
    height: 100%;
}
/*modular*/
#animations-attach-point {
    position: absolute;
    width: 100%;
    height: 100%;
}
/*modular*/
#gameArea, #staticArea, #coverCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    /*-webkit-transform3d: translate(0,0,0);*/
    /*-moz-transform3d: translate(0,0,0);*/
    /*transform3d: translate(0,0,0);*/
}
#forceRefreshCanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.01;
    z-index: -1;
}
#gameContent.world #staticArea {
    /*background: #46b7b7;*/
    background: #1c545e;
}
#gameContent.world .animation-holder {
    /*background: #2c7373;*/
}
.auto-w-h {
    width: auto !important;
    height: auto !important;
    margin: auto;
    /*bottom: 0;
    right: 0;*/
}
/*modular*/
#gameUI {
    position: absolute;
    /*z-index: 1;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#gameUI .fight-options {
    position: absolute;
    bottom: 10px;
    left: 50%;
    right: 0;
    margin: 0 auto;
    background: rgba(0,0,0,0.3);
    text-align: center;
    width: max-content;
    padding: 5px;
    margin-left: -150px;
}
#gameUI .fight-options > div {
    display: inline-block;
    padding: 5px 10px;
    background: #ffffff;
    color: #000000;
    font: 700 14px/20px var(--font-reg);
}
#gameUI .fight-options > .choice:hover {
    background: grey;
}

#gameUI .fight-options .choice[data-type="auto_fire"] span {
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    border-radius: 5px;
    background: green;
    color: #ffffff;
}
#gameUI .fight-options .choice[data-type="auto_fire"].off span {
    background: var(--clr-red-primary);
}
#gameUI .artillery-options {
    position: absolute;
    right: 8px;
    top: 243px;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    margin-left: -5px;
}
#gameUI .artillery-options > .choice {
    position: relative;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    /*padding: 5px;*/
    /*background: white;*/
    /*color: #000000;*/
    /*background: url('../images/new/combat_action_button_1_not_selected.png');*/
    background: url('../images/new/combat_button2_without_glow.png');
    width: 74px;
    height: 74px;
    font: 700 16px/70px var(--font-reg);
    color: white;
    background-size: 100% 100%;
}
#gameUI .artillery-options > .choice span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#gameUI .artillery-options > .choice.active {
    /*background: url('../images/new/combat_action_button_1.png');*/
    background: url('../images/new/combat_button_without_glow.png');
}
#gameUI .toggle-fight.not-selected{
    /*background: url('../images/new/combat_action_button_1_not_selected.png');*/
    background: url('../images/new/combat_button2_without_glow.png');
}
#gameUI .artillery-options > .choice.disabled {
    opacity: 0.9;
}
#gameUI .artillery-options > .choice:nth-child(2) {
    margin-top: 10px;
}
#gameUI .artillery-options > .choice:hover {
    /*background: grey;*/
    filter: brightness(120%);
    /*transform: scale(1.2);*/
    transform: scale(1.08);
    transform-origin: 100% center;
}

#gameUI .artillery-options > .choice.active {
    /*background: green;*/
    background-size: 100% 100%;
}
/*modular*/
#gameUI .content-holder {
    position: absolute;
    top: 130px;
    /*width: calc(100% - 20px);*/
    /*left: 140px;*/
    /*left: 80px;*/
    left: 100px;
    right: 0;
    /*height: calc(100% - 215px);*/
    /*height: calc(100% - 185px);*/
    /*height: calc(100% - 220px);*/
    height: calc(100% - 195px);

    /*padding: 10px;*/
}
#gameUI .toggle-fight {
    text-align: center;
    position: absolute;
    top: 160px;
    right: 13px;
    vertical-align: middle;
    background: url('../images/new/combat_button_without_glow.png');
    width: 75px;
    height: 76px;
    font: 700 16px/73px var(--font-reg);
    color: white;
}
#gameUI .toggle-fight:hover {
    filter: brightness(120%);
    /*transform: scale(1.2);*/
    transform: scale(1.08);
    transform-origin: 100% center;
}
#gameContent.extended-content #gameUI .content-holder {
    /*height: calc(100% - 190px);*/
    height: calc(100% - 165px);
}
#gameContent.hide-overlay #gameUI .content-holder {
    top: 0;
    left: 0;
    height: calc(100% - 55px);
}
/*#gameContent.timelapse-visible #gameUI .content-holder {*/
#gameContent.timelapse-visible #gameUI .ui-holder.bottom {
    bottom: 50px;
}
#gameContent.timelapse-visible #dynamicDOM .notifications { /* show notifications above timelapse bar */
    bottom: 50px;
}
#gameContent.timelapse-visible #dynamicDOM .notifications-holder {
    bottom: 52px;
}
#gameContent.timelapse-visible.extended-content #gameUI .content-holder {
    /*height: calc(100% - 190px);*/
    height: calc(100% - 165px);
}
#gameContent.timelapse-visible #gameUI .content-holder {
    /*height: calc(100% - 235px);*/
    height: calc(100% - 210px);
}
/*modular*/
#gameUI .content-holder > div {
    height: 100%;
}
/*modular*/
#gameUI /*.content-holder*/ .tabs {
    padding: 2px;
    /*background: #0199e2;*/
    width: calc(100% - 4px);
    /*margin-bottom: 5px;*/
}
/*modular*/
#gameUI /*.content-holder*/ .tabs .tab {
    display: inline-block;
    padding: 2px 5px;
    /*background: #102331;
    color: white;*/
    font: 14px/17px var(--font-btn);
    /*margin-right: 5px;*/
    /*background: url('../images/new/menu_tabs.png') no-repeat;*/
    /*width: 111px;*/
    height: 18px;
    text-align: center;

    width: auto;
    padding: 3px 5px;
    color: black;


    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /*border-radius: 8px;*/

    /*color: rgba(255, 255, 255, 0.9);*/
    text-align: center;
    /*font: 22px/39px var(--font-btn);*/
    /*background: url('../images/new_ui/game/button_orange.png');
    background-size: 100% 100%;*/


    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);

    font-size: 12px;
}
#gameUI .tabs .tab:not(:last-child) {
    margin-right: 5px;
}
#gameUI .tabs.settings-tab{
    height: 0%;
    padding: 20px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
}

#gameUI .tabs.settings-tab .tab{
    margin-top: 15px;
    padding: 3px 21px;
    height: auto;
    min-height: 18px;
    min-width: 50%;
}
#gameUI .tabs.settings-tab .reset-all-settings{
    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
}
/*modular*/
#gameUI /*.content-holder*/ .tabs .tab:hover {
    /*color: #0199e2;*/
    /*color: black;*/
    filter: brightness(127%);
}
/*modular*/
#gameUI /*.content-holder*/ .tabs .tab.active {
    /*color: #0199e2;*/
    /*color: black;*/
}
#gameUI /*.content-holder*/ .tabs .tab.active {
    /*opacity: 0.5;*/
    pointer-events: none;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
    color: white;
}
/*modular*/
#gameUI /*.content-holder*/ .tab-data {
    display: none;
}
/*modular*/
#gameUI /*.content-holder*/ .tab-data.active {
    display: block;
}
/*modular*/
#gameUI .content-holder .columns {
    height: 375px;
    margin-bottom: 10px;
}
/*modular*/
#gameUI .content-holder .left-column {
    float: left;
    width: calc(46% - 20px);
    margin-right: 20px;
}
/*modular*/
#gameUI .content-holder .right-column {
    float: right;
    width: 43%;
}
/*modular*/
#gameUI .content-holder .section .max-200 {
    width: 200px;
}
#gameUI .content-holder .section .max-250 {
    width: 250px;
}
/*modular*/
#gameUI .content-holder .section .minus-200 {
    width: calc(100% - 200px - 20px);
}
#gameUI .content-holder .section .minus-250 {
    width: calc(100% - 250px - 20px);
}
/*modular*/
#gameUI .content-holder .title {
    /*margin-bottom: 11px;*/
    color: white;

    font: 14px/16px var(--font-title);
    text-transform: uppercase;
}

#gameUI .tab-data[data-type="about"]{

}
#gameUI .tab-data[data-type="about"] .inner-box{
    font: 700 15px/16px var(--font-reg);
    background: rgba(0, 0, 0, 0.4);
}
#gameUI .tab-data[data-type="about"] .inner-box .find-us{
    padding-top: 8px;
    padding-bottom: 6px;
}
#gameUI .tab-data[data-type="about"] .inner-box{
    text-align: center;
    color: white;
    padding-bottom: 12px;
}
#gameUI .tab-data[data-type="about"] .inner-box a{
    width: 65%;
    height: 22px;
    /*background: brown;*/
    color: white;
    /*padding-left: 22px;*/
    margin-top: 10px;
    font: 15px/17px var(--font-reg);
    text-decoration: none;
    padding: 4px 0 0px 22px;
}
#gameUI .tab-data[data-type="about"] .inner-box a:hover{
    /*color: black;*/
}
#gameUI .tab-data[data-type="about"] .inner-box a .icon{
    background: url('../images/about_us_icons_sprite_social_media.png');
    width: 32px;
    height: 33px;
    background-size: auto 100%;
    position: relative;
    top: -5px;
    left: -11px;
    vertical-align: top;
}
#gameUI .tab-data[data-type="about"] .inner-box.first a .icon.discord{
    background-position-x: 0px;
}
#gameUI .tab-data[data-type="about"] .inner-box.first a .icon.twitter{
    background-position-x: -32px;
}
#gameUI .tab-data[data-type="about"] .inner-box.first a .icon.facebook{
    background-position-x: -64px;
}
#gameUI .tab-data[data-type="about"] .inner-box.second a .icon.patreon{
    background-position-x: -96px;
}
#gameUI .tab-data[data-type="about"] .inner-box.second a.double > div{
    display: inline-block;
    vertical-align: top;
}
#gameUI .tab-data[data-type="about"] .inner-box.second{
    margin-top: 10px;
}
#gameUI .tab-data[data-type="about"] .inner-box.second a{
    width: 80%;
    height: 40px;
    font: 15px/17px var(--font-reg);
}
#gameUI .tab-data[data-type="about"] .inner-box.second .steam-pow{
    height: 51px;
    border: 1px solid white;
    background: black;
    color: white;
    display: inline-block;
    background: url('../images/wishlist_CTA_About us.png');
    background-size: 100% 100%;
    border-radius: 7px;
}
#gameUI .tab-data[data-type="about"] .inner-box.second .steam-pow:hover{
    color: orange;
}
#gameUI .tab-data[data-type="about"] .inner-box.second .steam-pow .wishlist{
    position:relative;
    top: 10px;
    left: -6px;
    font: 700 12px/0px var(--font-reg);
}
#gameUI .tab-data[data-type="about"] .inner-box.second .icon{
    top: 2px;
}
#gameUI .tab-data[data-type="about"] .flex-column.right{
    padding-left: 20px;
}
#gameUI .tab-data[data-type="about"] .flex-column.right ul{
    color: white;
}
#gameUI .tab-data[data-type="about"] .flex-column.right .main-features{
    font: 14px/16px var(--font-reg);
}
#gameUI .tab-data[data-type="about"] .flex-column.right ul{
    padding-top: 0px;
}



#gameUI .tab-data[data-type="credits"] .banner{
    background: url('../images/credits_localization_banner.png');
    /*width: 859px;*/
    height: 146px;
    /*margin-top: 25px;*/
    background-size: 100% 100%;
    width: calc(100% + 18px);
}
#gameUI .tab-data[data-type="credits"] .cat-holder{
    width: 40%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    /*color: black;*/
    margin-top: 23px;
}
#gameUI .tab-data[data-type="credits"] .cat-holder:nth-child(2n){
    margin-left: 20px;
}
#gameUI .tab-data[data-type="credits"] .cat-holder:nth-child(2n + 1){
    margin-left: 85px;
}
#gameUI .tab-data[data-type="credits"] .cat-holder .entry-title{
    font: 700 22px/21px var(--font-reg);
    padding-bottom: 9px;
}
#gameUI .tab-data[data-type="credits"] .cat-holder .entry-holder {
    margin-bottom: 5px;
}
#gameUI .tab-data[data-type="credits"] .cat-holder .entry{
    font: 13px/17px var(--font-reg);
}
#gameUI .tab-data[data-type="credits"] .cat-holder .entry a {
    color: yellow;
}
#gameUI .tab-data[data-type="credits"] .cat-holder .entry .author{
    /*font-style: italic;*/
    /*padding-bottom: 6px;*/
    /*padding-top: 2px;*/
    /*margin-top: -4px;*/
}
#gameUI .tab-data[data-type="credits"] .banner .banner-text{
    display: inline-block;
    position: relative;
    top: 72px;
    left: 272px;
    font: 20px/19px var(--font-reg);
}





#gameUI .content-holder .section.produce-plans .title > div,
#gameUI .content-holder .box-holder[data-type="setup-troops"] .title > div{
    display: inline-block;
    vertical-align: middle;
}
#gameUI .content-holder .section.produce-plans .title > div:nth-child(1),
#gameUI .content-holder .box-holder[data-type="setup-troops"] .title> div:nth-child(1){
    margin-top: 4px;
    font: 700 16px/16px var(--font-reg);
}
#gameUI .content-holder .section.produce-plans .title > div:nth-child(1){
    /*width: 90px;*/
    /*width: 115px;*/
    width: 160px;
    vertical-align: top;
    /*margin-top: -8px;*/
}
#gameUI .content-holder .section.produce-plans .title > div:nth-child(1) span{
    font: 14px/17px var(--font-reg);
}
#gameUI .content-holder .section.produce-plans .level-widget,
#gameUI .content-holder .box-holder[data-type="setup-troops"] .level-widget{
    /*margin-left: 86px;*/
    font: 13px/20px var(--font-title);
}
#gameUI .content-holder .section.produce-plans .level-widget {
    /*margin-left: 90px;*/
    /*margin-left: 45px;
    vertical-align: top;
    margin-top: 2px;*/
    position: absolute;
    top: 1px;
    right: 10px;
    text-align: left;
}
#gameUI .content-holder .section.produce-plans .level-widget .points-gain{
    margin-left: 10px;
}
#gameUI .content-holder .section.produce-plans .level-widget > .progress-bar{
    border: 1px solid black;
    width: 80px !important;
}
#gameUI .content-holder .section.produce-plans .level-widget > div{
    display: inline-block;
}
#gameUI .content-holder .section.produce-plans .level-widget .to-next-level{
    position: relative;
    left: 35px;
    top: -5px;
    font: 10px/14px var(--font-reg);
}
#gameUI .content-holder .section.produce-plans .level-widget .shield{
    background: url('../images/new/upgrade point_icon_256_256.png');
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    left: -5px;
    top: -1px;
    margin-right: -7px;
}
#gameUI .content-holder .section.produce-plans .level-widget > .progress-bar,
#gameUI .content-holder .box-holder[data-type="setup-troops"] .level-widget > .progress-bar,
#dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .progress-bar{
    width: 85px;
    height: 11px;
    top: 1px;
    /*background: brown;*/
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}
#gameUI .content-holder .section.produce-plans .upg-points,
#gameUI .content-holder .box-holder[data-type="setup-troops"] .upg-points{
    /*margin-left: 183px;*/
    position: absolute;
    top: 15px;
    right: 18px;
}
#gameUI .content-holder .box-holder[data-type="setup-troops"] .add-unit{
    position: absolute;
    top: 66px;
    right: 20px;
}
#gameUI .content-holder .box-holder[data-type="setup-troops"] .max-all-squadrons{
    position: absolute;
    top: 93px;
    right: 20px;
    width: 100px;
}
#gameUI .content-holder .box-holder[data-type="setup-troops"] .costs{
    position: absolute;
    top: 65px;
    left: 275px;
    right: auto;
}
/*modular*/
#gameUI .content-holder .sub-section > .title {
    background: rgba(28,215,235, 0.20);
    color: white;
}
/*modular*/
#gameUI .content-holder .title > span {
    /*margin-left: 20px;*/
    margin-left: 5px;
    /*font: 14px/16px var(--font-title);*/
}
#gameUI .content-holder .title > .icon {
    vertical-align: middle;
    margin-left: 10px;
}
/*modular*/
#gameUI .content-holder .title > span > span {
    /*color: yellow;*/
    /*color: rgba(59, 255, 157, 0.8);*/
}
#gameUI .content-holder .title > span > span.not-working {
    display: inline-block;
    /*animation: scaleBrightnessFlicker 1.0s ease-in-out infinite;*/
    animation: scaleInOutSpec 1.0s ease-in-out infinite;
}
#gameUI .content-holder .desc span {
    /*color: #00a800;;*/
}
/*modular*/
#gameUI .content-holder .unit-data {
    position: relative;
    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    font: 700 14px/16px var(--font-reg);
}
/*modular*/
#gameUI .content-holder .unit-data.boxable {
    display: inline-block;
    margin-right: 1%;
    width: 25%;
    height: 40px;
    background: none;
}
/*modular*/
#gameUI .content-holder .right-column.formations .unit-data.boxable {
    height: 50px;
    /*width: 108px;*/
    width: 25%;
}
#gameUI .content-holder .units .unit-data {
    margin-left: 0;
    margin-right: 10px;
}
/*modular*/
#gameUI .content-holder .unit-data > div {
    display: inline-block;
    vertical-align: top;
}
#gameUI .content-holder .unit-data > .stats {
    margin-left: 8px;
    position: relative;
    top: 2px;
    font: 14px/16px var(--font-reg);
}
#gameUI .content-holder .unit-data > .stats .value{
    font: 700 14px/16px var(--font-reg);
}
/*modular*/
#gameUI .content-holder .unit-data .costs {
    position: absolute;
    right: 100px;
    top: 4px;
}
#gameUI .content-holder .left-column.units .unit-data {
    color: black;
    /*border: 1px solid #0199e2;*/
}
#gameUI .content-holder .left-column.units .unit-data.empty {
    background: rgba(255, 255, 255, 0.88);
}
#gameUI .content-holder .formations  {
    text-align: center;
}
#gameUI .content-holder .units .scroller{
    height: calc(100%);
}
#gameUI .content-holder .formations .scroller {
    height: calc(100% - 22px);
}
#gameUI .content-holder .formations .ss-content {
    background: url('../images/backgrounds/grass_1.png') no-repeat;
    background-size: 100% auto;
    padding: 10px;
    height: calc(100% - 20px);
}
#gameUI .content-holder .unit-data .slot {
    /*margin-top: 8px;*/
    color: white;
    width: 108px;
    height: 55px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    line-height: 55px;
}
#gameUI .content-holder .unit-data .slot.selectable {
    width: 104px;
    height: 51px;
    border: 2px solid #0edee6;
}
#gameUI .content-holder .unit-data .slot.selectable:hover {
    corsor: pointer;
}
#gameUI .content-holder .unit-data .slot.active {
    background: none;
    line-height:14px;
}
#gameUI .content-holder .unit-data .slot .plan-image {
    left: -2px;

}
/*modular*/
#gameUI .content-holder .unit-data .image {
    width: 60px;
    height: 30px;
    margin: 5px 10px;
}
/*modular*/
#gameUI .content-holder .plan-image,
#gameUI .mini-popup-holder .plan-image {
    position: relative;
    margin: auto auto auto auto;
    width: 62px;
    height: 31px;
}
/*modular*/
#gameUI .content-holder .plan-image > div {
    width: 78px;
    height: 39px;
}
/*modular*/
#gameUI .content-holder .sub-header {
    /*background: #0199e2;*/
    padding: 5px 10px;
    overflow: auto;
}
#gameContent.setup_troops .sub-header {
    margin-bottom: 20px;
}
#gameUI .content-holder .save-formation {
    float: right;
    padding: 5px 10px;
    background: white;
    font: 700 15px/15px var(--font-reg);
    vertical-align: middle;
    margin-right: 50px;
}
/*
#dynamicDOM .display-options .hide-completed {

}
#dynamicDOM .display-options .hide-completed.on {
    background: #1c952b;
}*/
#gameUI .settings-category {

}
#gameUI .settings-category .settings-group {
    margin-bottom: 10px;
    padding: 10px;
    /*background: rgba(0,0,0,0.7);*/
    background: rgba(2, 2, 2, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
}
#gameUI .settings-group {
    margin-top : 5px;
}
#gameUI .settings-group .sub-header.semi{
    font: 700 14px/17px var(--font-reg);
}
#gameUI .settings { /* deprecated ?*/
    margin-top: 6px;
    display: inline-block;
}
#gameUI .setting,
#gameUI .setting-style {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font: 700 14px/17px var(--font-reg);
}


#gameUI .setting.one-per-line {
    display: block;
    margin-bottom: 8px;
}
#gameUI .setting.white-text {
    color: white;
}
#gameUI .setting:not(.number):before,
#gameUI .setting-style:not(.number):before {
    content: attr(data-display-value);
    text-transform: uppercase;
    display: inline-block;
    padding: 3px 5px;
    width: 25px;
    margin-right: 10px;
    /*background: #1c952b;*/

    border: 2px solid;
    border-image-slice: 1;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);

    vertical-align: middle;

    color: white;
    text-align: center;
    font: 14px/16px var(--font-reg);
}
#gameUI .setting.off:not(.number):before,
#gameUI .setting-style.off:not(.number):before {
    background: #952b1c;
}
#gameUI .setting.multiple.off:not(.number):before {
    /*background: #95681c;*/

    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}
/*#gameUI .setting:not(.qol):before {*/
#gameUI .setting.checkbox:before,
#gameUI .setting-style.checkbox:before {
    content: '';
    width: 16px;
    height: 13px;
    margin-right: 5px;
    padding: 0;

    background: url('../images/green_check_icon.png') bottom center no-repeat;
    border: 1px solid transparent;

    vertical-align: top;
}
#gameUI .setting.new-checkbox:before,
#gameUI .setting-style.new-checkbox:before {
    width: 61px;
    height: 20px;
    background: url('../images/settings_on_off_full_buttons.png');
    /*background-position-x: -61px;*/
    background-size: 200% 100%;
    background-position-x: -100%;
    border: none;
}
/*#gameUI .setting:not(.qol).off:before {*/
#gameUI .setting.checkbox.off:before,
#gameUI .setting-style.checkbox.off:before {
    background: none;
    border: 1px solid black;
}
#gameUI .setting.new-checkbox.off:before,
#gameUI .setting-style.new-checkbox.off:before {
    /*background: url('../images/settings_buttons_on_off.png');*/
    background: url('../images/settings_on_off_full_buttons.png');
    background-position-x: 0px;
    border: none;
}
#gameUI .setting.right:before {
    float: right;
    margin-left: 5px;
    margin-right: 0;
}
#gameUI .setting.qol:before {
    padding: 5px;
    font: 700 12px/14px var(--font-reg);
    margin-right: 0;
    width: 30px;
}
#gameUI .setting.no-text:before {
    content: '';
    width: 16px;
    height: 16px;
    padding: 0;
}

#gameUI .setting.stackables,
#gameUI .setting-style.stackables {
    margin: 0 5px 5px 0;
    display: inline-block;
    width: calc(50% - 5px);
    min-width: 200px;
    font: 700 12px/19px var(--font-reg);
}
#gameUI .list-title {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    top: -5px;
}
#gameUI .setting.list {
    display: inline-block;
}
#gameUI .setting.list::before {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);
}
#gameUI .setting.list.off::before {
    background: white;
}
/* END SETTINGS */
#gameUI .emphasized {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
#gameUI .emphasized .setting {
    font: 700 16px/20px var(--font-reg);
}
#gameUI .emphasized .setting:before {
    width: 20px;
    height: 16px;
    background-size: 100% 100%;
}
#gameUI .set-group-title {
    font: 16px/20px var(--font-title);
    padding-bottom: 14px;
}
.checkbox-list {
    margin-top: 10px;
    background: #3e3e3e;
    padding: 5px;
}
.checkbox-list .list-header {
    border-bottom: 1px solid var(--clr-border-primary);
    padding-bottom: 5px;
}
.checkbox-list .column-holder > div {
    text-align: center;
}
.checkbox-list .list-header > div {
    font: 700 14px/18px var(--font-reg);
    word-break: break-word;
}
.checkbox-list .list-row {
    padding: 2px 3px;
    align-items: center;
}
.checkbox-list .list-row:nth-child(even) {
    background: #1F1F1F;
}
.checkbox-list .list-row.selected-row {
    background: rgba(255,255,255,0.3);
    animation: testHeightAnim 500ms ease-in-out 1;
}
.checkbox-list .list-header > div .help {
    margin-left: 5px;
}
@keyframes testHeightAnim {
    /*0% {transform: scaleY(1);}
    50% {transform: scaleY(1.1);}
    100% {transform: scaleY(1);}*/

    0% {max-height: 0;}
    30% {max-height: 50px;}
    100% {max-height: 50px;}
}
#gameUI .checkbox-list .setting.new-checkbox::before, #gameUI .checkbox-list .setting-style.new-checkbox::before {
    width: 40px;
}
#gameUI .setting.number > div {
    display: inline-block;
    vertical-align: middle;
}
#gameUI .setting.number > div.amount {
    width: 30px;
    font:  16px/18px var(--font-title);
}
.checkbox-list .number {
    display: inline-block;
    padding: 2px 5px;
}
.checkbox-list .slider {
    height: 3px;
    position: relative;
    top: -4px;
}
.checkbox-list .slider::-webkit-slider-thumb,
.checkbox-list .slider::-moz-range-thumb {
    width: 15px;
    height: 20px;
}
.checkbox-list .slider-value {
    font: 12px/14px var(--font-btn);
    margin-bottom: 0;
    text-align: center;
}
/*modular*/
#gameUI .content-holder .units .unit-data .stats {
    width: calc(100% - 80px - 20px);
    font: 14px/16px var(--font-reg);
    text-align: left;
}
#gameUI .content-holder .units .unit-data .amount {
    position: absolute;
    top: 5px;
    right: 20px;
    font: 700 14px/16px var(--font-reg);
    color: green;
}
#gameUI .content-holder .unit-data .add-unit {
    position: absolute;
    top: 20px;
    right: -10px;
    padding: 3px 5px;
    border: 1px solid black;
    background: #0199e2;
}
#gameUI .content-holder .unit-data .remove-unit {
    position: absolute;
    top: 36px;
    left: 14px;
    padding: 0px 5px;
    /*border: 1px solid black;*/
    background: #0199e2;
}
#gameUI .content-holder .unit-data .unit-counter {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
}
#gameUI .content-holder .change-plans {
    color: yellow;
}
/* NEW OBJECTIVE */
#dynamicDOM .new-objective {
    position: absolute;
    left: 0;
    top: 92px;
    padding: 0px;
    /*max-width: 50%;*/
    height: 30px;

    /*background: rgba(28, 215, 235, 0.7);*/
    background: #1e5258;
    font: 700 12px/20px var(--font-reg);
    color: white;
    box-shadow: 0 -1px 2px rgba(0,0,0, 0.5), 0 1px 2px rgba(0,0,0, 0.5);
    overflow: hidden;
    padding-right: 35px;
    width: calc(100% - 50px);
}
#dynamicDOM .new-objective .close:hover {
    color: black;
    border-color: black;
}
#dynamicDOM .new-objective .widget {
    display: inline-block;
    vertical-align: top;
    color: yellow;
    padding: 5px 5px;
    box-shadow: 0 -1px 2px rgba(0,0,0, 0.5), 0 0px 2px rgba(0,0,0, 0.5);
    background: #59474b;
    position: relative;
    height: 22px;
}
#dynamicDOM .new-objective .desc {
    display: inline-block;
    vertical-align: top;
    color: white;
    font: 700 14px/30px var(--font-reg);
    position: relative;
    margin-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: calc(100% - 115px);
}
#dynamicDOM .new-objective .close {
    display: inline-block;
    font: 16px/18px var(--font-title);
    color: white;
    border: 1px solid white;
    padding: 2px;
    border-radius: 15px;
    width: 18px;
    height: 18px;
    text-align: center;
    position: absolute;
    right: 5px;
    top: 3px;
}
.slide-right {
    overflow: hidden;
    max-width: 100%; /* approximate max height */

    transition-property: max-width;
    transition-duration: 1.5s;
    /*transition-timing-function: ease-out;*/
    transition-timing-function: ease-in-out;
}
.quick-transition {
    transition-duration: 0.5s;
}
.semi-closed {
    max-width: 200px;
}
.closed {
    max-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}
/* popups */
/* WELCOME */
#dynamicDOM .popup-holder[data-type="welcome"] .popup-content .close {
    font: 14px/20px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="welcome"] .popup-content .button-style {
    font: 18px/35px var(--font-btn);
    padding: 3px 10px;
}
    /* MAIN MENU */
#dynamicDOM .popup-holder[data-type="main_menu"] {
    /*background: url('../images/new/menu_bg1_1_edited.jpg') bottom center no-repeat;*/
    /*background: url('../images/backgrounds/BG_test7.jpg') bottom center no-repeat;*/
    /*background: url('../images/backgrounds/BG_test12.jpg') bottom center no-repeat;*/
    background: url('../images/new_ui/common/backgrounds/bg_game_2.png') bottom center no-repeat;
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder[data-type="start_menu"] {
    /*background: url('../images/starting_story/armagedon_bg.jpg') bottom center no-repeat;*/
    /*background: url('../images/new_ui/game/game_background.png') bottom center no-repeat;*/
    /*background: url('../images/new_ui/game/game_background.png') bottom center no-repeat;*/
    background: url('../images/new_ui/common/backgrounds/starting_story_bg.png') bottom center no-repeat;
    background-size: 100% 100%;

    display: flex;
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="main_menu"] {
    overflow: hidden;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content-holder {
    position: relative;
    top: 0;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    /*background: url('../images/overlay/clouds_pattern_light.png');
    background-size: 200% auto;
    background-position: 0 bottom;
    animation: fogAnim 10s linear infinite;*/
}
/*#dynamicDOM .popup-holder[data-type="main_menu"] .test.popup-content-holder:before {*/
#dynamicDOM .popup-holder[data-type="main_menu"] .fog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;

    /* PERFORMANCE ISSUE PTENTIAL ON WEAKER DEVICES! */
    background: url('../images/overlay/clouds_pattern_light.png');
    /*background: ;*/
    background-size: 50% 100%;
    animation: fogAnim 20s linear infinite;

    /*opacity: 0.9;*/
    pointer-events: none;
}
@keyframes fogAnim {
    /*0%{background-position: -200% bottom;}
    100%{background-position: 0 bottom;}*/
    0%{transform: translateX(0); opacity: 0.7;}
    50%{transform: translateX(-25%); opacity: 0.2; }
    100%{transform: translateX(-50%); opacity: 0.7;}
}

#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content {
    background: none;
    border: none;
    box-shadow: none;
    height: auto;
    max-height: 100%;
}
/*#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header {
    padding-top: 2%;
}*/
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .analytics-note {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: yellow;
    width: max-content;

    font: 12px/16px var(--font-reg);
    /*text-shadow: 1px 1px 0 rgba(250, 255, 158,0.3), -1px 1px 0 rgba(250, 255, 158,0.3), 1px -1px 0 rgba(250, 255, 158,0.3), -1px -1px 0 rgba(250, 255, 158,0.3);*/
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-logo {
    /*display: block;*/
    /*background: url('../images/new/playpage_game_logo_min.png') center center no-repeat;
    background-size: 100% auto;*/
    max-width: 70%;
    /*max-height: 130px;*/
    /*margin: 0 auto;*/
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-pitch {
    /*text-align: center;
    margin: 0 auto;
    color: white;*/
    display: block;
    /*background: url('../images/main_menu/playpage_description.png') center center no-repeat;
    background-size: auto 100%;*/
    max-width: 23%;
    margin: 0 auto;
    margin-top: -15px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .game-options {
    position: absolute;
    top: 5px;
    right: 5px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .game-options .icon {
    margin-left: 10px;
    margin-top: 0;
    transform-origin: 100% 0;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .game-options .icon.language {
    width: 82px;
    height: 50px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .game-options .icon:hover {
    filter: brightness(90%);
    transform: scale(1.1);
}
.two-columns-justified {
    display: flex;
    justify-content: center;
    margin-top: 5%;
}
.two-columns-justified.bottom-justify {
    position: absolute;
    bottom: 5px;
    margin: 0 auto;
    left: 0;
    right: 0;
    align-items: flex-end;
    align-content: flex-end;
}
.menu-box {
    flex: 0 1 500px;
    /*flex-grow: 0;
    flex-shrink: 1;
    width: 500px;*/
    background: rgba(255,255,255,0.7);
    text-align: center;
    /*border: 1px solid #0199e2;*/
    max-width: calc(40%);
    box-shadow: 5px 5px 20px rgba(250, 255, 158,0.3), -5px 5px 20px rgba(250, 255, 158, 0.3);
}
.not-adjustable .menu-box {
    max-width: 100%;
}
.menu-box:not(:first-child) {
    margin-left: 15%;
}
.menu-box.mini {
    flex: 0 1 50%;
    margin-left: 0;
}
.menu-box.adjustable {
    flex-grow: 0;
}
.menu-box.not-adjustable {
    flex-shrink: 0;
    max-width: 70%;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.steam {
    /*background: #ffc2c2;*/
    background: rgba(255,60, 60, 0.8);
    box-shadow: 5px 5px 20px rgba(250, 255, 158,0.3), -5px 5px 20px rgba(250, 255, 158, 0.3);

    align-self: flex-start;
    font: 20px/22px var(--font-title);
}
.menu-box.play-options {
    padding-bottom: 20px;
    box-shadow: 5px 5px 20px rgba(250, 255, 158,0.3), -5px 5px 20px rgba(250, 255, 158, 0.3);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box {
    color: black;
    font: 16px/20px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="main_menu"] p {
    margin: 10px 20px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .demo-note {
    margin-top: 20px;
    font: 30px/30px var(--font-title);
    text-transform: uppercase;
    /*color: white;

    text-shadow: 1px 1px 0 rgba(255,60, 60, 0.8), -1px 1px 0 rgba(255,60, 60, 0.8), 1px -1px 0 rgba(255,60, 60, 0.8), -1px -1px 0 rgba(255,60, 60, 0.8),
            -2px -2px 5px rgba(250, 255, 158,0.6), 2px 2px 5px rgba(250, 255, 158, 0.6)*/
    color: var(--clr-yellow-primary);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .big-timer {
    display: flex;
    align-content: center;
    justify-content: center;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .big-timer > div {
    flex: 0 0 auto;
    font: 16px/18px var(--font-title);
    /*color: black;*/
    color: white;
    padding-right: 8px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .big-timer > div > span{
    display: block;
    width: max-content;
    color: var(--clr-yellow-primary);
    font: 30px/30px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .big-timer > div:last-child {
    padding-right: 0;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .mid-section {
    position: relative;
    font: 30px/30px var(--font-title);
    /*color: white;
    text-shadow: 1px 1px 0 rgba(255,60, 60, 0.8), -1px 1px 0 rgba(255,60, 60, 0.8), 1px -1px 0 rgba(255,60, 60, 0.8), -1px -1px 0 rgba(255,60, 60, 0.8),
    -2px -2px 5px rgba(250, 255, 158,0.6), 2px 2px 5px rgba(250, 255, 158, 0.6);*/
    width: max-content;
    margin: 25px auto 0 auto;
    color: var(--clr-yellow-primary);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .mid-section.strikethrough:before {
    position: absolute;
    content: "";
    left: -5px;
    top: 50%;
    right: -7px;
    border-top: 2px solid white;

    -webkit-transform:rotate(-21deg);
    -moz-transform:rotate(-21deg);
    -ms-transform:rotate(-21deg);
    -o-transform:rotate(-21deg);
    transform:rotate(-21deg);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .mid-section .discounted {
    position: absolute;
    top: -7px;
    right: -34px;

    font: 16px/16px var(--font-title);
    text-shadow: none;
    color: white;
}
#dynamicDOM .popup-holder[data-type="main_menu"] img {
    /*max-width: calc(100% - 10px);*/
    /*display: block;*/
}
#dynamicDOM .popup-holder[data-type="main_menu"] a img {
    display: block;
    max-width: 100%;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options > div {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;

    /*max-height: 300px;*/
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .game-saves {
    /*height: 165px;*/
    margin-top: 0px;
    max-height: 165px;
    overflow: auto;
    height: max-content;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .game-saves::-webkit-scrollbar {
    display: none;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .game-saves .ss-content {
    display: flex;
    flex-direction: column;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .game-save {
    display: flex;
    align-items: center;
    margin-top: 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid black;
    padding: 10px 5px 5px 5px;
    order: 2;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .game-save.last-played {
    background: rgba(250, 125, 45, 0.5);
    order: 1;
    /*max-width: calc(100% - 26px);*/
    max-width: calc(100% - 18px);
    margin-top: 0;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .save-info {
    flex: 1 1 auto;
    text-align: left;
    font: 700 14px/18px var(--font-reg);
    padding-left: 10px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .save-actions {
    flex: 0 1 100px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .save-actions .play {
    float: right;
    margin-top: 5px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .save-actions .icon {
    opacity: 0.85;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .save-actions .icon:hover {
    opacity: 1;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links {
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links a {
    text-decoration: none;
    display: block;
    color: black;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links a:hover {
    font-weight: bold;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links .icon {
    margin: 0 10px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini > * {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links > * {
    width: calc(100% - 2px);
    /*border: 1px solid #0199e2;*/
    border: 1px solid rgba(0,0,0,0.8);
    background: rgba(255,255,255,0.7);
    box-shadow: 2px 2px 5px rgba(250, 255, 158,0.3), -2px 2px 5px rgba(250, 255, 158, 0.3);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links .important-link {
    justify-content: flex-start;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu,
#dynamicDOM .popup-holder[data-type="main_menu"] .discord-link-menu {
    display: inline-block;
    text-decoration: none;
    border: 2px solid transparent;
    color: black;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu {
    position: relative;
    width: max-content;
    height: max-content;
    max-width: calc(100% - 10px);
    margin: 15px 0 10px 0;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .discord-link-menu {
    padding-right: 15px;
    margin-left: 3px;
    min-height: 95px;
    background: rgba(255,255,255,0.7);
    box-shadow: 2px 2px 5px rgba(250, 255, 158,0.3), -2px 2px 5px rgba(250, 255, 158, 0.3);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu:hover {
    border-color: white;
    transform: scale(1.02);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .discord-link-menu:hover {
    filter: brightness(120%);
    font-weight: bold;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu > span {
    position: absolute;
    display: block;
    width: max-content;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;

    font: 25px/25px var(--font-title);
    text-transform: uppercase;
    color: white;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-button {
    max-width: calc(100% - 20px);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-button:hover {
    transform: scale(1.03);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community {
    background: none;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community .title {
    background: rgba(0,0,0, 0.7);
    color: white;
    text-align: left;
    padding-left: 10px;
    font: 16px/24px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by {
    font: 16px/30px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box .two-columns-justified {
    margin-top: 0;
    /*background: rgba(255,255,255,0.6)*/
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community .menu-box {
    flex-grow: 1;
    gap: 2px;
    background: none;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community .menu-box > :first-child {
    margin-top: 2px;
    border: 1px solid rgba(0,0,0,0.8);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by.sign-up-form {
    display: flex;
    align-content: flex-end;
    align-items: flex-end;

    border: 1px solid rgba(0,0,0,0.8);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .signup-form {
    flex: 1 1 200px;
    text-align: left;
    margin-left: 20px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .signup-form input {
    width: calc(100% - 22px);
    max-width: 300px;
    border: 1px solid rgba(0,0,0,0.8);
    font: 16px/18px var(--font-reg);
    padding: 2px 10px;

}
#dynamicDOM .popup-holder[data-type="main_menu"] .sign-up.button-style {
    flex: 0 0 80px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 5px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .sign-up:hover {
    transform: scale(1.03);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .signup-form .error {
    color: var(--clr-red-primary);
    font: 14px/18px var(--font-reg);
}


#dynamicDOM .popup-holder[data-type="steam_note"] {

}
#dynamicDOM .popup-holder[data-type="steam_note"] .popup-content{
    /*padding-top: 5px;*/
    padding: 8px;
    padding-top: 4px;
    padding-bottom: 24px;
    max-height: 775px;
    max-height: clamp(200px, 775px, calc(100vh - 100px));
}
#dynamicDOM .popup-holder[data-type="steam_note"] .title{

}
#dynamicDOM .popup-holder[data-type="steam_note"] .subtitle{
    text-align: center;
    font: 15px/16px var(--font-title);
    padding-bottom: 10px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .text{
    font: 13px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="steam_note"] .diff-text{
    text-align: right;
    margin-top: 2px;
    padding-bottom: 2px;
    color: white;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .diff-text > span:first-child{
    font: 13px/16px var(--font-title);
    margin-right: 8px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .diff-text > span:last-child{
    font: 900 16px/16px var(--font-reg);
    margin-right: 11px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder{
    /*margin-top: 18px;*/
    padding-bottom: 35px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .left-column{

}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .right-column{
    border: 2px solid black;
    margin-left: 6px;

    background: url('../images/new/checkbox_unchecked_space.png') 15% 0, url('../images/new/checkbox_checked_space.png') 85% 0, #3e3e3e;
    /*background-size: 30% auto;*/
    background-size: auto 14.29%;
    background-repeat: repeat-y;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .right-column .icon{
    width: 40px;
    height: 40px;
    /*background: url('../images/main_menu/64_64_playpage_icons_updated.png');
    background-position-x: 0%;
    background-size: auto;
    background-size: 1600% auto;*/
    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: 0;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .right-column .icon.yes{
    /*background-position-x: -1200%;*/
    background-position-x: -100%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .right-column .icon.no{
    /*background-position-x: -1100%;*/
    background-position-x: 0;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry{
    border: 2px solid black;
    margin-top: 3px;
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    padding: 3px;
    color: white;
    display: flex;
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .text-holder{
    margin-left: 7px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry > div {
    flex: 0 0 auto;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry > div:last-child {
    flex: 1 1 auto;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon{
    width: 50px;
    height: 50px;
    background: url('../images/sprite_icons_buy_reminder_popup_1.png');
    background-size: auto 100%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.progress_faster{
    background-position-x: 0px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.unlimited_save_files{
    background-position-x: -100%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.new_research{
    background-position-x: -200%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.more_content{
    background-position-x: -300%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.unlock_prestige{
    background-position-x: -400%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.extra_goals{
    background-position-x: -500%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon.support_us{
    background-position-x: -600%;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .text-holder{
    display: inline-block;
    padding-top: 7px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .text-holder .title{
    font: 14px/16px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .text-holder .desc{
    font: 12px/14px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-link {
    text-decoration: none;
    width: max-content;
    display: block;
    margin: 0 auto;
}
/*#dynamicDOM .popup-holder[data-type="steam_note"] .steam-link:hover {*/
    /*border: 2px solid white;*/
/*}*/
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg {
    margin: 0 auto;
    width: 366px;
    height: 60px;
    background: url('../images/steam button_on buy reminders.png');
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg:hover {
    /*color: black;*/
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg:hover .steam-button,
#dynamicDOM .popup-holder[data-type="steam_note"] a.steam-link:hover .wish {
    /*color: black;*/
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg .steam-button{
    width: 158px;
    height: 33px;
    padding-top: 2px;
    background: url('../images/add to wishlist_button_on_buy_reminders.png');
    position: relative;
    top: 11px;
    left: 15px;
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg .steam-button .wish{
    font: 700 12px/16px var(--font-reg);
    color: white;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg .steam-button a{
    text-decoration: none;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .steam-widg .steam-button .wish:hover{
    /*font: 700 14px/16px var(--font-reg);
    color: white;*/
}
#dynamicDOM .popup-holder[data-type="steam_note"] .no-thanks{
    display: block;
    width: 100px;
    margin: 0 auto;
    color: white;
    margin-top: 5px;
    font: 700 12px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="steam_note"] .no-thanks:hover{
    color: white;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .after-text{
    padding-top: 2px;
    margin-top: 21px;
    border-top: 1px solid white;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .after-text a{
    color: yellow;
    text-decoration: none;
    font: 700 14px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="steam_note"] .bottom-holder {
    position: relative;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .discord-link{
    display: block;
    margin: 0 auto;
    margin-top: 24px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .discord-link:hover{
    border-color: white;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .thank-you{
    color: white;
    position: absolute;
    bottom: 18px;
    right: 10px;
}

/* advancements */
#dynamicDOM .popup-holder[data-type="advancement"] .advancement-title {
    text-align: center;
    margin: 20px 0;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advancement-subtitle {
    text-align: center;
    margin: 0 0;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings {
    text-align: center;
    align-items: center;
    font: 700 16px/20px var(--font-reg);
    margin-top: 10px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings .column-holder {
    font: 12px/14px var(--font-reg);
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings .column-holder .flex-column:first-child {
    text-align: right;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings .column-holder .flex-column:last-child {
    text-align: center;
    position: relative;
    left: -3px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings .column-holder .icon-holder {
    width: 120px;
    height: 80px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings .column-holder .icon:not(.timer) {
    width: 15px;
    height: 15px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advanced-buildings .big-time {
    font: 700 18px/20px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="advancement"] .arrow-right {
    top: -25px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advancement-info {
    text-align: center;
    align-items: center;
    padding-bottom: 10px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .advancement-info .column-holder {
    border-top: 1px solid white;
    margin-left: 20px;
    padding-top: 35px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .demo-line {
    text-align: center;
    color: yellow;
    font: 12px/20px var(--font-title);
    padding-bottom: 20px;
}
.white-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
    background: white;
    border-radius: 50%;
    margin-right: 5px;
    margin-top: -2px;
}
#dynamicDOM .popup-holder[data-type="advancement"] .button-style {
    display: block;
    width: max-content;
    margin: 20px auto 0 auto;

    padding: 3px 8px;
    font: 20px/36px var(--font-btn);
}
#dynamicDOM .popup-holder[data-type="advancement"] .research-cost {
    display: block;
    width: max-content;
    margin: 0 auto;
}
.arrow-right {
    position: relative;
    /* OLD DESIGN
    font: 700 100px/20px var(--font-reg);
    top: -37px;*/
    font: 700 35px/35px var(--font-reg);
    /*top: -37px;*/
    margin-top: -37px;
    text-align: center;
}
.arrow-right.lowered-arrow {
    top: -25px;
    margin-top: 58px;
}
/* end advancements */


#dynamicDOM .popup-holder[data-type="settings"] .popup-content-holder{
    top: 5%;
    max-width: 850px;
}
#dynamicDOM .popup-holder[data-type="settings"] .popup-content{
    max-width: 844px;
    padding-left: 0px;
    padding-right: 0px;
    /*max-height: clamp(200px, 850px, calc(85vh - 20px));*/
    max-height: clamp(200px, 850px, calc(80vh - 100px));
}
/*#dynamicDOM .popup-holder[data-type="settings"] .header{
    max-width: 810px;
}*/

/*#dynamicDOM .popup-holder[data-type="settings"] .tab-data[data-type="settings"],*/
#dynamicDOM .popup-holder[data-type="settings"] .tab-data{
    padding-top: 20px;
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data .tab.active{
    color: white;
}
#dynamicDOM .popup-holder[data-type="settings"] .tabs-holder.second-level .tab-data{
    padding-top: 0px;
}
#dynamicDOM .popup-holder[data-type="settings"] .tabs-holder.second-level .tab-data[data-type="hotkeys"] .spec-titul{
    padding-bottom: 55px;
}
#dynamicDOM .popup-holder[data-type="settings"] .tabs-holder.second-level .tab-data[data-type="sounds"] .settings-group .setting:nth-child(4){
    margin-top: 14px;
}
#dynamicDOM .popup-holder[data-type="settings"] .tabs-holder.second-level .flex-column.settings-tab{
    margin-right: 25px;
    padding-top: 9px;
    position: relative;
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data[data-type="sound"]{
    padding-top: 20px;
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data[data-type="about"]{
    padding-left: 20px;
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data[data-type="credits"] .author{
    user-select: text;
    -webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data[data-type="settings"] .settings-group{
    /*text-align: center;*/
    padding-left: 30px;
    margin-top: 0px;
    padding-bottom: 23px;
    position: relative; /*added for absolute disable hotkeys*/
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data[data-type="settings"] .spec-titul{
    font: 17px/17px var(--font-title);
    display: inline-block;
    padding-bottom: 21px;
    /*padding-bottom: 55px;*/
    padding-top: 3px;
}
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line{
    font: 700 13px/19px var(--font-reg);
    margin-bottom: 12px;
}
#dynamicDOM .popup-holder[data-type="settings"] .list-group .setting.one-per-line {
    margin-bottom: 5px;
}
#dynamicDOM .popup-holder[data-type="settings"] .reset-all-hotkeys{
    position: absolute;
    top: 42px;
    right: 16px;
    text-transform: uppercase;
    font: 14px/15px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line[data-type="disable_hotkeys"]{
    position: absolute;
    top: 10px;
    right: 5px;
    text-transform: uppercase;
    font: 700 14px/16px var(--font-reg);

}
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.master-toggle,
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.disable-hotkeys{
    text-transform: uppercase;
    /*padding-left: 164px;*/
    font: 17px/22px var(--font-title);
    margin-top: 3px;
    margin-bottom: 3px;
}
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.master-toggle:after,
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.disable-hotkeys:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    /*width: 61px;*/
    /*height: 20px;*/
    width: 62px;
    height: 21px;
    /*background: url('../images/settings_on_off_full_buttons.png');*/
    background: url('../images/settings_switch_icons.png');
    background-position-x: 0%;
    background-position-x: -61px;
    border: none;
    margin-left: 5px;
}

#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.master-toggle.off:after,
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.disable-hotkeys.off:after {
    /*background: url('../images/settings_buttons_on_off.png');*/
    /*background: url('../images/settings_on_off_full_buttons.png');*/
    background: url('../images/settings_switch_icons.png');
    background-position-x: 0px;
    border: none;
}
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.master-toggle:before,
#dynamicDOM .popup-holder[data-type="settings"] .setting.one-per-line.disable-hotkeys:before {
    display: none;
}
#dynamicDOM .popup-holder[data-type="settings"] .slider{
    width: 60%;
}
#dynamicDOM .popup-holder[data-type="settings"] .setting-name{
    color: white;
    width: 68%;
    text-align: center;
    text-transform: none !important;
    font: 700 13px/19px var(--font-reg);
    padding-bottom: 3px;
}
#dynamicDOM .popup-holder[data-type="settings"] .slider-value{
    position: relative;
    margin-bottom: 1px;
    padding-top: 5px;
}
#dynamicDOM .popup-holder[data-type="settings"] .current-sett-value{
    color: white;
    display: inline-block;
    position: absolute;
    top: 24px;
    left: 360px;
    font: 700 14px/20px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="settings"] .tabs-holder:not(.second-level) > .tabs > .tab{
    margin-left: 7px;
    padding: 3px 7px;
    min-width: 147px;
}
#dynamicDOM .popup-holder[data-type="settings"] .patch-notes{
    position: absolute;
    top: 3px;
    right: 18px;
    font: 14px/23px var(--font-title);
    width: 100px;
    padding: 0 2px;
}
#dynamicDOM .popup-holder[data-type="settings"] .hard-reset{
    width: 100px;
    height: 24px;
    padding: 0px 21px;
    font: 14px/23px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="settings"] .hotkey-entry{
    display: block;
    pointer-events: none;
}
#dynamicDOM .popup-holder[data-type="settings"] .hotkey-entry > div{
    display: inline-block;
}
#dynamicDOM .popup-holder[data-type="settings"] .hotkey-entry .title{
    /*width: 422px;*/
    font: 13px/28px var(--font-title);
    display: inline-block;
    width: calc(100% - 135px);
}
#dynamicDOM .popup-holder[data-type="settings"] .hotkey-entry .plus-sign{
    font: 14px/16px var(--font-reg);
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
}
#dynamicDOM .popup-holder[data-type="settings"] .hotkey-entry .value{
    /*font: 700 14px/21px var(--font-reg);*/
    font: 14px/23px var(--font-title);
    display: inline-block;
    vertical-align: top;
    /*padding-left: 20px;*/

    padding: 0px 3px;
    /*border: 1px solid white;*/
    border-radius: 2px;
    /*background: #3f4651;*/
    color: white;
    /*pointer-events: none;*/
    min-width: 21px;
    height: 23px;
    text-align: center;
    pointer-events: auto;

    min-width: 52px;
    height: 20px;
    /*background: url('../images/settings_buttons_on_off.png');*/
    background-position-x: 0px;
    border: none;
    background-size: 200% 100%;
}
#dynamicDOM .popup-holder[data-type="settings"] .hotkey-entry .value.currentlyBeingEdited{
    border: 1px solid #f7931e;
    color: black;
}
#dynamicDOM .popup-holder[data-type="settings"] .settings-group.non-working .hotkey-entry .value{
    opacity: 0.4;
    pointer-events: none;
}

#dynamicDOM .popup-holder[data-type="settings"] .tabs-holder.second-level .settings-group .tip{
    font: 11px/19px var(--font-reg);
    /*font-style: italic;*/
    margin-top: 6px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content-holder {
    width: 850px;
    max-width: calc(100% - 40px);
    /*max-height: 510px;
    height: 500px;*/

    /*top: 10%;*/
    position: static;
    margin: 0 0 0 5%;
}
#dynamicDOM .popup-holder[data-type="start_menu"].compact .popup-content-holder .header {
    padding-left: 20px;
}
/*#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content,*/
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content {
    margin: 0;
    text-align: center;
    padding: 20px;
    /*background: rgba(255,255,255,0.8);*/
    /*border: 1px solid #0199e2;
    border-top: none;*/
    /*box-shadow: 5px 5px 20px rgba(250, 255, 158,0.3), -5px 5px 20px rgba(250, 255, 158, 0.3);*/

    /*display: block;*/
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content {
    padding: 1px 0px 0px 0px;
}
#dynamicDOM .popup-holder[data-type="ingame_menu"]{
    display: grid;
    align-items: center;
    background: rgba(0,0,0,0.9);
}
#dynamicDOM .popup-holder[data-type="ingame_menu"] .popup-content-holder {
    position: static;
    width: max-content;
    min-width: auto;
}
#dynamicDOM .popup-holder[data-type="ingame_menu"] .popup-content-holder .header {
    padding: 10px 20px 0 20px;
    background: none;
    border: none;
    text-transform: uppercase;
    font: 40px/40px var(--font-reg);
    margin-bottom: 40px;
}
#dynamicDOM .popup-holder[data-type="ingame_menu"] .popup-content {
    background: none;
    padding: 20px;
    margin: 0;

}
#dynamicDOM .popup-holder[data-type="ingame_menu"] .popup-content-holder .button-style {
    display: block;
    width: 150px;
    padding: 5px 10px;
    margin: 0 auto 10px auto;
}
#dynamicDOM .popup-holder[data-type="end_game"] .popup-content-holder {
    top: calc(50% - 250px);
    height: 450px;
    max-width: 700px;
}
#dynamicDOM .popup-holder[data-type="end_game"] .popup-content {
    padding: 10px 20px;
}
#dynamicDOM .popup-holder .popup-content p.centered {
    text-align: center;
}
#dynamicDOM .popup-holder .popup-content p.centered > *{
    vertical-align: middle;
    margin-top: 0;
}
#dynamicDOM .popup-holder .popup-content .special-note {
    position: absolute;
    top: 33px;
    left: 10px;
    right: 10px;
    margin: 0 auto;
    font: 700 12px/16px var(--font-reg);
    color: black;
}
#dynamicDOM .popup-holder[data-type="settings"] .tab-data .settings:not(.hotkeys) .title {
    margin-top: 10px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;

    padding: 3px 5px;
    background: linear-gradient(to right, #882900 0%, #d85a17 20%, #d85a17 65%, #882900 100%);

    color: black;
    font: 16px/20px var(--font-reg);
    margin-bottom: 10px;
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column {
    display: flex;
    flex-direction: column;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column > div {
    flex: 0 0 auto;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices > .flex-column:not(:last-child) {
    margin-right: 20px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column .title {
    padding-top: 3px;
    padding-bottom: 2px;
    font: 22px/24px var(--font-btn);
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column .title .new-line {
    display: block;
    font: 14px/16px var(--font-btn);
    color: #E6E6E6;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column.active .title {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column .difficulty-info {
    flex-grow: 1;
    padding: 5px;
    font-size: 12px;
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    border: 2px solid;
    border-color: transparent;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-choices .flex-column.active .difficulty-info {
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
}
#dynamicDOM .popup-holder[data-type="start_menu"] .difficulty-adjustment {
    margin: 0;
    padding: 10px 0px;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    color: white;
    list-style-position: inside;

    padding-left: 10px;
    text-align: left;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content > div:not(.section-header) {
    max-width: calc(100% - 40px);
    margin-right: auto;
    margin-left: auto;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .perk-points-info {
    text-align: right;
    margin-top: 10px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .perk-points-left {
    display: inline-block;

    font: 16px/20px var(--font-reg);
    color: white;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .perk-points-left > div {
    display: inline-block;
    width: 160px;
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .perk-points-info .button-style {
    margin-left: 20px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .slide-container {
    display: flex;
    margin-top: 10px;
    /*margin-bottom: 40px;*/
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .slide-container > * {
    flex: 1 1 auto;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .slide-container .slider {
    position: relative;
    top: -9px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .slide-container > .slider-value {
    flex: 0 0 200px;
    margin-right: 20px;
    font: 13px/16px var(--font-reg);
    text-transform: none;
    text-align: right;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .slide-container > .slider-value div {
    margin-right: 66px;
    font: 11px/12px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="start_menu"] .slide-container > .slider-value .total-value {
    display: inline-block;
    width: 60px;
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content .title {
    font: 14px/16px var(--font-title);
    color: #ffffff;
    margin-bottom: 5px;
    margin-top: 20px;
}
#dynamicDOM .popup-holder .popup-content .section-header {
    font: 18px/25px var(--font-title);
    color: black;
    /*border: 1px solid grey;*/
    background: url('../images/new_ui/game/title_bg_light.png');
    background-size: 100% 100%;
    text-align: center;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.4));
    /*border-radius: 8px*/
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content .section-header {
    margin-top: 25px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .distribute-all-perk-points {
    color: #ff0000;
    text-align: center;
    font: 700 12px/14px var(--font-reg);
    margin-top: 20px;
}
#dynamicDOM .popup-holder .popup-content .menu-button {
    margin: 0 auto;
    width: 312px;
    display: block;
    margin-top: 8px;
    font: 700 12px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content .menu-button {
    /*background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);*/
    /*border-radius: 8px;*/
    margin-bottom: 10px;

    width: max-content;
    padding: 0 10px;
    line-height: 30px;
}
#dynamicDOM .popup-holder .popup-content .menu-button[data-type="play_game"],
#dynamicDOM .popup-holder .popup-content .menu-button[data-type="start_game"] {
    font: 700 18px/30px var(--font-reg);
    margin-top: 20px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="start_game"] {
    font: 18px/40px var(--font-title);
    margin-top: 20px;
    text-transform: uppercase;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="play_game"] .icon {
    float: right;
    margin-right: 20px;
}
#dynamicDOM .popup-holder[data-type="start_menu"] .popup-content .menu-button[data-type="start_game"] {
    /*position: absolute;
    right: 0;
    bottom: 70px;
    left: 0;*/
    margin: 10px auto 10px auto;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="feedback"] {
    color: black;
    background: url('../images/main_menu/playpage_button_big_grey.png') no-repeat !important;
    background-size: 100% 100% !important;
    font: 15px/25px var(--font-reg);
    padding: 2px 5px;
}
/*#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button.small, .load-file {
    position: relative;
    top: 7px;
    display: inline-block;
    margin: 10px auto 0 20px;
    padding: 2px 20px;
    width: max-content;

    color: black;
    background: url('../images/main_menu/playpage_button_small_grey.png') no-repeat !important;
    background-size: 100% 100% !important;
}*/
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button.small[data-type="new_game"] {
    position: relative;
    top: 7px;
    color: black;
    background: url('../images/main_menu/playpage_button_small_grey.png') no-repeat !important;
    background-size: 100% 100% !important;
    margin: 20px auto 0 auto;
    font: 15px/25px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button.small:hover,
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="feedback"]:hover/*,
.load-file:hover*/ {
    filter: brightness(130%);
    transform: scale(1.03);
}
#dynamicDOM .popup-holder[data-type="main_menu"]:last-child .menu-button.small,
#dynamicDOM .popup-holder[data-type="main_menu"]:last-child .load-file {
    z-index: 1;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .play-options.no-saves .menu-button[data-type="new_game"] {
    display: none;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .play-options.no-saves .load-file {
    margin: 80px auto 0 auto;
    top: -5px;
}
input[type="file"] {
    display: none !important;
}
/* GAME OVER */
.img {
    display: inline-block;
    margin: 20px;
}
.img.destroyed-city {
    /*background: url('../images/backgrounds/BG_test7.jpg') center center no-repeat;*/
    /*background: url('../images/backgrounds/BG_test12.jpg') center center no-repeat;*/
    background: url('../images/new_ui/common/backgrounds/bg_game_2.png') center center no-repeat;
    background-size: 100% 100%;
    width: 480px;
    height: 270px;
}
#dynamicDOM .popup-holder[data-type="game_over2"] .popup-content {
    padding: 20px 20px 10px 20px;
    height: calc(100% - 110px);
    font: 16px/18px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="game_over2"] {
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="game_over2"] .sequence {
    min-height: 60vh;
}
#dynamicDOM .popup-holder[data-type="game_over2"] .sequence .restore-point-tip {
    margin-top: 50px;
}
#dynamicDOM .popup-holder[data-type="game_over2"] .buttons {
    line-height: 25px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}
#gameUI #dynamicDOM .popup-holder[data-type="game_over2"] .buttons > div {
    line-height: 35px;
    flex: 0 0 auto;
    order: 2;
}
#dynamicDOM .popup-holder[data-type="game_over2"] .button-style[data-action-type="to_main_menu"] {
    order: 1;
}
#dynamicDOM .popup-holder[data-type="game_over2"] .buttons .button {
    line-height: 42px;
}
    /* END GAME OVER */
/* notifications popup */
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content {
    padding: 10px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .title {
    font: 16px/25px var(--font-title);
    color: white;
    margin-top: 20px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .box-holder {
    border: 4px black solid;
    padding: 5px;
    background: /*url('../images/units/fight_jet.png') left center no-repeat,*/ rgba(255,255,255,0.7);
    display: flex;
    color: black;
    margin-top: 5px;
    /*padding-left: 80px;*/
    background-size: auto 100%
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .box-holder .box-data {
    padding-left: 20px;
    flex: 1 1 0;
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .box-holder .box-data.event-info {
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    font: 700 13px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .box-holder .box-data.event-info .event-title{
    font: 14px/16px var(--font-title);
    padding-bottom: 12px;
}
#dynamicDOM .popup-holder/*[data-type="notifications"]*/ .popup-content /*.box-holder .box-data*/ .progress-bar.intensity {
    height: 18px;
    border: 1px solid black;
    font: 700 14px/18px var(--font-reg);
    background-image: linear-gradient(90deg, #00864b, #cbbe00, #a31f1e);
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .progress-bar.intensity {
    background-image:  linear-gradient(90deg, #a31f1e, #cbbe00, #00864b);
}
#dynamicDOM .popup-holder/*[data-type="notifications"]*/ .popup-content /*.box-holder .box-data*/ .progress-bar.intensity:before {
    /*background-image: linear-gradient(90deg, #00864b, #cbbe00, #a31f1e);*/
    background: white;
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content.progress-bar.intensity:before {
    right: 1px; /* tp cover for border right*/
}
#dynamicDOM .popup-holder .popup-content .box-holder .box-data.event-intensity {
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .box-holder .box-data .event-details {
    width: 24px;
    height: 23px;
    background: url('../images/new/more_details_button_64_64.png');
    margin-right: 20px;
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder[data-type="notifications"] .popup-content .box-holder .box-data .event-details:hover {
    filter: brightness(120%);
}
#dynamicDOM .popup-holder[data-type="notifications"] .tabs-holder {
    height: 100%;
    margin-top: 11px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tabs-holder .tabs .tab:nth-child(n + 2){
    margin-left: 10px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tabs-holder .tabs .setting[data-type="show_quick_notification"]{
    float: right;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data {
    height: calc(100% - 100px);
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .settings-group{
    margin-top: 10px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .setting:before {
    margin-right: 11px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .setting{
    font: 700 13px/19px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .setting:nth-child(2){
    margin-left: 10px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .setting:nth-child(3){
    margin-left: 30px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .notification{
    /*margin-top: 4px;*/
    /*margin-bottom: 5px;*/
    margin-bottom: 2px;
    line-height: 14px;
    align-items: center;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .notification > div {
    /*flex: 0 1 max-content;*/
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .notification .text-holder {
    /*flex-grow: 1;*/
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .notification .time-note {
    flex-shrink: 0;
    text-align: right;
    margin-right: 10px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .tab-data .notification .action-shortcut {
    flex-basis: 20px;
    flex-grow: 0;
}
#dynamicDOM .popup-holder[data-type="notifications"] .setting.show-quick-notification:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 61px;
    height: 20px;
    background: url('../images/settings_on_off_full_buttons.png');
    background-position-x: 0%;
    background-position-x: -61px;
    border: none;
    margin-left: 5px;
}
#dynamicDOM .popup-holder[data-type="notifications"] .setting.show-quick-notification.off:after {
    background: url('../images/settings_on_off_full_buttons.png');
    background-position-x: 0px;
    border: none;
}
#dynamicDOM .popup-holder[data-type="notifications"] .setting.show-quick-notification:before {
    display: none;
}



.table-list {
    width: calc(100% - 27px);
    /*height: calc(100% - 10px);*/
    /*background: rgba(255,255,255,0.8);*/
    color: white;
    padding: 5px 10px;
    /*border: 3px solid black;*/
    margin-top: 7px;
    min-height: 300px;
    margin-bottom: 10px;
    padding-top: 15px;
}
.table-list .action-shortcut {
    width: 20px;
    height: 20px;
    display: inline-block;
    /*margin-left: 10px;*/
    /*padding: 0px 0px 5px 0px;*/
    /*border: 1px solid white;*/
    margin-right: 3px;
    font: 700 19px/15px var(--font-reg);
    color: white;
}
.table-list .action-shortcut:hover {
    color: white;
}
    /* END notifications popup */
    /* event detaisl popup */
#dynamicDOM .popup-holder[data-type="event_details"] .popup-content-holder {
    height: auto;
}
#dynamicDOM .popup-holder[data-type="event_details"] .popup-content {
    padding: 10px;
    overflow: auto;
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details {
    /*border: 3px solid black;*/
    position: relative;
    /*border: 2px solid var(--clr-border-primary);*/
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .data {
    /*background: url('../images/new/event_popup_net_bg.png') no-repeat, white;
    background-size: 100% 100%;*/
    padding: 13px 10px 10px 10px;
    /*background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;*/
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .title {
    text-align: center;
    font: 16px/25px var(--font-title);
    /*background-image: linear-gradient(90deg, #330c0c, #c67135, #330c0c);*/
    /*background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.4));*/
    background: #3e3e3e;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.5);
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .thumbnail {
    float: left;
    height: 80px;
    width: 80px;
    margin-right: 10px;
    /*background: url(../images/units/fight_jet.png);
    background-size: 100% 100%;*/
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .subtitle {
    display: inline-block;
    color: white;
    font: 14px/20px var(--font-title);
}
#dynamicDOM .popup-holder .event-details .event-intensity {
    position: absolute;
    bottom: 5px;
    right: 10px;
    /*float: right;*/
    width: 150px;
    text-align: center;
    color: white;
    font: 12px/16px var(--font-title);
    /*margin-top: -25px;*/
}
#dynamicDOM .popup-holder .event-details .event-intensity .trend > span {
    margin-right: 5px;
}
#dynamicDOM .popup-holder/*[data-type="event_details"]*/ .popup-content .progress-bar.intensity {
    height: 16px;
    font: 12px/16px var(--font-title);
    color: black;

}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .desc {
    font: 13px/15px var(--font-reg);
    color: white;
    margin: 10px 0 15px 0;
    min-height: 50px;
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .event-effect,
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .event-tip {
    font: 14px/16px var(--font-reg);
    color: white;
    margin-bottom: 5px;
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .event-effect > span:not(.high-risk),
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .event-tip > span {
    font: 14px/16px var(--font-reg);
    display: inline-block;
    width: 115px;
    margin-right: 10px;
    text-align: right;
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-details .event-effect .high-risk {
    color: var(--clr-red-primary);
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-action {
    /*border: 3px solid black;*/
    /*background: rgba(255,255,255,0.9);*/
    text-align: center;
    /*color: black;*/
    margin-top: 20px;
    padding: 10px;
    font: 14px/20px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="event_details"] .event-decision {
    text-align: center;
    /*margin-top: 20px;*/
}
#dynamicDOM .popup-holder[data-type="event_details"] .button.accept,
#dynamicDOM .popup-holder[data-type="event_details"] .button.ok {
    display: inline-block;
    width: 76px;
    height: 25px;
    /*padding: 22px 30px 0px 10px;*/
    text-align: center;
    color: white;
    font: 16px/25px var(--font-btn);
    /*background: url('../images/new/accept_event_button.png') no-repeat;
    background-size: 100% 100%;*/
    position: relative;
    /*top: -15px;*/
    /*border: none;*/
}
#dynamicDOM .popup-holder[data-type="event_details"] .button:nth-child(even) {
    margin-left: 20px;
}
#dynamicDOM .popup-holder[data-type="event_details"] .button.decline {
    display: inline-block;
    width: 76px;
    height: 25px;
    /*padding: 7px 30px 17px 10px;*/
    text-align: center;
    color: white;
    font: 16px/25px var(--font-btn);
    /*margin-left: 30px;*/

    /*background: url('../images/new/decline_event_button.png') no-repeat;
    background-size: 100% 100%;*/
    /*border: none;*/
}
#dynamicDOM .popup-holder[data-type="event_details"] .button:hover {
    filter: brightness(120%);
}
/* Detailed building/job stats */
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content-holder {
    max-width: 800px;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content {
    padding: 20px;
    color: white;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .scroll-holder {
    /*background: rgba(255,255,255,0.88);
    border: 3px solid black*/
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .grey-text {
    color: var(--clr-grey-primary);
}
.grid-row {
    display: flex;
    margin-bottom: 10px;
}
.grid-row.space-between {
    justify-content: space-between;
}
.grid-box {
    /*flex-grow: 1;*/
    flex: 1 1 auto;
    margin-bottom: 10px;
    margin-right: 10px;
}
.grid-box:first-child {
    margin-left: 10px;
}
.grid-box.small {
    /*width: 100px;*/
    /*
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
    */
    flex: 0 0 140px;
}
.grid-box.medium{
    flex: 0 0 160px;
}
.grid-box.smaller {
    /*width: 100px;*/
    /*
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
    */
    flex: 0 0 80px;
}
.grid-box[data-icon-bg] {
    min-height: 80px;
}
.grid-box.auto-end {
    flex: 0 1 auto;
}
.grid-options {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr;
}
.grid-option {
    padding: 5px 20px;
    background: rgba(250, 125, 45, 1);

    font: 20px/25px var(--font-btn);
    color: black;
}
.grid-option.off:hover {
    opacity: 0.8;
}
.grid-option.off {
    background: white;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .output-sum {
    position: relative;
    width: max-content;
    padding: 5px 5px;
    border-top: 1px solid white;
    border-left: none;
    /*background: white;
    color: black;*/
    margin-bottom: 5px;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .output-sum span {
    font: 14px/16px var(--font-btn);
    display: inline-block;
    width: 140px;
    margin-right: 10px;
    text-align: right;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .output-sum .icon {
    position: absolute;
    left: 10px;
    top: 6px;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .icon-holder {
    width: 150px;
    height: 100px;
}
#dynamicDOM .popup-holder[data-type="detailed_stats"] .popup-content .icon-holder[data-icon-bg="perk_points"] {
    width: 100px;
}
/* END detailes jobs/buildings stats poupp */
    /* END event details popup */
#dynamicDOM .popup-holder .popup-content .menu-button a {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    color: black;
}
#dynamicDOM .popup-holder .popup-content .menu-button a:hover {
    color: black;
}
#dynamicDOM .popup-holder .popup-content .extra-note {
    text-align: center;
    color: black;
    margin-top: 10px;
    margin-bottom: 30px;
    font: 700 14px/16px var(--font-reg);
}
#dynamicDOM .popup-holder .discord-link {
    text-decoration: none;
    display: inline-block;
    /*width: 322px;
    height: 109px;*/
    width: 260px;
    height: 88px;
    margin-top: 5px;
    background: url('../images/new/discord_button.png') no-repeat;
    border: 2px solid transparent;
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder .discord-link:hover {
    border: 2px solid yellow;
}
#dynamicDOM .popup-holder .wishlist-link {
    text-decoration: none;
    display: inline-block;
    width: 260px;
    height: 98px;
    margin-top: 15px;
    background: url('../images/new/wishlist_icon.png') no-repeat;
    border: 2px solid transparent;
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder .wishlist-link:hover {
    border: 2px solid yellow;
}
#dynamicDOM .popup-holder .wishlist-link.small {
    display: block;
    margin: 15px auto 0 auto;
    width: 200px;
    height: 75px;
}
#dynamicDOM .popup-holder .discord-link.small {
    display: block;
    margin: 5px auto 0 auto;
    width: 200px;
    height: 67px;
}

#dynamicDOM .popup-holder .patreon-link {
    text-decoration: none;
    display: inline-block;
    width: 217px;
    height: 51px;
    margin-top: 5px;
    background: url('../images/new/become_a_patron_button.png') no-repeat;
    border: 2px solid transparent;
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder .patreon-link:hover {
    border: 2px solid yellow;
}
/* END MAIN MENU */
/* START MENU */
#dynamicDOM .popup-holder[data-type="start_menu"] #startingCitizens {
    /*margin-top: 50px;*/
}
/* END START MENU */
#dynamicDOM .popup-holder[data-type="objectives_old"] .popup-content {
    /*padding: 10px 20px;*/
    padding: 10px 10px 10px 20px;
}
#dynamicDOM .popup-holder[data-type="objectives_old"] .popup-content .ss-content {
    padding-right: 10px;
}
#dynamicDOM .current-objective {
    display: inline-block;
    vertical-align: top;
    width: calc(85% - 16px);
    padding: 5px;
    height: 70px;
    border: 3px #000000 solid;
    background: rgba(255,255,255,0.9);
    color: black;
}
#dynamicDOM .current-objective div {
    font: 14px/25px var(--font-title);
    /*margin-bottom: 10px;*/
}
#dynamicDOM .how-to-play {
    display: inline-block;
    vertical-align: top;
    width: calc(15% - 16px);
    padding: 5px;
    height: 70px;
    border: 3px transparent  solid;
    background: rgba(255,255,255,0.9);
    text-align: center;
    color: black;
    font: 16px/16px var(--font-title);
}
#dynamicDOM .display-options {
    text-align: right;
    font: 12px/14px var(--font-reg);
    margin: 10px 0;
}
#dynamicDOM .objective-holder {
    margin-bottom: 5px;
    background: rgba(255,255,255,0.9);
    padding: 5px;
    overflow: auto;
}
#dynamicDOM .objective-holder > div {
    color: black;
}
#dynamicDOM .objective-status {
    display: inline-block;
    background: #952b1c;
    vertical-align: top;
    color: white;
    font: 14px/25px var(--font-reg);
    width: 40px;
    padding: 2px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 5px;
    float: left;
    margin-top: 3px;
 }
#dynamicDOM .completed .objective-status {
    background: #1c952b;
}
#dynamicDOM .current .objective-status {
    background: #95681c;
}

/* new objectives */
#dynamicDOM .popup-holder[data-type="objectives"] .tabs-holder {
    margin-bottom: 20px;
    /*added by alesio - should work normally*/
    /*max-width: calc(100% - 2px);*/
}
#dynamicDOM .popup-holder[data-type="objectives"] .tabs {
    background: none;
    margin:  5px 0 0 20px;
    width: calc(100% - 24px);
}
#dynamicDOM .popup-holder[data-type="objectives"] .tabs .tab {
    font: 14px/16px var(--font-btn);
    padding: 4px 5px;
    height: auto;
    width: auto;
}
#dynamicDOM .popup-holder[data-type="objectives"] .tabs .tab.disabled,
#dynamicDOM .popup-holder[data-type="objectives"] .tabs .tab.active {
    color: white;
    /*opacity: 0.7;*/
}
#dynamicDOM .popup-holder[data-type="objectives"] .how-to-play {
    position: absolute;
    top: 12px;
    right: 3px;
    padding: 3px 50px 3px 3px;
    height: auto;
    width: auto;

    border: 1px black  solid;
    background: rgba(255,255,255,0.9);
    text-align: center;
    color: black;
    font: 14px/16px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="objectives"] .how-to-play div.item {
    position: absolute;
    top: -10px;
    right: 3px;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .ss-content{
    padding: 13px;
    padding: 18px;
    padding-top: 5px;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note{
    padding: 10px;
    padding-left: 15px;
    padding-top: 5px;
    border: 2px solid white;
    border-radius: 5px;
    margin-top: 10px;
    /*background: rgba(0,0,0,0.7);*/
    background: rgba(255,255,255,0.8);
    position: relative;
    color: black;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note.new{
    border: 2px solid #f15a24;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note .patch-title{
    font: 16px/16px var(--font-title);
    max-width: 800px;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note .patch-date{
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 10px;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note .patch-text{
    padding-top: 5px;
    padding-left: 15px;
    font: 14px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note .patch-text ul {
    margin-top: 0;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] .patch-note .patch-text p.list-title {
    margin-bottom: 0;
}
#dynamicDOM .popup-holder[data-type="patch_notes"] a {
    color: blue;
}
#dynamicDOM .popup-holder .mission-set {
    margin-top: 10px;
}
#dynamicDOM .popup-holder .mission-set .header {
    position: relative;
    /*border-top: 2px solid black;*/
    /*border-bottom: 2px solid black;*/

    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%), #1f1f1f;
    border: 1px solid #404040;
    box-sizing: border-box;
    box-shadow: inset 0px 0px 8px 1px rgba(0, 0, 0, 0.75);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.45));

    color: white;

    font: 20px/20px var(--font-title);
    /*margin-bottom: 20px;*/
    text-align: left;
    padding: 10px 20px;
}
#dynamicDOM .popup-holder .mission-set .header .next-row {
    color: rgba(245,245,245, 0.7);
    font: 12px/16px var(--font-title);
}
/*#dynamicDOM .popup-holder .mission-set .header:before,
#dynamicDOM .popup-holder .mission-set .header:after {
    content: '';

    position: absolute;
    top: 3px;
    display: inline-block;
    width: 40px;
    height: 40px;

    background: url('../images/sprite_menu_icons_128_128.png');
    vertical-align: middle;

    background-size: 600% auto;
}
#dynamicDOM .popup-holder .mission-set .header:before {
    left: 10px;
}
#dynamicDOM .popup-holder .mission-set .header:after {
    right: 10px;
}*/
#dynamicDOM .popup-holder .missions-holder {
    position: relative;
}
#dynamicDOM .popup-holder .missions-data {
    position: relative;
    /*width: calc(70% - 84px);
    margin: 0 15% 5px 15%;*/

    padding: 15px 10px 0px 35px;
    /*background: rgba(255,255,255,0.7);*/
}
#dynamicDOM .popup-holder .missions-data:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 18px;
    left: 10px;

    width: 3px;
    background: url('../images/new_ui/game/vertical_line_grey.png') 0 0 repeat-y;
}
#dynamicDOM .popup-holder .missions-data.hints-visible:before {
    bottom: 27px;
}
#dynamicDOM .popup-holder .missions-data .mission {
    position: relative;
    margin-bottom: 10px;
    font: 15px/18px var(--font-reg);
    color: white;
    min-height: 30px;
    opacity: 0.6;
    padding: 10px 10px 10px 30px;


    background: #3E3E3E;
    border: 1px solid #404040;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.45), inset 0px 0px 8px 1px rgba(0, 0, 0, 0.75);

    margin-top: 15px;
}
#dynamicDOM .popup-holder .missions-data .mission:first-child {
    margin-top: 0;
}
#dynamicDOM .popup-holder .missions-data .mission.first-uncompleted,
#dynamicDOM .popup-holder .missions-data .mission.completed {
    opacity: 1;
}
#dynamicDOM .popup-holder .missions-data .mission:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    display: inline-block;
    width: 7px;
    /*width: 40px;
    height: 40px;
    background: url('../images/main_menu/64_64_playpage_icons_updated.png');

    background-size: 1600% auto;
    background-position-x: -1100%;*/

    background: white;

    margin-right: 10px;
}
#dynamicDOM .popup-holder .missions-data .mission.completed:before {
    /*background-position-x: -1200%;*/
    background: var(--clr-green-primary);
}
#dynamicDOM .popup-holder .missions-data .mission:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: -25px;

    width: 25px;
    height: 3px;
    background: url('../images/new_ui/game/vertical_line_grey.png') repeat-x;
}
#dynamicDOM .popup-holder .missions-data .mission .full-desc {
    display: none;
    /*color: #c95113;*/
    color: #B0B1B4;
}
#dynamicDOM .popup-holder .missions-data.hints-visible .mission .full-desc {
    display: block;
}
#dynamicDOM .popup-holder .missions-holder .next-mission-info {
    position: absolute;
    right: 5px;
    top: 0;

    display: none; /* temporary TODO*/
}
#dynamicDOM .popup-holder .missions-holder .next-mission-info span {
    display: block;
    width: 60px;
    text-align: center;
    font: 14px/16px var(--font-reg);
    color: black;
    background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 65%, rgba(255,255,255,0.1) 100%);

    margin-left: 10px;
    margin-bottom: 5px;
}
#dynamicDOM .popup-holder .missions-holder .next-mission {
    width: 70px;
    padding: 5px;
    text-align: center;
    font: 14px/16px var(--font-reg);
}
#dynamicDOM .popup-holder .missions-holder .show-hints {
    position: absolute;
    top: -41px;
    right: 0;
    padding: 2px;
}
#dynamicDOM .popup-holder .missions-holder .show-hints .setting {
    font: 12px/14px var(--font-reg);
}
#dynamicDOM .popup-holder .missions-holder .close {
    margin: 10px auto;
    padding: 7px 15px;
    display: block;
    width: max-content;
    font: 16px/24px var(--font-btn);
}
/* end new objectives */
/* start achievements */

.achievement-group .title {
    margin-top: 10px;
    /*border-top: 1px solid white;*/
    /*border-bottom: 1px solid white;*/
    border: 1px solid #a8a7a7;
    padding: 3px 5px;
    /*background: linear-gradient(to right, #882900 0%, #d85a17 20%, #d85a17 65%, #882900 100%);*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
    font: 15px/20px var(--font-title);
    /*margin-bottom: 10px;*/
    text-align: center;
    color: white;
    text-transform: uppercase;
}
.achievement-group.challenges > .title {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
}
.achievement-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    justify-content: space-evenly;
}
.achievement-box {
    flex: 0 1 calc(33.33% - 30px);
    min-width: 300px;
    padding: 10px;
    margin: 5px;
    background: rgba(255,255,255,0.8);

    font: 12px/14px var(--font-reg);
    color: black;
}
.achievement-box.challenges{
    flex: 0 1 calc(100%);
}

.achievement-box {
    /*flex: 0 1 calc(25% - 30px);*/
    /*flex: 0 1 calc(33% - 30px);*/
    /*flex: 0 1 calc(33% - 7px);*/
    /*flex: 0 1 250px;*/
    padding: 10px;
    padding-bottom: 0px;
    margin: 5px;
    /*background: rgba(255,255,255,0.8);*/
    padding-right: 0px;
    padding-top: 7px;
    padding-left: 0px;

    font: 12px/14px var(--font-reg);
    color: white;
    background: #3e3e3e;
    text-align: center;
    margin-top: 0px;
    box-shadow:  0px 4px 4px rgba(0, 0, 0, 0.45), inset 0px 0px 8px 1px rgba(0, 0, 0, 0.75);
}
.achievement-box:nth-child(n+4) {
    margin-top: 5px;
}
.achievement-box .ach-title{
    font: 15px/15px var(--font-title);
    text-transform: uppercase;
}
.achievement-box.challenges > .chall-title{
    font: 15px/15px var(--font-title);
    text-transform: uppercase;
    padding-top: 15px;
    text-align: left;
}
.achievement-box .reward{
    font: 700 11px/13px var(--font-reg);
    margin-top: 3px;
}
.achievement-box .flex-column .reward{
    margin-top: 10px;
}
.achievement-box .reward .reward-amount{
    color: #d25826;
    font: 700 11px/13px var(--font-reg);
}
.achievement-box .reward .reward-type{
    color: #d25826;
    font: 700 11px/13px var(--font-reg);
}
.achievement-box .success-holder{
    display: flex;
    align-items: flex-end;
    padding-top: 3px;
    min-height: 70px;
    padding-bottom: 10px;
}
.achievement-box .success-holder > div{
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}
.achievement-box .success-holder > .left{
    text-align: center;
    /*width: 92px;*/
    width: 74px;
    position: relative;
    height: 56px;
}
.achievement-box .left.hidden-ach{
    opacity: 0.4;
}
.achievement-box .left > div{
    display: inline-block;
}
.achievement-box .left .reward-icon{
    background: url('../images/trophy_icon.png');
    width: 43px;
    height: 52px;
    background-size: 100% 100%;
    opacity: 0.5;
}
.achievement-box.completed  .left .reward-icon{
    opacity: 1.0;
}
.achievement-box  .left .reward-note{
    background: url('../images/achievements_frame_below_trophy.png');
    width: 92px;
    height: 16px;
    background-size: 100% 100%;
    text-align: center;
    font: 700 13px/15px var(--font-reg);
    position: relative;
    top: -16px;
    color: black;
}
.achievement-box .center{
    width: 164px;
    /*padding-top: 10px;*/
    /*padding-left: 5px;*/
    text-align: center;
    opacity: 0.5;
}
.achievement-box .center.completed{
    opacity: 1;
}
.achievement-box .flex-column .center{
   margin-top: 10px;
}
.achievement-box .center .questions{
    background: url('../images/hidden_achievements_icon.png');
    /*width: 97px;*/
    /*height: 61px;*/
    width: 73px;
    height: 46px;
    background-size: 100% 100%;
    /*margin-left: -30px;*/
    /*margin-left: -18%;*/
}
.achievement-box .center > div:not(.reward, .time-text){
    display: inline-block;
    vertical-align: top;
}
.achievement-box .center > .time-text{
    font: 700 11px/13px var(--font-reg);
    /*float: left;*/
}
.achievement-box .center > .time-value{
    /*margin-left: 21px;*/
    font: 700 11px/13px var(--font-reg);
    opacity: 0.9;
    color: #d25826;
}
.achievement-box .right{
    padding-left: 18px;
}
.achievement-box .flex-column .right{
    text-align: right;
}
.achievement-box .right .completed-icon{
    width: 35px;
    height: 35px;
    /*background: url('../images/main_menu/64_64_playpage_icons_updated.png');
    background-size: 1600% auto;
    background-position-x: -1100%;*/
    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: 0;
    margin-right: 6px;
    margin-top: 10px;
}
.achievement-box.challenges .right .completed-icon{
    display: inline-block;
}
.achievement-box .right .completed-icon.completed{
    /*background-position-x: -1200%;*/
    background-position-x: -100%;
}


.achieved {
    /*background: rgba(0, 255, 0, 0.4);*/
    color: white;
}
/* end achievements */

    /* help section */
    #dynamicDOM .help-section .category {
        padding: 3px 10px;
        margin-bottom: 5px;
        /*background: #0199e2;*/
        font: 700 16px/20px var(--font-reg);
        color: black;
    }
    #dynamicDOM .help-section .category .header {
        position: relative;
        border: 1px solid white;
        color:white;
        padding: 3px 10px;
    }
    #dynamicDOM .help-section .category .header:after {
        position: absolute;
        top: 1px;
        right: 2px;
        display: inline-block;

        content: '\25BC';
        font: 900 25px/25px var(--font-reg);
        color: white;
    }
    #dynamicDOM .help-section .category.extended .header:after {
        content: '\25B2';
    }
    #dynamicDOM .help-section .sub-categories {
        display: none;
        background: rgba(255,255,255,0.8);
        padding: 3px;
        font: 700 14px/16px var(--font-reg);
    }
    #dynamicDOM .help-section .category.extended .sub-categories {
        display: block;
    }
    #dynamicDOM .help-section .sub-category {
        display: inline-block;
        margin-right: 10px;
        padding: 3px 5px;
        /*background: #0199e2;
        color: white;*/
        text-transform: uppercase;
    }
    #dynamicDOM .help-section .sub-category:hover {
        color: black;
    }
    #dynamicDOM .help-section .sub-category.extended {
        /*background: white;*/
        opacity: 0.8;
        color: black;
    }
    #dynamicDOM .help-section .text {
        display: none;
        background: rgba(255,255,255,0.8);
        padding: 5px;
        font: 12px/14px var(--font-reg);
    }
    #dynamicDOM .help-section .category.extended .text{
        display: block;
    }
    #dynamicDOM .help-section .category.extended .text .title {
        border-bottom: 1px black solid;
        margin-left: 20px;
        font: 12px/16px var(--font-title);
    }
    #dynamicDOM .help-section .category ul {
        margin-bottom: 0;
    }


    /* dev settings*/
    #dynamicDOM .popup-holder[data-type="dev_panel"] {
        z-index: 4;
    }

    #dynamicDOM .popup-holder[data-type="dev_panel"] .category {
        margin-top: 20px;
        margin-left: 20px;
        user-select: none;
    }
    #dynamicDOM .popup-holder[data-type="dev_panel"] .category .setting {
        display: inline-block;
        margin-right: 10px;
        color: white;
        font: 700 14px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="dev_panel"] .category .setting {
        display: inline-block;
        content: '';
        width: 15px;
        height: 15px;
        background: green;
        border: 1px solid black;
        vertical-align: top;
        margin-right: 5px;
    }
    #dynamicDOM .popup-holder[data-type="dev_panel"] .category.off .setting {
        background: red;
    }
    #dynamicDOM .popup-holder[data-type="dev_panel"] [data-type="game_speed"] {
        margin-right: 5px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder {
        /*max-height: 460px;*/
        /*width: 520px;*/
        /*width: 37%;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .title{
        /*text-align: left;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .animated{
        animation: scaleInOutSpec 1.0s ease-in-out 3;
        /*color: var(--clr-green-primary);*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .header .title.animated{
        text-align: center !important;
        position: absolute;
        left: 20px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .ss-content{
        text-align: center;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .gain-loss-amount{
        text-align: center;
        color: white;
        font: 700 14px/18px var(--font-reg);
        /*margin-top: 40px;*/
        margin-top: 10px;
        position: relative;
        left: 12px;

    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .gain-loss-amount .added-value{
        font: 700 16px/18px var(--font-reg);
        color: var(--clr-green-primary);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .gain-loss-amount .added-value .icon{
        position: relative;
        top: -3px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .buttons-holder{
        text-align: center;
        margin-top: 25px;
        padding-bottom: 15px;
        max-width: 100%;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .buttons-holder > div{
        color: white;
        display: inline-block;
        /*width: 99px;*/
        width: 131px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .buttons-holder > .upg-points{
        margin-top: 13px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .buttons-holder > div:hover{
        /*color: black;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder{
        display: inline-block;
        /*text-align: left;*/
        text-align: center;
        /*margin-top: 10px;*/
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"].compact .popup-content-holder > .header{
        height: 50px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder{
        border: 1px solid #41535C;
        width: 320px;
        display: inline-block;
        /*padding-bottom: 3px;*/
        margin-left: 20px;
        margin-top: 10px;
        position: relative;
        vertical-align: top;
        /*height: 122px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder:nth-child(2n){
        /*margin-left: 56px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .circle{
        /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
        width: 80px;
        height: 80px;
        background-size: 100% 100%;
        position: relative;
        top: 6px;*/
    }

    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder:nth-child(1){
        /*margin-left: 0px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-widget{
        text-align: center;
        /*width: 90px;*/
        width: 115px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-widget > div{
        /*display: inline-block;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .corpus-name{
        color: black;
        /*text-align: left;*/
        background: rgba(255, 255, 255, 0.70);
        font: 14px/14px var(--font-title);
        display: inline-block;
        /*padding: 0px 13px;*/
        float: left;
        padding-bottom: 2px;
        text-align: center;
        width: 100%;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .plan-image {
        /*position: relative;
        width: 120px;
        height: 47px;
        display: inline-block;
        top: 15px;
        left: -20px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .amount-holder {
        /*position: absolute;
        text-align: center;
        width: 87px;
        background: url('../images/new/combat_tank_amount_bar.png') center no-repeat;
        background-size: 100% 100%;
        left: 14px;
        top: 91px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .right-part{
        display: inline-block;
        position: absolute;
        top: 65px;
        /*right: 78px;*/
        right: 19px;
        width: 171px;
        font: 15px/16px var(--font-title);
        color: var(--clr-green-primary);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .plan-image > div {
        /*width: 61px;
        height: 31px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .exp-points{
        color: var(--clr-green-primary);
        font: 16px/16px var(--font-title);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .tanks-lost{
        font: 700 12px/16px var(--font-reg);
        position: relative;
        /*top: 11px;*/
        background: url('../images/new_ui/game/title_bg_light.png');
        background-size: 100% 100%;
        width: 100%;
        text-align: center;
        color: black;
        /*padding-bottom: 1px;*/
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .tanks-lost .amount{
        font: 700 13px/16px var(--font-reg);
        padding-left: 3px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget{
        text-align: left;
        /*padding-left: 9px;*/
        position: absolute;
        top: 65px;
        right: 5px;
        width: 187px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget .pre-level-widget{
        width: 52px;
        display: inline-block;
        font: 11px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget .progress-bar.popup-end::before{
        transition: transform 1500ms;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget .progress-bar.instant::before{
        transition: transform 0ms;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget .pre-level-widget.left{

    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget .pre-level-widget.right{
        /*position: relative;*/
        /*left: 83px;*/
        position: absolute;
        right: 14px;
        text-align: right;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .level-widget .progress-bar{
        display: block;
        width: 168px;
        border: 1px solid black;
        position: relative;
        left: -2px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .current-exp-points{
        display: inline-block;
        position: absolute;
        top: 100px;
        right: 19px;
        font: 15px/16px var(--font-reg);
        color: white;
        width: 171px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .shield-reward{
        position: absolute;
        bottom: 3px;
        right: 63px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .shield-reward .amount{
        color: yellow;
        font: 700 24px/32px var(--font-reg);
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: 8px;
        left: 4px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .shield-reward .shield{
        background: url('../images/new/upgrade point_icon_256_256.png');
        background-size: 100% 100%;
        width: 52px;
        height: 52px;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .extra-gains-holder{
        text-align: center;
        padding-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .extra-gains{
        display: inline-block;
        margin-top: 15px;
        text-align: center;
        font: 700 15px/17px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .extra-gains.animated{
        animation: scaleInOutSpec 1.0s ease-in-out 2;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .buttons-holder .button-style{
        margin-left: 20px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .buttons-holder .button-style:nth-child(1){
        margin-left: 0px;
    }

#dynamicDOM .popup-holder[data-type="battle_start"] .popup-content{
    height: 325px;
}
#dynamicDOM .popup-holder[data-type="battle_start"] .popup-content-holder{
    text-align: center;
    width: 585px;
    top: 28%;
    /*height: 461px;*/
}
#dynamicDOM .popup-holder[data-type="battle_start"] .title{
    text-align: left;
    padding-left: 28px;
}
#dynamicDOM .popup-holder[data-type="battle_start"] .battle-start-holder > div:nth-child(1){
    margin-top: 60px;
    font: 700 17px/20px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="battle_start"] .battle-start-holder > .button-style{
    font: 22px/22px var(--font-reg);
    padding: 14px 26px;
    margin-top: 38px;
}
#dynamicDOM .popup-holder[data-type="battle_start"] .battle-start-holder > .button-style:hover{
    color: black;
    cursor: pointer;
}
#dynamicDOM .popup-holder[data-type="battle_start"] .battle-start-holder > div:nth-child(3){
    background: rgba(255, 255, 255, 0.7);
    color: black;
    position: absolute;
    bottom: 0px;
    padding: 7px;
    padding-left: 46px;
    font: 700 15px/20px var(--font-reg);
    width: calc(100% - 53px);
    text-align: left;
}
#dynamicDOM .popup-holder[data-type="battle_start"] .battle-start-holder > div:nth-child(3) > .button-style{
    margin-left: 40px;
    padding: 2px 15px;
}








#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .header{
    text-align: left;
    font: 16px/20px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .popup-content-holder {
    /*height: 475px;*/
    width: 710px;
}

#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrades-holder {
    /*width: 56%;*/
    display: inline-block;
    margin: 0 auto;
    margin-top: 30px;
    color: black;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .tabs{
    padding-left: 15px;
    padding-top: 11px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .tabs .tab{
    margin-right: 0px;
    margin-left: 10px;
    min-width: 99px;
    font: 13px/23px var(--font-btn);
}
#gameContent.setup_troops #gameUI #dynamicDOM .popup-holder[data-type="corpus_upgrades"] .scroll-holder{
    height: 100%;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .seperator-line {
    margin: 0 auto;
    background: url('../images/corpus_upgrades_white_line.png');
    width: 256px;
    height: 24px;
    margin-top: 0px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .vertical-line {
    margin: 0 auto;
    background: url('../images/new/corpus_menu_white_line_short.png');
    width: 1px;
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .column-holder{
    margin-top: -3px;
    text-align: center;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .left-column,
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .right-column{
    display: inline-block;
    /*width: 100px;*/
    width: 165px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .left-column{
    /*margin-left: 68px;*/
    /*margin-left: 278px;*/
    margin-left: 60px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .right-column{
    vertical-align: top;
    margin-left: 94px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .buttons-holder{
    /*margin-top: 100px;*/
    padding: 4px 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    overflow: auto;
    margin-top: 49px;
    background: rgba(255, 255, 255, 0.15);
    max-width: 100%;
    margin-bottom: 4px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .buttons-holder .reset-points{
    margin-right: 20px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .buttons-holder > div {
    margin-left: 10px;
    /*float: right;*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .buttons-holder .save {
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box {
    background: white;
    text-align: center;
    /*width: 132px;*/
    width: 150px;
    border: 1px solid black;
    padding: 3px 5px;
    position: relative;
    margin-top: 4px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.dmg {
    background: #509fca;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.hp {
    background: #86d993;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.distant {
    margin-top: 1px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .mini-aura{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 16px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .mini-aura.dmg{
    background: url('../images/new/corpus_BG3.png') center no-repeat;
    background-size: 100% 100%;
    left: 13px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .mini-aura.hp{
    background: url('../images/new/corpus_BG2.png') center no-repeat;
    background-size: 100% 100%;
    left: 120px;
}
/*#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .left-holder .upgrade-box:first-child {*/
    /*margin-top: 0px;*/
/*}*/
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.head {
    background: linear-gradient(to right, #885434 0%, #885434 80%, #3e2d1d 100%);
    color: white;
    font: 14px/16px var(--font-reg);
    border: 2px solid black;
    margin-bottom: -4px;
    width: 148px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .title{
    display: inline-block;
    font: 14px/16px var(--font-title)
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .current-value {
    display: inline-block;
    font: 700 14px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .added-value {
    display: inline-block;
    color: #008000;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .item {
    display: inline-block;
    /*width: 30px;*/
    /*background: red;*/
    margin-left: 3px;
    margin-top: 3px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .item.disabled {
    opacity: 0.5;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .tabs {
    /*width: 70%;*/
    /*margin-left: 27%;*/
    width: 74%;
    margin-left: 22%;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget {
    display: inline-block;
    text-align: center;
    width: 150px;
    /*height: 131px;*/
    position: relative;
    margin-left: 1px;
    /*margin-top: -40px;*/
    /*margin-top: -16px;*/
    vertical-align: top;
    border: 1px solid #41535C;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .title{
    /*position: absolute;
    top: -9px;
    background: black;
    width: 109%;
    left: -6px;
    z-index: 1;
    font: 14px/16px var(--font-title);*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget > .background-layer{
    width: 100%;
    height: 131px;
    position: absolute;
    /*top: 27px;*/
    left: 0px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget > .background-layer[data-type="0"]{
    background: #388132;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget > .background-layer[data-type="1"]{
    background: #a97b4d;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget > .background-layer[data-type="2"]{
    background: #f7f8f9;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget > .background-layer[data-type="3"]{
    background: #4d7ba9;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .circle{
    /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    position: relative;
    top: 6px;*/
}

#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .circle{
    /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    width: 105px;
    height: 105px;
    position: relative;
    background-size: 100% 100%;
    margin-top: 10px;*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .circle.hp{
    /*background: url('../images/new/corpus_BG2.png') center no-repeat, url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .circle.dmg{
    /*background: url('../images/new/corpus_BG3.png') center no-repeat, url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;*/
}

#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget > div{
    /*display: inline-block;*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .plan-image{
    /*position: relative;
    width: 120px;
    height: 47px;
    display: inline-block;
    top: 28px;
    left: -11px;
    transform: rotate(-17deg);*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .amount-holder{
    /*position: absolute;
    text-align: center;
    width: 87px;
    background: url('../images/new/combat_tank_amount_bar.png') center no-repeat;
    background-size: 100% 100%;
    left: 23px;
    top: 114px;
    color: white;*/
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .right-part{
    display: inline-block;
    position: absolute;
    top: 7px;
    right: 87px;
    font: 15px/16px var(--font-title);
    color: var(--clr-green-primary);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .plan-image > div {
    width: 80px;
    height: 40px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .plan-image > div.ghost {
    opacity: 0.24;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .corpus-widget .exp-points{
    color: var(--clr-green-primary);
    font: 16px/16px var(--font-title);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.first {
    background: linear-gradient(to right, #885434 0%, #885434 80%, #3e2d1d 100%);
    margin: 0 auto;
    color: white;
    font: 14px/16px var(--font-reg);
    border: 2px solid black;
    padding-top: 4px;
    width: 50%;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.first > span{
    font: 700 19px/19px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.first span.total{
    font: 700 21px/21px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.first .shield{
    background: url('../images/new/upgrade point_icon_256_256.png');
    background-size: 100% 100%;
    width: 66px;
    height: 72px;
    position: absolute;
    top: -14px;
    left: -35px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box.first .shield.right{
    left: 219px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .down-sign,
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .up-sign{
    position: absolute;
    width: 20px;
    height: 18px;
    border: 1px solid black;
    font: 14px/11px var(--font-reg);
    border-image-slice: 1;
    /*background: rgba(28, 215, 235, 0.79);*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
    padding-top: 3px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .down-sign{
    left: -11px;
    top: 8px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .down-sign:hover,
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .up-sign:hover{
    transform: scale(1.2);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .up-sign {
    right: -12px;
    top: 8px;
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .down-sign.disabled, #dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .up-sign.disabled {
    /*opacity: 0.7;*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .up-sign:after {
    content: attr(data-upg-cost);
    display: inline-block;

    position: absolute;
    top: 3px;
    bottom: 3px;
    right: -31px;
    width: 19px;
    padding-right: 11px;

    background: url('../images/new/upgrade point_icon_256_256.png') no-repeat right center, rgba(255,255,255,0.7);
    background-size: auto 100%;
    text-align: center;
    font: 700 10px/14px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="corpus_upgrades"] .upgrade-box .down-sign:after {
    content: attr(data-upg-cost);
    display: inline-block;

    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -31px;
    width: 19px;
    padding-right: 11px;

    background: url('../images/new/upgrade point_icon_256_256.png') no-repeat right center, rgba(255,255,255,0.7);
    background-size: auto 100%;
    text-align: center;
    font: 700 10px/14px var(--font-reg);
}


#dynamicDOM .popup-holder[data-type="pending_parts"] .title{
    text-align: left;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .title .pending-full{
    background: url('../images/new/warning_icon.png');
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .tabs{
    padding-bottom: 23px;
    width: 235px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .tabs .tab:nth-child(2){
    margin-left: 11px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .tabs-holder .remove-all-parts{
    position: absolute;
    right: 19px;
    top: 4px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .popup-content-holder{
    /*width: 37%;*/
    top: 0;
    bottom: 0;
    margin: auto;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .popup-content{
    padding: 10px;
    padding-left: 27px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .popup-content .scroll-holder{
    /*height: 470px;*/
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data{
    background: rgba(255, 255, 255, 0.88);
    margin-bottom: 0px;
    margin-top: 2px;
    border: none;
    color: black;
    padding: 6px;
    /*padding-bottom: 28px;*/
    padding-bottom: 32px;
    position: relative;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data > div {
    display: inline-block;
    vertical-align: top;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .image{
    width: 61px;
    height: 31px;
    margin: 5px 10px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .stats {
    width: 276px;
    font: 700 14px/16px var(--font-reg);
    text-align: left;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .stats {
    width: 276px;
    font: 700 14px/16px var(--font-reg);
    text-align: left;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .stats .value{
    font: 700 14px/16px var(--font-reg);
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .costs {
    position: absolute;
    right: 18px;
    top: 3px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .costs .part-costs{
    text-align: right;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .add-to-inventory {
    position: absolute;
    right: 18px;
    bottom: 3px;
}
#dynamicDOM .popup-holder[data-type="pending_parts"] .part-data .scrap {
    position: absolute;
    right: 158px;
    bottom: 5px;
    width: 18px;
    height: 17px;
    padding: 0;
    background: url('../images/new/trash_icon.png');
}


/* END popups */
/* START quick popups */
#dynamicDOM .quick-popup-holder .category {
    margin-bottom: 5px;
    border: 2px solid black;
    padding: 5px 20px;
    background: rgba(255,255,255, 0.88);
    text-transform: uppercase;
}
#dynamicDOM .quick-popup-holder .category .label {
    display: inline-block;
    vertical-align: middle;
    width: 95px;
    margin-right: 20px;
    color: black;
    font: 700 12px/14px var(--font-reg);
    text-align: right;
}
#dynamicDOM .quick-popup-holder .additional-options {
    margin-bottom: 10px;
}
#dynamicDOM .quick-popup-holder .additional-options .setting {
    font: 700 12px/20px var(--font-reg);
}
/*#dynamicDOM .quick-popup-holder .setting {
    display: inline-block;
    padding: 5px;
    background: #95681c;
    color: white;
    margin-right: 10px;
    width: 25px;
    text-align: center;
    font: 12px/14px var(--font-reg);
}
#dynamicDOM .quick-popup-holder .setting.active {
    background: #1c952b;
}*/
#dynamicDOM .quick-popup-holder[data-type="demolish"] .popup-content {
    text-align: center;
}
#dynamicDOM .quick-popup-holder .demolish-amount {
    margin: 10px 0;
}
#dynamicDOM .quick-popup-holder .demolish-amount > div{
    width: 30px;
    margin-right: 10px;
}
#dynamicDOM .quick-popup-holder .refund-amount {
    margin-bottom: 10px;
    font: 700 14px/16px var(--font-reg);
}
#dynamicDOM .quick-popup-holder .demolish-building {
    margin-top: 20px;
}

/* research quick popup */
#dynamicDOM .quick-popup-holder[data-type="research_legend"] {
    min-width: auto;
    background: #646464;
}
#dynamicDOM .quick-popup-holder[data-type="research_legend"] .popup-content {
    padding: 10px;

}
#dynamicDOM .quick-popup-holder .research-icon {
    margin: 5px;
    color: white;
    font: 700 14px/16px var(--font-reg);
}


/*filter start*/
#dynamicDOM .quick-popup-holder[data-type="filter"] .popup-content{
    padding-top: 2px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder{
    background: #3e3e3e;
    /*border: 1px solid black;*/
    border-radius: 3px;
    padding: 14px 30px 14px 30px;
    margin-top: 15px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder[data-type="1"] .title{
    font: 15px/30px var(--font-title);
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder[data-type="1"] select{
    font: 14px/20px var(--font-title);
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder select{
    width: 54%;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder .numerical{
    height: 32px;
    margin-bottom: 5px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder > div > div{
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder .title{
    color: white;
    width: 105px;
    text-align: right;
    padding-right: 10px;
    font: 15px/30px var(--font-title);
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .direction{
    width: 22px;
    height: 18px;
    background: url('../images/new/filter_buttons.png');
    margin-right: 26px;
    margin-top: 6px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .direction.smaller{
    background-position: -22px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .direction.larger{
    background-position-x: 0px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder{
    display: inline-block;
    background: url('../images/new/citizens1_amount_show_bg.png');
    background-size: 100%;
    min-width: 120px;
    height: 31px;
    /*border-radius: 5px;*/

    background: #1F1F1F;
    border: 1px solid #41535C;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder > div{
    display: inline-block;
    vertical-align: top;
    height: 30px;
    padding: 0;
    background-clip: content-box;
    color: white;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder .button {
    width: 26px;
    height: 26px;
    border: 2px solid;
    border-image-slice: 1;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder .button.disabled {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder .amount {
    border: none;
    height: 31px;
    /*width: calc(100% - 64px);*/
    width: calc(100% - 60px);
    text-align: center;
    color: white;
    background: none;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder input::-webkit-outer-spin-button,
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder input {
    -moz-appearance: textfield;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder .btn-minus {
    border-right: 1px solid #41535C;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .select-filter-holder .btn-plus {
    border-left: 1px solid #41535C;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] {
   min-width: 360px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .selection .select-filter-holder .amount {
    width: 100px;
}
#dynamicDOM .quick-popup-holder[data-type="filter"] .reset-filters{
    margin-top: 14px;
    margin-left: 214px;
}


#dynamicDOM .quick-popup-holder[data-type="sort"] .popup-content{
    padding-top: 2px;
}
#dynamicDOM .quick-popup-holder[data-type="sort"] .group-holder{
    background: #3e3e3e;
    /*border: 1px solid black;*/
    border-radius: 3px;
    padding: 7px 30px 14px 30px;
    margin-top: 15px;
    color: white;
}
#dynamicDOM .quick-popup-holder[data-type="sort"] .group-holder .group-title{
    font: 15px/17px var(--font-title);
    padding-bottom: 5px;
}
#dynamicDOM .quick-popup-holder[data-type="sort"] .brick:before {
    width: 61px;
    height: 20px;
    background: url('../images/settings_on_off_full_buttons.png');
    background-position-x: -61px;
    border: none;
}
#dynamicDOM .quick-popup-holder[data-type="sort"] .brick.off:before{
    background: url('../images/settings_on_off_full_buttons.png');
    background-position-x: 0px;
    border: none;
}










.research-icon:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 20px;
    /*background: url('../images/research/buttons_research_tree.png');*/
    /*background: url('../images/research/research_buttons_sprite_ea_update.png');*/
    background: url('../images/new_ui/game/research/research_sprite_updated.png');
    background-position-y: 0;
    background-size: 400% 600%;
    vertical-align: middle;
}
.research-icon[data-type="unlocks"]:before {
    /*background-position-x: 0;*/
    background-position-x: 0;
}
.research-icon[data-type="qol"]:before {
    /*background-position-x: -100%;*/
    background-position-x: -100%;
}
.research-icon[data-type="skill"]:before {
    /*background-position-x: -200%;*/
    background-position-x: -300%;
}
.research-icon[data-type="stats"]:before {
    /*background-position-x: -300%;*/
    background-position-x: -200%;
}
.research-icon[data-type="misc"]:before {
    /*background-position-x: -400%;*/
    background-position-x: -200%;
}

/* research details */
#dynamicDOM .quick-popup-holder.expanded-icon .icon-holder {
    width: 180px;
    height: 120px;
}
#dynamicDOM .quick-popup-holder.expanded-icon .grid-box.small {
    flex-basis: 180px;
}
#dynamicDOM .quick-popup-holder .buy-box {

    float: right;
    text-align: center;
    margin-bottom: 4px;
    /*margin-bottom: 20px;*/
}
#dynamicDOM .quick-popup-holder .buy-box .upgrade-cost {
    text-align: center;
}
#dynamicDOM .quick-popup-holder .buy-box .button {
    padding: 3px 20px;
    font: 20px/36px var(--font-btn);
}
#dynamicDOM .quick-popup-holder .demo-locked {
    position: absolute;
    bottom: 7px;
    left: 41px;
    right: 30px;
    color: var(--clr-red-primary);
    font: 12px/13px var(--font-reg);
    max-width: calc(100% - 40px);
}
#brokendelibaratelyDOMHERE #dynamicDOM .quick-popup-holder[data-type="research_details"] .popup-content .bound-box {
    /* TODO is margin OK here?*/
    /*border: 3px solid black;*/
    padding: 10px;
    background: rgba(255,255,255,0.7);
    color: white;
    overflow: auto;

    /*background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);*/
}
#dynamicDOM .quick-popup-holder .error {
    font-size: 12px;
    line-height: 20px;
    color: var(--clr-red-primary);
}
/* colony details holder */
.change-amount-holder {
    display: inline-block;
    background: url('../images/new/citizens1_amount_show_bg.png');
    background-size: 100%;
    min-width: 100px;
    height: 18px;
    border-radius: 5px;
    margin: 5px 0 10px 0 ;
}
.change-amount-holder > div {
    display: inline-block;
    vertical-align: top;
    line-height: 16px;
}
.change-amount-holder .minus,
.change-amount-holder .plus {
    width: 21px;
    height: 18px;
    padding: 0;
    background: url('../images/new/button2_arrow_down.png') no-repeat;
    background-size: 100% 100%;
}
.change-amount-holder .plus {
    background: url('../images/new/button2_arrow_up.png') no-repeat;
    background-size: 100% 100%;
}
.change-amount-holder .amount {
    border: none;
    width: 100px;
    text-align: center;
    color: white;
}
#dynamicDOM .quick-popup-holder[data-type="military"] .quick-send-options {
    text-align: right;
}
#dynamicDOM .quick-popup-holder[data-type="military"] .quick-send-options > div {
    display: inline-block;
    margin-left: 10px;
}
#dynamicDOM .quick-popup-holder[data-type="military"] .corpuses {
    padding: 10px;
    margin: 10px 0;
    background: rgba(0,0,0,0.5);
}
#dynamicDOM .quick-popup-holder[data-type="military"] .corpuses > div:not(:last-child) {
    margin-right: 10px;
}
#dynamicDOM .quick-popup-holder[data-type="military"] .corpus input {
    max-width: 80px;
    text-align: center;
    margin-top: 5px;
}
#dynamicDOM .quick-popup-holder[data-type="military"] .error-note,
#dynamicDOM .quick-popup-holder[data-type="economic"] .error-note {
    min-height: 16px;
    color: yellow;
    font: 700 12px/16px var(--font-reg);
}

/* end ccolony details holder */
/* timelapse config */

#dynamicDOM .quick-popup-holder[data-type="timelapse_config"] {
    max-width: clamp(200px, calc(100% - 40px), 1200px);

}
#dynamicDOM .quick-popup-holder[data-type="timelapse_config"] .set-group-title {
    background: #3e3e3e;
    padding: 5px;
    margin: 5px 0;
}
/* end timelapse config
/* END quick popups*/

/* completed note */
#dynamicDOM .completed-note {
    position: absolute;
    left: 0;
    bottom: 33px;
    background: #3e3e3e;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    padding: 5px 10px 10px 0px;
    text-align: left;
    width: 200px;
    transform: translateX(-250px);
    transition: transform 1s ease-out;
}
#dynamicDOM .completed-note.slide-right {
    transform: translateX(0px);
}
#dynamicDOM .completed-note .title {
    margin-bottom: 0px;
    color: white;
    font: 14px/18px var(--font-title);
    text-align: center;
}
#dynamicDOM .completed-note .close {
    position: absolute;
    right: 5px;
    top: 5px;
}
#dynamicDOM .completed-note > .column-holder {
    align-items: flex-end;
}
/*#dynamicDOM .completed-note .title:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../images/main_menu/64_64_playpage_icons_updated.png');
    background-size: 1600% auto;
    background-position-x: -1200%;
    margin-right: 10px;

    position: relative;
    top: 7px;
}*/
#dynamicDOM .completed-note .ach-image {
    position: relative;
    background: url('../images/trophy_icon.png') center calc(100% - 15px) no-repeat;
    width: 100px;
    height: 80px;
}
#dynamicDOM .completed-note .ach-image .amount {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    height: 16px;

   background: url('../images/achievements_frame_below_trophy.png');
    background-size: 100% 100%;
   text-align: center;
   font: 700 13px/15px var(--font-reg);
    color: black;
}
#dynamicDOM .completed-note .desc {
    color: white;
    font: 12px/16px var(--font-reg);
    text-align: center;
}
#dynamicDOM .completed-note .desc-part {
    line-height: 14px;
}
#dynamicDOM .completed-note .desc-part:not(:last-child) {
    margin-bottom: 5px;
}
#dynamicDOM .completed-note .desc-part > div {
    color: #d25826;
    font-weight: 700;
}
/* end completed note*/

/* START overlay timelapse */

#dynamicDOM .extra-overlay {
    position: absolute;
    top: 46px;
    left: 0;
    width: calc(100% - 0px);
    height: calc(100% - 46px);
    /*border: 2px solid white;*/
    pointer-events: none;
}

#dynamicDOM .extra-overlay.paused {
    pointer-events: auto;
    /*/background: url('../images/new/pause_time_lapse.png') calc(50%) calc(50% - 65px) no-repeat, rgba(0,0,0,0.5);*/
    background: url('../images/new/pause_icon_big.png') calc(50%) calc(50% - 25px) no-repeat, rgba(0,0,0,0.5);
    background-size: auto 50%;
}
#dynamicDOM .extra-overlay .timelapse-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(255,255,255, 0.5);
    text-align: center;
    pointer-events: all;
    font: 18px/30px var(--font-title);
}
#dynamicDOM .extra-overlay .timelapse-header .title {
    display: inline-block;
}
#dynamicDOM .extra-overlay .timelapse-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*height: 65px;*/
    /*background: rgba(255,255,255, 1);*/
    text-align: center;
    pointer-events: all;
    background: url('../images/new/popup_bg.png') bottom center no-repeat;
    background-size: 100% 100%;
    color: white;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;

    height: 50px;
    overflow: hidden;
}
#dynamicDOM .extra-overlay .timelapse-controls > div {
    flex: 1 1 calc(50% - 200px);
}
#dynamicDOM .extra-overlay .timelapse-controls .header {
    height: 30px;
    padding: 5px 10px;
    font: 18px/30px var(--font-title);
    border: 2px solid black;
    background: rgba(0,0,0, 0.6);
}
#dynamicDOM .extra-overlay .timelapse-controls .status {
    display: block;
    text-align: center;
    font: 18px/30px var(--font-reg);
    /*background: rgba(0, 125, 182, 1);*/
    color: white;
}
#dynamicDOM .extra-overlay .timelapse-controls .status:before {
    content: 'ACTIVE!!';
    font: 700 18px/30px var(--font-reg);
    color: #ff7f00;
    display: inline-block;
    float: left;
    margin-left: 10%;
}
#dynamicDOM .extra-overlay .timelapse-controls .status:after {
    content: 'ACTIVE!!';
    font: 700 18px/30px var(--font-reg);
    color: #ff7f00;
    display: inline-block;
    float: right;
    margin-right: 10%;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls {
    /*margin: 0 auto;
    width: 450px;
    height: 51px;
    padding-top: 10px;
    max-width: 100%;*/
    /*background: url('../images/new/time_lapse_frame.png') bottom center no-repeat;
    background-size: 100% 100%;*/

    flex: 0 0 400px;
}
#dynamicDOM .extra-overlay.paused .status:after,
#dynamicDOM .extra-overlay.paused .status:before{
    content: '';
    display: none;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls > div {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    font: 700 15px/25px var(--font-reg);
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls .speed select,
#dynamicDOM select[data-action-type="change_game_speed"] {
    width: 70px;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls .play-pause {
    position: relative;
    width: 80px;
    padding-right: 20px;
    text-align: center;
    color: white;
    background: url('../images/new/build_upgrade_button.png') no-repeat;
    background-size: 100% 100%;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls .play-pause .icon {
    position: absolute;
    right: -10px;
    top: -7px;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls .play-pause.pause .icon {
    background-position-x: -2900%;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls .play-pause:hover {
    color: black;
}
#dynamicDOM .extra-overlay .timelapse-controls .center-controls .play-pause:hover .icon {
    filter: brightness(127%);
}
#gameUI #dynamicDOM .extra-overlay .close {
    position: absolute;
    right: 20px;
    top: 10px;
    font: 20px/25px var(--font-btn);
}
#dynamicDOM .extra-overlay .close:hover {
    color: white;
}
#dynamicDOM .extra-overlay .config {
    /*position: absolute;
    right: 20px;
    bottom: 10px;*/
    color: white;
    text-align: right;
}
#dynamicDOM .extra-overlay .config > div.on {
    background: #1c952b;
}
#dynamicDOM .extra-overlay .timelapse-config {
    /*position: absolute;
    bottom: 65px;
    left: 0;*/
    margin: 5px auto;
    /*width: 450px;*/
    max-width: 100%;
    color: white;
    pointer-events: all;
}
/*
#dynamicDOM .extra-overlay .timelapse-config .setting {
    color: white;
}
#dynamicDOM .extra-overlay .timelapse-config .setting:before {
    width: 16px;
    height: 16px;
    background: #1c952b;
}
#dynamicDOM .extra-overlay .timelapse-config .setting.off:before {
    background: #952b1c;
}*/
/* END overlay timelapse */
/* jobs/resources */
/*modular*/
#gameUI .content-holder .section {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: calc(100% - 18px);
}
#gameUI .content-holder .section.manage-plans, #gameUI .content-holder .section.combine-parts{
    display: none;
    max-width: 100%;

    border: 2px solid #41535C;
    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    background-size:  100% 100%;
}
#gameUI .content-holder .section.manage-plans.active, #gameUI .content-holder .section.combine-parts.active{
    display: block;
}
#gameUI .content-holder .section.combine-parts .tab-data{
    /*background: rgba(255, 255, 255, 0.88);*/
    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    background-size:  100% 100%;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data{
    /*background: rgba(255, 255, 255, 0.88);*/
    padding: 35px;
    padding-top: 10px;
    text-align: center;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data > div{
    display: block;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-part {
    /*display: inline-block;*/
    margin: 0 auto;
    width: 110px;
    height: 101px;
    background: white;
    text-align: center;
    padding-top: 9px;
    border: 2px solid black;
    color: black;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-part .type{
    font: 16px/18px var(--font-reg);
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-part .image {
    width: 80px;
    height: 40px;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .currently-combined{
    font: 16px/18px var(--font-title);
    padding-bottom: 10px;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .currently-combined .combine-number{
    font: 21px/18px var(--font-title);
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .currently-combined .icon.help{
    position: absolute;
    top: 6px;
    right: 27px;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .combined-stats{
    /*position: absolute;*/
    padding: 20px;
    text-align: center;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .combined-stats .title{
    color: white;
    font: 17px/18px var(--font-title);
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .combine-now{
    bottom: 10px;
    left: 45%;
    width: 150px;
    margin: 0 auto;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-stat{

}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-stat .added-bonus{
    color: var(--clr-green-primary);
    font: 700 14px/16px var(--font-reg);
    margin-left: 5px;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-stat .min-bonus{
    color: var(--clr-blue-primary);
    font: 700 14px/16px var(--font-reg);
    margin-left: 5px;
}
#gameUI .content-holder .section.combine-parts .tab-data .part-data .single-stat .maxed-text{
    color: var(--clr-red-primary);
    font: 700 14px/16px var(--font-reg);
    margin-left: 5px;
}
#gameContent.resources .content-holder .section.jobs {
    display: block;
    /*margin: 5px auto;*/
    /* old centering*/
    /*max-width: calc(32% - 8px);
    margin: 5px auto 5px calc(33% - 8px);*/

    /* width is 18px less becuaseo f scroll bar, then account for 2x 15 margin, and divide by 3 columns*/
    max-width: calc((100% - 18px) * (98 / 300));
    /* left margin is basically width of column + 1x 1% margin*/
    margin: 5px auto 5px calc((100% - 18px) * (98 / 300 + 1/100));
}
/*modular*/
#gameUI .content-holder .section.buildings,
#gameUI .content-holder .section.produce-plans {
    margin-right: 20px;
    max-width: calc(60%);
}
#gameUI .content-holder .section.buildings{
    width: 43%;
}
#gameUI .content-holder .section.produce-plans {
    margin-top: 10px;
    max-width: calc(98%);
}
#gameUI .content-holder .section.produce-plans > .box-holder{
    margin-top: 10px;
    /*max-width: calc(48%);*/
    width: calc(44%);
    display: inline-block;
    vertical-align: top;
}
#gameUI .content-holder .section.produce-plans > .box-holder:nth-child(2n){
    margin-left: 20px;
}
#gameContent.public_buildings .content-holder .box-holder,
#gameContent.product_stock .content-holder .box-holder,
#gameContent.global_market .content-holder .box-holder,
#gameContent.change_product .content-holder .box-holder {
    margin-bottom: 5px;
}
/*modular*/
#gameUI .content-holder .section.queues {
    /*max-width: calc(40% - 20px);*/
    width: calc(43%);
}
/*modular*/
#gameContent.build_queue #gameUI .content-holder .section.queues {
    max-width: none;

    border: 2px solid #41535C;
    box-sizing: border-box;
}
/*modular*/
#gameUI .content-holder .assign-options {
    position: absolute;
    right: 10px;
    top: -36px;
    color: #0199e2;
}
/*modular*/
#gameUI .content-holder .assign-options > div {
    display: inline-block;
    margin-right: 10px;
}
/*modular*/
#gameUI .content-holder .assign-options .current-setting span {
    display: inline-block;
    background: white;
    padding: 2px 5px;
    width: 50px;
    text-align: center;
}
/*modular*/
#gameUI .content-holder .section > .title,
#gameUI .content-holder .sub-section > .title {
    padding: 2px 5px;
    margin: 0;
    color: white;
    /*background: rgba(28,215,235, 0.20);*/


    background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    font: 20px/32px var(--font-title);
    border-bottom: 1px solid #41535C;
}
/*#gameUI .content-holder .section > .title {*/
    /*margin-bottom: 10px;*/
/*}*/
/*modular*/
#gameUI .content-holder .section > .sub-title {
    margin-bottom: 10px;
    margin-top: 10px;
    color: white;
}
/*modular*/
#gameUI .content-holder .box-holder {
    /*display: flex;*/
    /*max-width: 1000px;*/
    margin-bottom: 5px;
}
#gameUI .content-holder .overview .box-holder {
    margin-bottom: 0;
}
#gameUI .content-holder .section[data-type="auto_fire"] .box-holder {
    display: flex;
    width: 45%;
}
/* COLUMNATTEMPT
#gameUI .content-holder .sub-section.buildings .box-holder {
    display: block;
}
#gameUI .content-holder .resources .extended-data .box-holder {
    display: block;
}*/
/*modular*/
#gameUI .content-holder .box-data {
    position: relative;
    /*background: rgba(255,255,255, 0.22);
    background: rgba(255,255,255, 0.88);*/
    /*padding: 5px;*/
    height: auto;
    color: white;
    /*border: 1px solid rgba(28,215,235,0.19);*/

    /*margin-bottom: 5px;*/

    /*width: 400px;*/
   /*max-width: 100%;*/
    flex-grow: 1;
}
/*modular*/
#gameUI .content-holder .box-data:last-child {
    margin-bottom: 0;
}
/*modular*/
#gameUI .content-holder .public-buildings .box-data {
    /*min-height: 60px;*/
}
/*modular*/
#gameUI .content-holder .section.buildings .box-data {
    /*min-height: 60px;*/
    /*min-height: 174px;*/
    padding: 0;
    /*border: none;*/
}
#gameUI .content-holder .box-data.currently-selected {
    background: rgba(250, 125, 45, 0.6);
}
/*modular*/
#gameUI .content-holder .public-buildings .box-data[data-type="buildings"] {
    padding-top: 15px;
}
#gameUI .content-holder .section.produce-plans .box-data {
    padding: 0px;
    /*background: rgba(255, 255, 255, 0.88);*/
    /*color: black;*/
}
#gameUI .content-holder .section.produce-plans .box-data.empty {
    /*background: rgba(255, 255, 255, 0.88);*/
    padding: 5px;
}
#gameUI .content-holder .box-data[data-subtype="explorer"]
/*#gameUI .content-holder .box-holder[data-type="products"] .box-data*/{
    background: rgba(255,255,255, 0.22);
    color: white;
    margin-bottom: 5px;
}
#gameContent.product_stock .content-holder .box-data {
    padding: 5px;
    /*background: rgba(255,255,255, 0.88);*/
    background: #1F1F1F;
}
#gameContent.produce .content-holder .produce-plans .box-data {
    /*background: rgba(255,255,255, 0.88);*/
    /*padding: 10px;*/
}
#gameContent.produce .content-holder .produce-plans .box-data[data-type="corpuses"] {
    padding: 0;
}
#gameContent.produce .content-holder .produce-plans .box-data[data-type="corpuses"] .desc{
    padding: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
}
#gameContent.produce .content-holder .produce-plans .box-data[data-type="corpuses"] .desc .unit-data{
    padding: 0px;
    min-height: 70px;
    height: auto;
    margin-left: 0px;
}
#gameContent.produce .content-holder .produce-plans .box-data[data-type="corpuses"] .circle{
    background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    width: 80px;
    height: 80px;
    position: relative;
    background-size: 100% 100%;
}
#gameContent.produce .content-holder .produce-plans .box-data[data-type="corpuses"] .circle .plan-image{
    width: 76px;
    height: 38px;
    top: 23px;
    left: -4px;
    transform: rotate(-16deg);
}
#gameContent.produce .content-holder .box-data,
#gameContent.produce .content-holder .produce-plans .box-data[data-type="corpuses"],
#gameContent.factories .content-holder .box-data,
#gameContent.setup_troops .content-holder .box-data {
    background: none;
}
#gameContent.produce .content-holder .box-data[data-type="plansFull"] {
    border: none;
}
#gameContent.setup_troops .sub-header {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(28,215,235,0.22);
}
/*#gameUI .content-holder .section.buildings .box-holder {*/
    /*width: 50%;*/
/*}*/
/*modular*/
#gameUI .content-holder .box-data .desc {
    max-width: calc(100% - 100px);
}
#gameUI .content-holder .box-data .left-info {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 50%;
    vertical-align: top;
    max-width: 300px;

    height: 100%;
}
/*modular*/


#gameUI .content-holder .section.buildings .box-data .desc,
#gameUI .content-holder .section.produce-plans .box-data .desc,
#gameUI .content-holder .section.queues .desc,
#gameUI .content-holder .box-holder[data-type="setup-troops"] .desc{
    /*border: 1px solid rgba(28,215,235,0.60);*/
    /*background: rgba(255, 255, 255, 0.88);*/
    /*color: black;*/
    /*padding: 10px;*/
}
#gameUI .content-holder .section.queues .desc {
    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
}
#gameUI .content-holder .section.queues .desc .sub-title {
    color: #B6B6B6;
    font: 700 14px/25px var(--font-reg);
}
#gameUI .content-holder .section.queues .desc > div {
    padding: 0px 0px 0px 10px;
}
#gameUI .content-holder .section.queues .desc > div:not(:last-child) {
    border-bottom: 1px solid #41535C;
    box-sizing: border-box;
}
#gameUI .content-holder .section.queues .desc > div {
    font: 18px/25px var(--font-title);
}
/*#gameUI .content-holder .section.buildings .box-data .title,
#gameUI .content-holder .section.produce-plans .box-data .title,*/
#gameUI .content-holder .section.queues .title,
#gameUI .content-holder .box-holder[data-type="setup-troops"] .title,
#gameContent.setup_troops .content-holder .right-column .title
{
    margin-bottom: 0px;
    /*padding: 4px 4px 4px 10px;*/
    /*background: rgba(28, 215, 235, 0.31);*/
    background: url('../images/new_ui/game/title_bg_dark.png'), #1F1F1F;
    background-size: 100% 100%;
    /*font: 20px/35px var(--font-title);*/
    font: 20px/32px var(--font-title);

    border-bottom: 1px solid #41535C;
}
#gameContent.build_queue #gameUI .content-holder .section.queues .title {
    position: relative;
    border-bottom: 1px solid #41535C;
}
#gameContent.produce #gameUI .content-holder .section.queues .title {
    position: relative;
    margin-left: 10px;
}
#gameContent.build_queue #gameUI .content-holder .section.queues .title .btn,
#gameContent.produce #gameUI .content-holder .section.queues .title .btn {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    font: 11px/20px var(--font-reg);
    height: 20px;
    padding: 0 5px;
}

#gameContent #gameUI .content-holder .section.queues.queue-empty .title .btn {
    display: none;
}

#gameContent.setup_troops .content-holder .right-column .title {
    height: 34px;
    /*line-height: 32px;*/
    font: 16px/20px var(--font-title);
}
#gameContent.setup_troops .content-holder .right-column .title > div:nth-child(1){
    position: relative;
    top: -1px;
    font: 13px/16px var(--font-reg);
}
#gameContent.setup_troops .content-holder .left-column .box-holder .box-data {
    padding: 0;
    margin-bottom: 5px;
}
#gameContent.setup_troops .content-holder .left-column .box-holder .box-data.selected {
    border: 4px solid var(--clr-green-primary);
}
#gameUI .content-holder .box-data[data-type="jobs"] .title,
/*#gameUI .content-holder .box-holder[data-type="products"] .title,*/
#gameContent.public_buildings .content-holder .box-data[data-type="buildings"] .title,
#gameContent.global_market .content-holder .box-data .title,
#gameContent.change_product .content-holder .box-data .title {
    color: white;
    width: max-content;
}
#gameUI .content-holder .box-data[data-subtype="explorer"] .title {
    color: white;
    width: max-content;
}
#gameContent.global_market .content-holder .box-data .title {
    font: 16px/20px var(--font-title);
}
#gameUI .content-holder .section.queues .box-data{
    color: white;
    /*padding: 3px 5px;*/
    /*background: #1F1F1F;
    border: 2px solid #41535C;*/
}
#gameUI .content-holder .section.queues .box-data:not(:last-child) {
    /*margin-bottom: 5px;*/
}
#gameUI .content-holder .section.buildings .box-data.corpus-upgrades{
    min-height: 80px;
}
#gameUI .content-holder .section.buildings .box-data .desc {
    /*height: 131px;*/
    position: relative;
    min-height: 131px;
    height: auto;
}
#gameUI .content-holder .section.buildings .box-data.corpus-upgrades .desc {
    min-height: 27px;
    /*height: auto;*/
    height: 33px;
    padding: 6px 10px;
}
#gameUI .content-holder .section.buildings .box-data.corpus-upgrades .desc .distribute{
    margin-left: 20px;
    font-size: 16px;
    line-height: 20px;
}
#gameUI .content-holder .box-data .desc {
    max-width: initial;
    min-height: 45px;
}
#gameContent.global_market .content-holder .box-data .desc {
    min-height: min-content;
}
#gameUI .content-holder .box-data .desc .left-part {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100px;
    /*height: 85px;*/

    /*background: url('../images/new/farm.png') left bottom no-repeat;
    background-size: 100% auto;*/
}
#gameUI .content-holder .box-data[data-type="jobs"] .desc .left-part {
    /*background: url('../images/new/explorer.png') left bottom no-repeat;*/
    /*background: url('../images/new/andro_venti.png') left bottom no-repeat;*/
}
#gameUI .content-holder [data-type="jobs"][data-subtype="explorer"] .desc .left-part,
#gameUI .content-holder .section.resources .box-data[data-type="jobs"] .desc .left-part {
    /*background: url('../images/new/magnifying_glass.png') left bottom no-repeat;*/
    background: url('../images/resources_sprite_64_64.png');
    background-size: 400% 600%;

    width: 38px;
    height: 38px;
    background-position: -300% -500%;
}
#gameUI .content-holder .icon-holder,
#dynamicDOM .icon-holder,
#gameUI .ui-holder .icon-holder {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    position: relative;
    top: 0px;
    overflow: hidden;
}
#gameUI .content-holder .section.resources .box-data .desc .left-part .icon-holder {
    /*top: 0px;*/
    top: -12px;
}
#gameUI .content-holder .section.resources .box-data[data-type="jobs"] .desc .left-part .icon {
    margin-left: 14px;
    margin-top: 7px;
}
#gameUI .content-holder .box-data .desc .left-part .total-output {
    position: absolute;
    top: 0;
    left: 0;
    font: 700 13px/16px var(--font-reg);
    background: linear-gradient(to right, rgba(59, 255, 157, 0.10) , rgba(59, 255, 157, 0.8) 20%, rgba(59, 255, 157, 0.8) 65%, rgba(59, 255, 157, 0.1) 100%);

    width: 50px;
    text-align: center;

    /* TODO rmeove if needed, this is an approximation of what it could look like to be clearer that more info is inside */
    width: 66px;
    bottom: 5px;
    top: auto;
    padding-right: 10px;
}
#gameUI .content-holder .box-data .desc .left-part .total-output.critical {
    background: linear-gradient(to right, rgba(255, 59, 59, 0.10) , rgba(255, 59, 59, 0.8) 20%, rgba(255, 59, 59, 0.8) 65%, rgba(255, 59, 59, 0.1) 100%);
}
#gameUI .content-holder .box-data .desc .left-part .total-output.low {
    background: linear-gradient(to right, rgba(250, 125, 45, 0.10) , rgba(250, 125, 45, 0.8) 20%, rgba(250, 125, 45, 0.8) 65%, rgba(250, 125, 45, 0.1) 100%);
}
#gameUI .content-holder .box-data .desc .left-part .total-output.warning {
    background: linear-gradient(to right, rgba(255, 255, 59, 0.10) , rgba(255, 255, 59, 0.8) 20%, rgba(255, 255, 59, 0.8) 65%, rgba(255, 255, 59, 0.1) 100%);
}

#gameUI .content-holder .section.buildings .box-data .desc .shield{
    background: url('../images/new/upgrade point_icon_256_256.png');
    background-size: 100% 100%;
    width: 50px;
    height: 50px;
    position: relative;
    top: -8px;
}
#gameUI .content-holder .section.buildings .box-data .desc .upgrade-points{
    position: relative;
    top: 8px;
    font: 700 14px/16px var(--font-reg);
}
#gameUI .content-holder .section.buildings .box-data .desc .distribute{
    position: relative;
    top: 2px;
}
#gameUI .content-holder .section.buildings .box-data .desc > div{
    display: inline-block;
    vertical-align: top;
}
#gameUI .content-holder .section.buildings .box-data .desc > .upgrade-points > div{
    display: inline-block;
}
#gameUI .content-holder .box-data .desc .right-part {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 110px);
    padding-left: 10px;
}
#gameUI .content-holder .box-data .desc .right-part .item-spec{
    font: 700 14px/16px var(--font-reg);
}
#gameUI .content-holder .box-data .desc .right-part .product-stock{
    font: 700 14px/16px var(--font-reg);
}
#gameUI .content-holder [data-type="jobs"][data-subtype="explorer"] .desc  .right-part,
#gameUI .content-holder .section.resources .box-data[data-type="jobs"] .desc .right-part {
    width: calc(100% - 48px);
}
#gameUI .content-holder .section.resources .box-data[data-subtype="mining_plant"] .desc .right-part {
    height: 125px;
}
/* TODO shoudl this be a generalzied class we rather add in JS? */
/*#gameUI .content-holder .box-data[data-subtype="rain_collector"] .desc .right-part,
#gameUI .content-holder .box-data[data-subtype="filtering_station"] .desc .right-part,
#gameUI .content-holder .box-data[data-subtype="hydro_plant"] .desc .right-part,
#gameUI .content-holder .box-data[data-subtype="solar_panels"] .desc .right-part {
    margin-top: 15px;
}*/
/*modular*/
#gameUI .content-holder .box-data .desc.flex {
    display: flex;
}
/*modular*/
#gameUI .content-holder .box-data .desc.flex > div {
    flex-grow: 1;
}
/*modular*/
#gameUI .content-holder .box-data .desc-extra {
    margin-top: 5px;
}
/*modular*/
#gameUI .content-holder .box-data .right-info {
    position: relative;
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
    max-width: 300px;
    background: lightblue;


    height: 100%;
}
/*modular*/
/*#gameUI .content-holder .box-data .assign-cits {
    position: absolute;
    right: 10px;
    top: 5px;
}*/
/*modular*/
/*#gameUI .content-holder .box-data .assign-cits .assign-holder {
    display: inline-block;
    background: url('../images/new/citizens1_amount_show_bg.png');
    background-size: 100%;
    min-width: 83px;
    height: 18px;
    border-radius: 5px;
}*/
/*modular*/
#gameUI .content-holder .box-data .assign-cits .assign-holder > div {
    display: inline-block;
    vertical-align: top;
    /*line-height: 16px;*/
}
/*modular*/
#gameUI .content-holder .box-data .assign-cits .amount {
    border: none;
    width: 41px;
    text-align: center;
    color: white;
}
/*modular*/
#gameUI .content-holder .box-data .assign-cits.full-width {
    position: static;
    /*overflow: auto;*/
}
/*modular*/
#gameUI .content-holder .box-data .assign-cits.full-width .assign-holder {
    display: block;
    float: right;
}
/*modular*/
#gameUI .content-holder .box-data .assign-cits.full-width > span .amount {
    display: inline-block;
}
/*modular*/
/*#gameUI .content-holder .box-data .assign-cits.max-workers {
    position: static;
    width: max-content;
    text-align: right;

    position: absolute;
    top: auto;
    bottom: 5px;
    left: 110px;

}
#gameUI .content-holder .box-data[data-subtype="explorer"] .assign-cits.max-workers {
    left: 48px;
    right: auto;
}*/
/*modular*/
/*#gameUI .content-holder .box-data .assign-cits.max-workers .workers{
    font: 700 14px/20px var(--font-reg);
}*/
#gameUI .content-holder .box-data .assign-cits .workers-limit {
    font: 13px/13px var(--font-reg);
    margin-top: 2px;
}
/*#gameUI .content-holder .box-data .assign-cits.max-workers .workers:before {*/
/*#gameUI .content-holder .box-data .assign-cits:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/resources_sprite_64_64.png');
    background-size: 400% 600%;
    background-position: -300% -400%;

    margin-right: 5px;
    vertical-align: middle;
}*/
/*#gameUI .content-holder .box-data .assign-cits.max-workers > span {
    vertical-align: middle;
}*/
/*modular*/
/*#gameUI .content-holder .box-data .assign-cits.max-workers .amount {
    display: inline-block;
    width: 65px;
}*/
#gameUI .content-holder .box-data .sources-info {
    height: 100%;
}
#gameUI .content-holder .box-data .sources-info > div > div {
    display: inline-block;
}
/*modular*/
#gameUI .content-holder .box-field {
    flex: 1 1 0px;
    /*background: rgba(28,215,235, 0.51);*/
    /*border: 1px solid #0199e2;*/
    /*padding: 5px;*/
    height: auto;

    margin-bottom: 5px;
    text-align: left;
    color: white;
}
/*modular*/
#gameUI .content-holder .box-field > div {
    display: inline-block;
    vertical-align: top;
}
/*modular*/
#gameUI .content-holder .box-field.assign-cits > div.amount {
    width: 50px;
    text-align: center;

}
/*modular*/
#gameUI .content-holder .box-holder.list .box-field {
    font: 14px/30px var(--font-reg);
}
/*modular*/
#gameUI .content-holder .box-holder .minus,
#gameUI .content-holder .box-holder .plus {
    /*width: 20px;
    height: 20px;
    font: 16px/20px var(--font-reg);
    text-align: center;*/
}
/* explorers */
/*modular*/
#gameUI .content-holder .box-holder .side-box {
    position: absolute;
    right: 10px;
    top: 5px;
    display: inline-block;
    width: max-content;
    min-width: 150px;
    padding: 5px;
    height: 51px;
    margin-left: 20px;
    margin-bottom: 5px;
    /*position: absolute;
    left: calc(100% + 10px);
    top: 0;*/
    margin-top: -6px;
}
#gameUI .content-holder .box-holder .side-box.no-styling {
    background: none;
    border: none;
}
#gameUI .content-holder .box-holder .side-box .exploring {
    height: 20px;
    font: 12px/20px var(--font-reg);
    margin-top: 9px;
}
#gameUI .content-holder .box-holder .side-box .exploring.progress-bar {
    background: url('../images/new/exploring_area_progress_shown_on_the_bar.png') no-repeat, #ffffff;
    background-size: 100% 100%;
    /*width: 149px;*/
    /*width: 170px;*/
    /*width: 100%;*/
    /*float: right;*/
}
/*#gameUI .content-holder .box-holder .side-box .exploring.progress-bar.not-working {*/
    /*animation: scaleInOutSpec 1.0s ease-in-out infinite;*/
/*}*/
#gameUI .content-holder .box-holder .side-box .change-explore-area {
    margin-left: 20px;
    position: relative;
    top: 2px;
}
#gameUI .content-holder .box-holder .side-box .change-explore-area.not-working {
    animation: scaleInOutSpec 1.0s ease-in-out infinite;
}
#gameUI .content-holder .box-holder .side-box .explored {
    display: inline-block;
    margin-left: 5px;
}
/*#gameUI .content-holder .section.jobs .assign-cits .assign-holder {
    width: 95px;
    height: 20px;
    margin-left: 4px;
}
#gameUI .content-holder .section.jobs .assign-cits .assign-holder > div {
    line-height: 19px;
}
#gameUI .content-holder .section.jobs .assign-cits .amount {
    width: 44px;
}
#gameUI .content-holder .section.jobs .button.plus {
    width: 25px;
    height: 19px;
    background: url('../images/new/button1_arrow_up.png') no-repeat;
}
#gameUI .content-holder .section.jobs .button.minus {
    width: 25px;
    height: 19px;
    background: url('../images/new/button1_arrow_down.png') no-repeat;
}*/
/* end epxlorers */
#gameUI .content-holder .box-data .raised-title {
    position: relative;
    top: -5px;
}
#gameUI .content-holder .box-data .advancement-name {
    position: absolute;
    top: 11px;
    right: 10px;
    font: 14px/16px var(--font-title);
    text-transform: uppercase;
}
#gameUI .content-holder .box-data .advancement-name span {
    /*display: inline-block;*/
    min-width: 50px;
    text-align: center;
}
#gameUI .content-holder .box-data .raised-title > span,
#gameUI .content-holder .box-data .advancement-name > span{
    display: block;
}
#gameUI .content-holder .box-data .advancement-title {
    font: 14px/16px var(--font-title);
    text-align: center;
    /*margin-top: 10px;*/
}
[data-arrow="down_after"]:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 7px;
    height: 17px;
    margin-left: 3px;
    background: url('../images/new/arrow_food_water_decreasing_note.png');
    background-size: auto;
    background-size: 100% 100%;

    font: 19px/25px var(--font-reg);
    color: rgb(255, 59, 59);
}
[data-arrow="up_after"]:after {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 7px;
    height: 17px;
    margin-left: 3px;
    background: url('../images/new/arrow_food_water_increasing_note.png');
    background-size: auto;
    background-size: 100% 100%;

    font: 19px/25px var(--font-reg);
    color: rgb(255, 59, 59);
}
#gameUI .content-holder .box-data .big-time {
    font: 700 18px/20px var(--font-reg);
}
/*#gameUI .content-holder .box-data*/ .advancement-progress {
    height: 5px;
    max-width: 250px;
    margin: 5px auto;
}

#gameUI .content-holder .box-data .advancement-name {
    position: absolute;
    top: 16px;
    right: 10px;
    font: 14px/16px var(--font-title);
    text-transform: uppercase;
}
#gameUI .content-holder .box-data .advancement-name span {
    display: inline-block;
    min-width: 50px;
    text-align: center;
}
#gameUI .content-holder .box-data .advancement-title {
    font: 14px/16px var(--font-title);
    text-align: center;
    margin-top: 10px;
}
/*#gameUI .content-holder .box-data*/ .advancement-progress {
    height: 5px;
    max-width: 250px;
    margin: 5px auto;
}
/*modular*/
#gameUI .content-holder .box-data .build,
#gameUI .content-holder .box-data .produce {
    position: absolute;
    bottom: 21px;
    right: 10px;
    min-width: 80px;
}
#gameUI .content-holder .box-data .build-time {
    position: absolute;
    bottom: 3px;
    right: 14px;
    font: 14px/16px var(--font-reg);
}
#gameUI .content-holder .box-data .produce {
    /*right: 36px;*/
    right: 20px;
}
/*#gameUI .content-holder .box-data .demolish {
    position: absolute;
    right: 0;
    bottom: 5px;

    width: 18px;
    height: 17px;
    padding: 0;
    background: url('../images/new/trash_icon.png');
}*/
#gameUI .content-holder .box-data .full-stats {
    position: absolute;
    right: 0;
    bottom: 5px;
    /* remove if we stick with what we have atm*/
    right: 23px;

    width: 18px;
    height: 17px;
    padding: 0;

    background: url('../images/new/stats_icon.png');
}
#gameUI .content-holder .box-data .demolish + .full-stats {
    right: 23px;
}
#gameUI .content-holder .box-data .product-amount {
    position: absolute;
    left: 6px;
    top: 25px;
    color: #ffffff;
}
#gameUI .content-holder .box-data .product-amount span {
    color: #ffffff;
    font: 14px/16px var(--font-title);
    margin-right: 10px;
}
/*#gameUI .content-holder .box-data .trade-product,*/
#gameUI .content-holder .box-data .check-market {
    position: absolute;
    left: 10px;
    top: 35px;
}
#gameUI .content-holder .global-market .box-data .check-market {
    right: 1px;
    top: 1px;
    left: auto;
    padding: 3px 10px;
}
/*modular*/
#gameUI .content-holder .box-data .operational-costs {
    /*color: #800000;*/
}
/*modular*/
#gameUI .content-holder .box-data .costs {
    position: absolute;
    /*bottom: 35px;*/
    bottom: 43px;
    /*top: 34px;*/
    /*right: 22px;*/
    right: 12px;
    text-align: right;
    color: black;
    /*color: #800000;*/
    font: 14px/22px var(--font-reg);
}
#gameUI .content-holder .section.buildings .box-data .costs {
    /*top: 5px;*/
}
/*modular*/
#gameUI .content-holder .box-data .buy-change {
    display: inline-block;
    vertical-align: top;
    margin-left: 2px;
}
/*modular*/
#gameUI .content-holder .box-data .buy-change.positive {
    color: #008000;
}
/*modular*/
#gameUI .content-holder .box-data .buy-change.negative {
    /*color: red;*/
    color: #800000;
}
#gameUI .content-holder .box-data .dirt-composition {
    margin-top: 15px;
}
#gameUI .content-holder .box-data .dirt-composition .ore-type {
    display: inline-block;
    border: 1px solid #0199e2;
    padding-bottom: 2px;
    height: 16px;
    width: 60px;

    margin-right: 2px;
    text-align: center;
    background: white;
    font: 700 14px/16px var(--font-reg);
}
#gameUI .content-holder .box-data[data-subtype="war_factory"] .upgrade-costs {
    /*background: white;*/
    color: black;
    margin-bottom: 5px;
}
/*modular*/
#gameUI .content-holder .box-data .queue-info {
    position: absolute;
    top: 1px;
    right: 10px;
    text-align: right;
    font-feature-settings: 'tnum';
}
#gameUI .content-holder .box-data .queue-info > span {
    display: inline-block;
    min-width: 70px;
    min-width: 8ch;
    text-align: left;
    vertical-align: middle;
}
#gameUI .content-holder .box-data .queue-info > span > span {
    float: right;
    margin-left: 1px;
}
    /* queue items */
/*modular*/
#gameUI .content-holder .box-data .queue-item {
    font: 12px/29px var(--font-reg);
    color: white;
}
#gameUI .content-holder .box-data .remove-all:hover {
    filter: brightness(127%);
}
/*modular*/
#gameUI .content-holder .box-data .queue-item span {

}
/*modular*/
#gameUI .content-holder .box-data .queue-item span:last-child {
    margin-left: 20px;
    font: 14px/25px var(--font-reg);
}
#gameUI .content-holder .box-data .actions {
    position: absolute;
    right: 0px;
    top: -1px;
    line-height: 5px;
}
#gameUI .content-holder .box-data .actions > div {
    display: inline-block;
    /*margin-right: 10px;*/
    width: 29px;
    height: 29px;
    margin-left: 3px;
}
#gameContent.produce .content-holder .section.queues {
    overflow-y: auto;
    border: 2px solid #41535C;
    max-height: 300px;
}
#gameContent.produce .content-holder .queues .box-data {
    border: none;
    position: relative;
}
#gameContent #gameUI .content-holder .queues .box-data.empty-queue {
    padding:  5px 10px;
    font-family: var(--font-reg);
    font-size: 14px;
}
#gameUI .content-holder .box-data .actions .minus {
    /*background: url('../images/new/button2_arrow_down.png') no-repeat !important;
    background-size: 100% 100%;*/
}
#gameUI .content-holder .box-data .actions .plus {
    /*background: url('../images/new/button2_arrow_up.png') no-repeat !important;
    background-size: 100% 100%;*/
}
    /* end queue items
/* end jobs/resources */

/* FACTORY starts */
#gameContent.product_stock .content-holder .box-data .title {
    /*color: black;*/
    color: #ffffff;
}
#gameContent.product_stock #gameUI .content-holder .trade-product {
    font: 16px/25px var(--font-title);
    margin-top: 2px;
    margin-left: 2px;
    padding: 2px 20px;
}
#gameUI .content-holder .product-milestones {
    position: relative;
    height: 100px;
    padding-bottom: 10px;
    width: calc(100% - 80px);
    /*max-width: 800px;*/

    font: 10px/14px var(--font-reg);
    color: black;
}
#gameUI .content-holder .product-milestones .progress-bar {
    top: 55px;
    height: 12px;
}
#gameUI .content-holder .product-milestones .progress-bar:before {

    background: #5D8D4B;
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.75);
}
#gameUI .content-holder .milestone-req {
    position: absolute;
    top: 0;
    width: 50px;
    padding: 7px 10px;

    font: 500 14px/14px var(--font-reg);

    /*background: url('../images/new/product_stock_milestones_sprite.png');

    background-size: auto 100%;
    background-position-x: 100%;*/


    /*background: #3e3e3e;*/
    background: #1f1f1f;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    border: 1px solid var(--clr-border-primary);
}
#gameUI .content-holder .milestone-req:hover + div,
#gameUI .content-holder .milestone-gain:hover {
    z-index: 1;
}
#gameUI .content-holder .milestone-req:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 4px;
    height: 25px;

    /*background: #3e3e3e;*/
    background: #1f1f1f;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    border: 1px solid var(--clr-border-primary);
}
#gameUI .content-holder .milestone-gain {
    width: 130px;
    padding: 3px;
    position: absolute;
    top: 81px;

    /*background: url('../images/new/product_stock_perks_button.png');
    background-size: auto 100%;
    background-position-x: 100%;*/

    /*background: #3e3e3e;*/
    background: #1f1f1f;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    border: 1px solid var(--clr-border-primary);

    font: 500 11px/14px var(--font-reg);
}
#gameUI .content-holder .milestone-gain:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 4px;
    height: 14px;

    /*background: #3e3e3e;*/
    background: #1f1f1f;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    border: 1px solid var(--clr-border-primary);
}
#gameUI .content-holder .product-milestones .data {
    text-align: center;
    color: white;

}
#gameUI .content-holder .product-milestones .line-pointer {
    width: 2px;
    height: 10px;
    margin: 0 auto;
    background: white;
}
#gameUI .content-holder .product-milestones .achieved * {
    /*background: green;
    color: white;*/
}
#gameUI .content-holder .product-milestones .milestone-req.achieved {
    outline: 2px solid #5D8D4B;
}
#gameUI .content-holder .product-milestones .milestone-req.achieved  {
    background-position-x: 0;
}
#gameUI .content-holder .product-milestones .achieved .data {
    /*color: white;*/
    color: #5D8D4B;
}
#gameUI .content-holder .product-milestones .milestone-gain .data {
    color: white;
}
#gameUI .content-holder .product-milestones .milestone-gain .data span {
    color: var(--clr-green-primary);
}
#gameUI .content-holder .product-milestones .milestone-gain .data span.negative {
    color: var(--clr-red-primary);
}
#gameUI .content-holder .global-market .tabs {
    /*background: rgba(28, 215, 235, 0.31);*/
    /*background: #1F1F1F;*/
    padding: 0;
    width: calc(100%);
    margin-bottom: 5px;

    box-sizing: border-box;
    /*border: 1px solid #41535C;*/
}
#gameUI .content-holder .global-market .tabs .tab {
    width: calc(50% - 17px);
    height: auto;
    font: 12px/19px var(--font-reg);
}
#gameUI .content-holder .global-market .tabs .tab.active {
    color: white;
}

#gameUI .content-holder .global-market .tab-data .box-data {
    font: 12px/15px var(--font-reg);
    padding: 5px;
}
#gameUI .content-holder .global-market .tab-data .box-data .title {
    margin-bottom: 10px;
}
#gameUI .content-holder .global-market .tab-data .box-data.active {
    /*color: white;*/
    /*background: radial-gradient(#872900 0%, #451800 60%);*/
}
#gameUI .content-holder .global-market .tab-data .box-data.active .title {
    color: white;
}
#gameUI .content-holder .global-market .trade-chart-holder {
    padding: 0 25px;
    height: 405px;
    max-width: 1150px;
    /*max-width: 100%;*/
    /*border-bottom: 1px solid white;*/
    /*background: rgba(255,255,255,0.7);*/
    background: #1F1F1F;
    /*background: url('../images/new/graph_background.png');*/
    border-top: 1px solid #41535C;
    border-bottom: 1px solid #41535C;
}
#gameUI .content-holder .global-market .trade-chart-holder canvas {
    margin: 0 auto;
}

#gameUI .content-holder .global-market .title > span {
    margin-left: 5px;
}
#gameUI .content-holder .global-market .trade-window {
    max-width: 1200px;
    border: 1px solid #41535C;
}
#gameUI .content-holder .global-market .above-chart,
#gameUI .content-holder .global-market .below-chart {
    max-width: 100%;
}
#gameUI .content-holder .global-market .above-chart .title {
    color: white;
    text-align: center;
    padding: 3px 0;
    /*background: rgba(28, 215, 235, 0.31);*/
    font: 700 20px/20px var(--font-title);

    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    border-bottom: 1px solid #41535C;
}
#gameUI .content-holder .global-market .above-chart .title span {
    /*color: white;*/
    font: 16px/20px var(--font-reg);
}
#gameUI .content-holder .global-market .above-chart .options {
    position: relative;
    background: rgba(255,255,255,0.7);
    background: #1F1F1F;
    overflow: auto;
}
#gameUI .content-holder .global-market .above-chart .options .legend {
    width: max-content;
    margin: 10px auto 10px auto;
}
#gameUI .content-holder .global-market .above-chart .options .legend > div {
    display: inline-block;

    margin: 0 12px;
    padding: 4px 10px;
    font: 700 12px/14px var(--font-reg);
    border-radius: 5px;
    border: 2px solid var(--clr-red-primary);
}
#gameUI .content-holder .global-market .above-chart .options .legend .buy-price {
    border-color: var(--clr-blue-primary);
}
#gameUI .content-holder .global-market .above-chart .options .legend .sell-price {
    border-color: var(--clr-yellow-primary);
}
#gameUI .content-holder .global-market .above-chart .view-opened {
    position: absolute;
    top: 14px;
    right: 61px;

    font: 20px/20px var(--font-title);
}
#gameUI .content-holder .global-market .above-chart .view-opened:before,
#gameUI .content-holder .global-market .above-chart .view-opened:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;

    width: 30px;
    height: 30px;
}
#gameUI .content-holder .global-market .above-chart .view-opened:before {
    left: 49px;
    bottom: -2px;
    background: url('../images/new/market_arrows_green_red.png');
    background-size: auto 100%;
    background-position-x: 0;
}
#gameUI .content-holder .global-market .above-chart .view-opened[data-type="buy"]:before {
    background-position-x: 100%;
}
#gameUI .content-holder .global-market .above-chart .view-opened:after {
    right: -61px;
    bottom: -7px;
    width: 40px;
    height: 40px;

    background: url('../images/resources_sprite_64_64.png');
    background-size: 400% 600%;
}
#gameUI .content-holder .global-market .above-chart .price-info {
    display: flex;
}
#gameUI .content-holder .global-market .above-chart .price-info > span {
    margin-right: 20px;
    /*flex: 1;*/
    flex: 1 auto;
    text-transform: uppercase;
    text-align: right;
    text-align: center;
}
#gameUI .content-holder .global-market .above-chart .price-info > span:first-child {
    /*flex: 0;
    margin-right: 10px;*/
}
#gameUI .content-holder .global-market .above-chart .price-info .number-change {
    float: none;
    min-width: 50px;
}

#gameUI .content-holder .global-market .price-info {
    font: 700 11px/14px var(--font-reg);
    color: black;
    padding: 5px 6px;
    min-height: 28px;
    background: url('../images/new_ui/game/title_bg_light.png');
}
#gameUI .content-holder .global-market .trade-options {
    font: 700 14px/16px var(--font-reg);
    color: white;
    margin-top: 10px;
    border-top: 1px solid;
    padding-top: 5px;
}
#gameUI .content-holder .global-market .trade-options > div {
    margin-bottom: 10px;
}
#gameUI .content-holder .global-market .trade-options .sub-title {
    margin-bottom: 5px;
}
#gameUI .content-holder .global-market .trade-options .include-citizen-owned {
    display: inline-block;
    margin-left: 50px;
    color: white;
    font: 700 14px/16px var(--font-reg);
}
#gameUI .content-holder .global-market .trade-options .include-citizen-owned:before {
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    background: green;
    border: 1px solid black;
    vertical-align: top;
    margin-right: 5px;
}
#gameUI .content-holder .global-market .trade-options .include-citizen-owned.off:before {
    background: red;
}
#gameUI .content-holder .global-market .trade-options .button {

    width: 100px;
    height: auto;
    margin-right: 20px;
    padding-bottom: 4px;
    text-align: center;

    box-shadow: 2px 2px 2px rgba(255,255,255, 0.5)/*, 0 1px 2px rgba(255,255,255, 0.5)*/;
}
#gameUI .content-holder .global-market .trade-options .button > div {
    background: white;
    padding: 2px 5px;
    color: black;
    font: 700 12px/20px var(--font-reg);
    margin-top: 2px;
}

#gameUI .content-holder .new-trade-order {
    position: relative;
    padding: 30px 20px 20px 20px;
    font: 700 11px/14px var(--font-reg);
    /*background: rgba(255,255,255,0.7);*/
    background: #1F1F1F;
}
#gameUI .content-holder .new-trade-order .left-side {
    display: inline-block;
    width: 100px;
    vertical-align: top;
    padding-right: 10px;
    /*border-right: 1px solid black;*/
}
#gameUI .content-holder .new-trade-order .left-side .order-title {
    text-decoration: underline;
    margin-bottom: 10px;
}
#gameUI .content-holder .new-trade-order .left-side .order-type {
    display: block;
    padding: 2px 5px;
    /*width: 50px;*/
    width: 77px;
    text-align: center;
    margin-bottom: 10px;
    color: black;

    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
#gameUI .content-holder .new-trade-order .left-side .order-type.active {
    /*background: none !important;*/
    pointer-events: none;
    opacity: 0.8;
    color: white;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}
#gameUI .content-holder .new-trade-order .right-side {
    position: absolute;
    top: 20px;
    right: 50px;

    display: inline-block;
    vertical-align: top;
    padding-right: 80px;
    padding-left: 20px;
}
#gameUI .content-holder .new-trade-order .input-holder {
    position: relative;
    width: 300px;
}
#gameUI .content-holder .new-trade-order .input-note {
    position: absolute;
    left: 30px;
    top: -14px;
    display: inline-block;

    text-align: center;
    padding: 1px 5px;
    /*background: #cec7c3;*/
    background: none;
    color: white;
    font: 700 11px/12px var(--font-reg);
}
#gameUI .content-holder .new-trade-order .input-note2 {
    position: absolute;
    top: 5px;
    /*right: 5px;*/
    right: 30px;
    color: #606060;
    font: 10px/15px var(--font-title);
    /*text-transform: capitalize;*/
}
#gameUI .content-holder .new-trade-order .order-amount {
    /*background: none;*/
    background: white;
    /*border: 1px solid black;*/
    border: none;
    padding: 2px 50px 2px 10px;
    font: 16px/20px var(--font-reg);
    /* account for padding, border */
    width: calc(100% - 60px - 2px);
}
#gameUI .content-holder .new-trade-order[data-type="buy"] .input-note {
    content: 'I want to spend';
}
#gameUI .content-holder .new-trade-order .percent-options {
    text-align: right;
    /*color: #606060;*/
    color: var(--clr-yellow-primary);
    font: 14px/16px var(--font-title);
}
#gameUI .content-holder .new-trade-order .percent-options > div {
    display: inline-block;
    margin: 0 5px;
}
#gameUI .content-holder .new-trade-order .percent-options > div:hover {
    color: black;
}
#gameUI .content-holder .new-trade-order .error-note {
    height: 20px;
    color: var(--clr-red-primary);
    font: 700 10px/20px var(--font-reg);
}
#gameUI .content-holder .new-trade-order .execute-order {
    position: absolute;
    top: -2px;
    right: 10px;
    display: inline-block;
    /*margin-bottom: 10px;*/
    padding: 5px 15px;
    font: 14px/20px var(--font-reg);
    text-transform: uppercase;
}
/* END FACTORY */
/* produce plans */
#gameContent.manage_plans .content-holder .left-column {
    /*height: calc(100% - 70px);*/
    width: calc(50% - 20px);
    height: 100%;
}


#gameContent.manage_plans .content-holder .left-column {
    width: 49%;
    height: 100%;
}
#gameContent.manage_plans .content-holder > div {
    overflow: hidden;
}
#gameContent.manage_plans .content-holder .left-column .plan-data{
    /*min-height: 292px;*/
    min-height: 223px;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-amount{
    font: 700 13px/16px var(--font-reg);
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget-holder{
    width: 350px;
    /*height: 133px;*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    background: #3e3e3e;
    position: relative;
    margin-top: 11px;
    margin-left: 5px;
    /*border: 2px solid #999999;*/

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget {
    /*display: inline-block;
    text-align: center;
    width: 130px;
    height: 131px;
    position: relative;
    margin-top: 0px;
    vertical-align: top;*/
    /*border: 1px solid black;*/
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .title{
    position: absolute;
    left: -8px;
    top: -15px;
    background: #020202;
    width: 109%;
    z-index: 1;
    font: 14px/16px var(--font-title);
    border: 1px solid #999999;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget > .background-layer{
    width: 100%;
    height: 131px;
    position: absolute;
    /*top: 27px;*/
    left: 0px;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget > .background-layer[data-type="0"]{
    background: #388132;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget > .background-layer[data-type="1"]{
    background: #a97b4d;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget > .background-layer[data-type="2"]{
    background: #f7f8f9;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget > .background-layer[data-type="3"]{
    background: #4d7ba9;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .circle{
    /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    position: relative;
    top: 6px;*/
}

#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .circle{
    /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    width: 105px;
    height: 105px;
    position: relative;
    background-size: 100% 100%;
    margin-top: 10px;*/
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .circle.hp{
    /*background: url('../images/new/corpus_BG2.png') center no-repeat, url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;*/
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .circle.dmg{
    /*background: url('../images/new/corpus_BG3.png') center no-repeat, url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;*/
}

#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget > div{
    display: inline-block;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .plan-image{
    /*position: relative;
    width: 90px;
    height: 45px;
    display: inline-block;
    top: 30px;
    left: -1px;
    transform: rotate(-16deg);*/
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .amount-holder{
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .right-part{
    display: inline-block;
    position: absolute;
    top: 7px;
    right: 87px;
    font: 15px/16px var(--font-title);
    color: var(--clr-green-primary);
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .plan-image > div {
    width: 90px;
    height: 45px;
}
#gameContent.manage_plans .content-holder .left-column .plan-data .corpus-widget .plan-image > div.ghost{
    opacity: 0.24;
}
#gameUI .content-holder .section.create-plans {
    width: calc(100% - 12px);
    /*background: rgba(255, 255, 255, 0.88);*/
    /*padding-bottom: 17px;*/

    border: 2px solid #41535C;

    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    background-size: 100% 100%;
}
#gameUI .content-holder .section.create-plans .scroller{
    /*height: 500px;*/
    /*height: 275px;*/
}
#gameUI .content-holder .section.create-plans .parts-counter{
    display: inline-block;
}
#gameUI .content-holder .section.create-plans .get-pending{
    margin-left: 25px;
    padding: 2px 3px;
}
#gameUI .content-holder .section.create-plans .title,
#gameContent.manage_plans .content-holder .right-column .title {
    position: relative;
    line-height: 40px;
}
#gameContent.setup_troops .content-holder .title {
    position: relative;
    height: 45px;
}
#gameContent.setup_troops .content-holder .title .tanks-amount{
    font: 15px/17px var(--font-reg);
}
#gameContent.produce .content-holder .box-data[data-type="corpuses"] .title {
    height: 45px;
}
#gameContent.manage_plans .content-holder .right-column .title {
    /*background: rgba(28, 215, 235, 0.20);*/
    margin-bottom: 0px;
    padding: 2px 5px;


    background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    /*font: 20px/35px var(--font-title);*/
    font: 20px/32px var(--font-title);
    border-bottom: 1px solid #41535C;
}
#gameContent.manage_plans .content-holder .right-column .save-design {
    position: absolute;
    width: 103px;
    right: 229px;
    top: 273px;
}
#gameUI .content-holder .section.create-plans .tabs,
#gameContent.manage_plans .content-holder .right-column .tabs {
    background: none;
    display: inline-block;
    width: auto !important;
    /*margin-left: 452px;*/
    right: 10px;
    top: 0px;
    position: absolute;
}
#gameContent.manage_plans .content-holder .right-column .tabs {
    left: 135px;
}
#gameContent.manage_plans .content-holder .right-column .tabs .tab{
    /*margin-left: 21px;*/
    width: max-content;
    padding: 2px 10px;
    margin-left: 4px;
}
#gameContent.manage_plans .content-holder .right-column .tabs .tab:nth-child(n + 2){
    margin-left: 17px;
}
#gameUI .content-holder .section.create-plans .tabs .tab {
    margin-right: 0;
}
#gameUI .content-holder .section.create-plans .tabs .tab:nth-child(n + 2){
    margin-left: 20px;
}
#gameUI .content-holder .section.create-plans .sub-header {
    position: relative;
    /*background: rgba(255, 255, 255, 0.88);*/
    margin-bottom: 0px;
    /*margin-top: 2px;*/
    border: none;
    color: black;
    padding-bottom: 29px;
}
#gameUI .content-holder .section.create-plans .button{
    /*margin-left: 25px;*/
}
#gameUI .content-holder .section.create-plans .combine-parts {
    position: absolute;
    bottom: 26px;
    left: 10px;
    padding: 4px;
    font-size: 14px;
    line-height: 16px;
}
#gameUI .content-holder .section.create-plans .delete-holder {
    position: absolute;
    bottom: 26px;
    right: 20px;
}
#gameUI .content-holder .section.create-plans .delete-holder > div{
    display: inline-block;
    vertical-align: bottom;
    margin-left: 10px;
}
#gameUI .content-holder .section.create-plans .button.delete-part{
    width: 35px;
    height: 35px;
    background: url('../images/new/trash.png');
    background-size: 100% 100%;
    border: none;
}
#gameUI .content-holder .section.create-plans .button.delete-part:hover{
    transform: scale(1.2);
}
#gameUI .content-holder .section.create-plans .button.clear-all{
    margin-top: 4px;
    padding: 4px;
}
#gameUI .content-holder .section.create-plans .combine-note{
    /*text-align: left;*/
    /*padding-left: 29px;*/
    /*padding-top: 20px;*/
    position: absolute;
    left: 10px;
    bottom: 5px;
    color: white;
    font: 12px/16px var(--font-reg);
}
#gameUI .content-holder .section.create-plans .button[data-action-type="claim_more_parts"]{
    position: relative;
    float: right;
    margin-right: 34px;
    padding: 4px;
}
#gameUI .content-holder .section.create-plans .button[data-action-type="claim_more_parts"] .notification-icon{
    top: -8px;
    right: -10px;
}
#gameUI .content-holder .section.create-plans .button[data-action-type="claim_more_parts"] .pending-counter{
    position: absolute;
    top: -12px;
    left: 98%;
    color: white;
    background: #fc7800;
    border: 1px solid black;
    border-radius: 3px;
    font: 700 14px/14px var(--font-reg);
    padding: 2px 4px;
}
#gameUI .content-holder .section.create-plans .sub-header .tabs{
    left: 10px;
    top: 3px;
}
#gameUI .content-holder .section.create-plans .sub-header {
    position: relative;
    /*background: rgba(255, 255, 255, 0.88);*/
    margin-bottom: 0px;
    /*margin-top: 2px;*/
    border: none;
    color: black;
    padding-bottom: 10px;
    overflow: hidden;
    padding-top: 7px;
    /*height: 46px;*/
}
#gameUI .content-holder .section.create-plans .sub-header .tabs{
    left: 13px;
    top: 3px;
}
#gameUI .content-holder .section.create-plans .sub-header .buttons-holder {
    position: relative;
}
#gameUI .content-holder .section.create-plans .sub-header .buttons-holder .button.dropdown{
    padding-left: 17px;
    margin-left: 10px;
    padding: 4px;
}
#gameUI .content-holder .section.create-plans .sub-header .buttons-holder .button.dropdown .dropdown-sign{
    width: 15px;
    height: 8px;
    background: url('../images/new/arrow_down.png');
    display: inline-block;
    margin-left: 5px;
}
#gameUI .content-holder .section.create-plans .tab-data{
    /*background: rgba(255, 255, 255, 0.88);*/
    text-align: center;
    padding-bottom: 70px;
    position: relative;
}
#gameUI .content-holder .section.create-plans .tab-data .top-parts-note{
    text-align: left;
    padding-left: 27px;
    padding-bottom: 6px;
    height: 22px;
}
#gameUI .content-holder .section.create-plans .tab-data .top-parts-note.positive{
    color: #4cc567;
}

#gameUI .content-holder .section.create-plans .tab-data .part-data{
    /*background: rgba(255, 255, 255, 0.88);*/
    /*padding-left: 35px;*/
    padding-bottom: 35px;
    text-align: center;
}
#gameUI .content-holder .section.create-plans .scroller {
    height: clamp(200px, calc(100vh - 500px), 1000px);
}
#gameUI .content-holder .section.create-plans .tab-data .filter-note{
    display: block;
    font: 14px/16px var(--font-title);
    padding-bottom: 3px;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part{
    display: inline-block;
    width: 110px;
    height: 110px;
    /*background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);*/
    background: url('../images/new_ui/game/manage_plans/bg_inventory_sprite.png');
    background-size: 400% 100%;
    background-position-x: 0;
    text-align: center;
    border: 0.2em solid black;
    margin-top: 0.2em;
    margin-left: 0.2em;
    color: black;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part.unlock-more {
    pointer-events: none;
    background: url('../images/unlock_icon.png') center 25% no-repeat, url('../images/new_ui/game/manage_plans/bg_inventory_sprite.png');
    background-size: auto auto, 400% 100%;
    background-position: center 25%, 0 0;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part .bottom-text {
    text-align: center;
    margin-top: 70%;
    font-weight: normal;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part.empty {
    pointer-events: none;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part.disabled{
    opacity: 0.40;
}
/*#gameUI .content-holder .section.create-plans .tab-data  .single-part:not(.used):not(.dummy):hover{*/
    /*!*background: url('../images/new/BG_inventory_parts.png');*!*/
    /*!*border: 2px solid #f16522;*!*/
    /*!*outline: 4px solid #f16522;*!*/
    /*!*position: relative;*!*/
    /*!*outline-offset: -2px;*!*/
    /*filter: brightness(154%);*/
/*}*/
#gameUI .content-holder .section.create-plans .tab-data .single-part:not(.used):not(.dummy):hover > .rarity,
#gameUI .content-holder .section.create-plans .tab-data .single-part:not(.used):not(.dummy):hover > .part{
    filter: brightness(154%);
}
#gameUI .content-holder .section.create-plans .tab-data .single-part.used:hover, #gameUI .content-holder .section.create-plans .tab-data  .single-part.dummy:hover{
    cursor: default;
}
/*#gameUI .content-holder .section.create-plans .tab-data  .single-part.active{*/
    /*background: url('../images/new/BG_inventory_parts.png');*/
/*}*/
#gameUI .content-holder .section.create-plans .tab-data  .single-part .type{
    margin-top: 8%;
    /*font: 700 14px/16px var(--font-reg);*/
    font-family: var(--font-reg);
    font-weight: 700;
}
/*#gameUI .content-holder .section.create-plans .tab-data .single-part.optional .type{*/
    /*!*color: white;*!*/
/*}*/
#gameUI .content-holder .section.create-plans .tab-data .single-part .rarity, #gameUI .content-holder .section.combine-parts .tab-data  .single-part .rarity{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 2%;
    display: block;
    width: 100%;
    height: 17%;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part .rarity .rarity-star, #gameUI .content-holder .section.combine-parts .tab-data  .single-part .rarity .rarity-star{
    display: inline-block;
    width: 20%;
    height: 100%;
    background: url('../images/new/stars_rarity_inventory_parts.png');
    background-size: auto 100%;
    text-align: center;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part.optional .rarity .rarity-star, #gameUI .content-holder .section.create-plans .tab-data .single-part.used .rarity .rarity-star{
    background-position-x: -100%;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part > div{
    display: inline-block;
}
#gameUI .content-holder .section.create-plans .tab-data .single-part > div.part{
    width: 100%;
    height: 50%;
}
#gameUI .content-holder .section.create-plans .single-part.selected {
    /*background: rgba(250, 125, 45, 0.5);*/
    /*border: 2px solid #f16522;*/
    /*background: url('../images/new/BG_inventory_parts.png');*/
    /*color: black;*/
    color: white;
    background-position-x: -300%;
}
#gameUI .content-holder .section.create-plans .single-part.used {
    /*background: url('../images/new/inventory_frame_current_corpus.png');*/

    background-position-x: -100%;
    color: white;
}
#gameUI .content-holder .section.create-plans .single-part.dummy {
    /*background: url('../images/new/BG_inventory_parts.png');*/
    background-position-x: -300%;
    color: white;
}
#gameUI .content-holder .section.create-plans .single-part.optional{
    outline: 0.4em solid #f16522;
    position: relative;
    outline-offset: -0.2em;
}
#gameUI .content-holder .section.create-plans .single-part.combined {
    /*background: url('../images/new/inventory_frame_part_combined.png');*/
    background-position-x: -200%;
}
#gameUI .content-holder .section.create-plans .single-part .part-costs{
    text-align: right;
}
#gameUI .content-holder .section.create-plans .single-part .part-costs > div{
    height: 13px;
}
#gameUI .content-holder .section.create-plans .tab-data  .single-part .part .plan-image{
    width: 100%;
    height: 100%;
}
#gameUI .content-holder .section.create-plans .tab-data  .single-part .part .plan-image > div{
    width: 94%;
    height: 94%;
}
#gameUI .content-holder .section.create-plans .tab-data  .single-part .part .plan-image > div[data-part-type="turret"]{
    left: 0px;
}
#gameUI .content-holder .section.manage-plans .sub-header {
    position: relative;
    /*background: rgba(255, 255, 255, 0.88);*/
    margin-bottom: 0px;
    /*margin-top: 2px;*/
    border: none;
    color: black;
    /*padding-bottom: 29px;*/
}
#gameUI .content-holder .section.manage-plans .sub-header .tabs{
    left: 10px;
    top: 1px;
}


/*modular*/
/*#gameUI .content-holder .part-data {*/
    /*position: relative;*/
    /*margin-bottom: 5px;*/
    /*padding: 5px;*/
    /*background: #102331;*/
    /*border: 1px solid #0199e2;*/
    /*color: white;*/
/*}*/
/*modular*/
#gameUI .content-holder .part-data > div {
    display: inline-block;
    vertical-align: top;
}
/*modular*/
#gameUI .content-holder .part-data .image {
    width: 61px;
    height: 31px;
    margin: 5px 10px;
}
#gameUI .content-holder .part-data .desc {
    width: 150px;
}
#gameUI .content-holder .part-data .stats {
    /*width: calc(100% - 80px - 150px - 20px);*/
    width: 276px;
    font: 14px/16px var(--font-reg);
    text-align: left;
}
#gameUI .content-holder .part-data .stats .value{
    font: 700 14px/16px var(--font-reg);
}
#gameUI .content-holder .part-data .costs {
    position: absolute;
    /*right: 50px;*/
    /*top: 5px;*/
    /*right: 74px;*/
    /*top: 14px;*/
    right: 1px;
    top: 3px;
}
#gameUI .content-holder .part-data .costs .icon {
    margin-right: 10px;
}
#gameUI .content-holder .part-data .add-part {
    position: absolute;
    /*top: 13px;*/
    /*right: 5px;*/
    right: 8px;
    /*padding: 3px 5px;*/
    padding: 2px 3px;
    /*border: 1px solid black;*/
    bottom: 3px;
    font: 13px/16px var(--font-reg);
}
#gameUI .content-holder .part-data .currently-selected {
    position: absolute;
    right: 5px;
    padding: 2px 3px;
    bottom: 3px;
    color: white;
    font: 700 13px/16px var(--font-reg);
}
#gameUI .content-holder .part-data .scrap {
    position: absolute;
    /*right: 133px;*/
    /*right: 66px;*/
    right: 88px;
    bottom: 4px;
    /*font: 13px/16px var(--font-reg);*/
    /*padding: 2px 3px;*/
    width: 18px;
    height: 17px;
    padding: 0;
    background: url('../images/new/trash_icon.png');
}
#gameUI .content-holder .part-data .scrap[data-type="pending"] {
    bottom: 3px;
    right: 162px;
}
#gameUI .content-holder .part-data .add-to-inventory {
    position: absolute;
    right: 5px;
    bottom: 3px;
}
#gameUI .content-holder .plan-data {
    padding: 5px;
    /*background: #102331;*/
    /*border: 1px solid #0199e2;*/
    color: white;
    position: relative;
    /*background: rgba(255, 255, 255, 0.6);*/
    font: 700 14px/16px var(--font-reg);
    padding-left: 15px;
}
#gameUI .content-holder .plan-data .design-holder {}
#gameUI .content-holder .plan-data .design-holder .corpus-widget {
    flex: 0 1 180px;
}
#gameUI .content-holder .plan-data .title {
    background: #3e3e3e;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.75);
    font: normal 18px/25px var(--font-title);
    color: white;
    padding-left: 10px;
}
#gameUI .content-holder .plan-data .plan-design {
    position: relative;
    width: 246px;
    height: 81px;
    margin-bottom: 5px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.88);
}
#gameUI .content-holder .plan-data .stats-holder{
    width: 200px;
    position: absolute;
    right: 0px;
    left: 400px;
    top: 15px;
    margin: 0 auto;

    text-align: center;
    font: normal 10px/12px var(--font-reg);

    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
}
#gameUI .content-holder .plan-data .design-button-holder{
    width: 364px;
    height: 100px;
    position: absolute;
    right: 90px;
    top: 240px;
    margin: 0 auto;
    text-align: center;
}
#gameUI .content-holder .plan-data .save-design {
    position: absolute;
    right: 10px;
    bottom: -17px;
    /*width: 90px;*/
    font-size: 14px;
    line-height: 16px;
}
#gameUI .content-holder .plan-data .cancel-design{
    position: absolute;
    left: 10px;
    bottom: -17px;
    /*margin-left: 20px;*/
    /*width: 90px;*/
    font-size: 14px;
    line-height: 16px;
}
#gameUI .content-holder .plan-data .save-design-note{
    position: absolute;
    right: 10px;
    bottom: 6px;
    /*margin-top: 10px;*/
    color: var(--clr-red-primary);
    font: 12px/16px var(--font-reg);
}
#gameUI .content-holder .plan-data .save-design.highlighted, #gameUI .content-holder .plan-data .cancel-design.highlighted{
    animation: scaleInOutSpec 1.2s ease-in-out 4;
}
#gameUI .content-holder .plan-data .below-plan {
    margin: 10px auto 0px auto;
}
#gameUI .content-holder .plan-data .below-plan .crew-req{
    color: black;
}
#gameUI .content-holder .plan-data .plan-parts {
    /*position: absolute;
    top: 15px;
    right: 115px;*/
}
#gameUI .content-holder .plan-data .plan-parts .design-title {
    /*background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.4));
    border: 1px solid #41535C;*/
    font: normal 14px/20px var(--font-reg);
    padding: 5px 10px;
    margin-bottom: 20px;
}
#gameUI .content-holder .plan-data .plan-parts .checkbox {
    margin-bottom: 5px;
    margin-left: 10px;
    color: white;
}
/*#gameUI .content-holder .plan-data .plan-parts .checkbox:before {*/
#gameUI .content-holder .plan-data .plan-parts .checkbox:before {
    /*content: '';*/
    /*display: inline-block;*/
    /*width: 13px;*/
    /*height: 14px;*/
    /*vertical-align: top;*/
    /*!*border: 1px solid black;*!*/
    /*!*background: red;*!*/
    /*background: url('../images/check_icon_no.png');*/
    /*margin-right: 5px;*/
    /*margin-top: 3px;*/

    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    /*background: url('../images/main_menu/64_64_playpage_icons_updated.png');

    background-size: 1600% auto;
    background-position-x: -1100%;*/

    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: 0;

    margin-right: 10px;
}
/*#gameUI .content-holder .plan-data .plan-parts .checkbox.added:before {*/
    /*background: green;*/
/*}*/
#gameUI .content-holder .plan-data .plan-parts .checkbox.added:before {
    /*background: url('../images/check_icon_yes.png');*/
    /*width: 13px;*/
    /*height: 14px;*/
    /*background-position-x: -1200%;*/

    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: -100%;
}
#gameUI .content-holder .plan-data .plan-parts .checkbox .text {
    display: inline-block;
    position: relative;
    top: -9px;
}
#gameUI .content-holder .plan-data .plan-design .plan-image {
    position: relative;
    margin: 10px auto auto auto;
    width: 100%;
    height: 81px;
    border:1px solid #0199e2;
    margin-top: -38px;
}
#gameUI .content-holder .plan-data .plan-design .plan-image > div {
    width: 61px;
    height: 31px;
}
#gameUI .content-holder .plan-data .plan-design .plan-image > div.ghost {
    opacity: 0.24;
}
#gameUI .content-holder .plan-data .plan-stats {
    /*border: 1px solid #0199e2;*/
    /*padding: 5px;*/
    /*width: 80%;*/
    /*width: 133px;*/
    /*width: 155px;*/
    margin: 1px auto 5px 0;
    text-align: center;
    position: relative;
    /*left: 33px;*/
    /*left: 44px;*/
    padding-bottom: 20px;
}
#gameUI .content-holder .plan-data .plan-stats-text {

    background: #3e3e3e;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.75);
    font: normal 18px/25px var(--font-title);
    color: white;
    padding-left: 10px;
    text-align: left;
}
#gameUI .content-holder .plan-data .plan-costs {
    /*width: 80%;*/
    /*width: 93px;*/
    width: 120px;
    margin: 0 auto 5px auto;
    text-align: left;
    position: absolute;
    top: 84px;
    left: 17px;
}
#gameUI .content-holder .plan-data .plan-costs > div{
    height: 17px;
}
    /* end produce plans */
/* overlay */
/*modular*/
#gameUI .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    /*background: rgba(103, 235, 237, 0.8);*/
}
#gameContent.hide-overlay .overlay .ui-holder {
    display: none;
}
#gameContent.show-top-ui .overlay .ui-holder.top {
    display: block;
}
#gameContent.show-bottom-ui .overlay .ui-holder.bottom {
    display: block;
}
#gameContent.hide-notifications .notifications,
#gameContent.hide-notifications .notifications-holder,
#gameContent.hide-notifications .notifications-new {
    display: none;
}
/* give poiner events to overlay only where needed */
#gameContent.world #gameUI .overlay,
#gameContent.territories #gameUI .overlay,
#gameContent.battle_select #gameUI .overlay,
#gameContent.battle #gameUI .overlay,
#gameContent.research #gameUI .overlay,
#gameContent #gameUI .overlay.playing-cutscene {
    pointer-events: auto;
}
#dynamicDOM > * {
    z-index: 1; /* TODO is this fine?*/
}
/*modular*/
#gameUI .overlay > div {
    pointer-events: auto;
}
/*modular*/
#gameUI .overlay .ui-holder {
    position: absolute;
}
/*modular*/
#gameUI .overlay .ui-holder.top {
    top: 0;
    left: 0;
    right: 0;

    z-index: 1; /* TODO is this fine or it should bechnaged?*/
}
/*modular*/
#gameUI .overlay .ui-holder.right {
    top: 0;
    right: 0;
    bottom: 0;
}
/*modular*/
#gameUI .overlay .ui-holder.bottom {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; /* TODO is this fine or it should bechnaged?*/
    /*pointer-events: none;*/
}
/*modular*/
#gameUI .overlay .ui-holder.left {
    top: 0;
    bottom: 0;
    left: 0;
}

#gameUI .overlay .ui-holder.left .scrap{
    position: absolute;
    top: 200px;
    left: 10px;
    text-align: center;
}
#gameUI .overlay .ui-holder.left .clear-all-squadrons{
    position: absolute;
    top: 313px;
    left: 7px;
    text-align: center;
}
#gameUI .overlay .ui-holder.right .active-skill-overlay{
    background: url('../images/new/special_skills_on_combat_sprite-8.png');
    background-size: auto 100%;
    width: 75px;
    height: 76px;
    position: absolute;
    top: 0px;
    left: -2px;
}
#gameUI .overlay .ui-holder.right .active-skill-overlay.reinf{
    background-position-x: 0px;
}
#gameUI .overlay .ui-holder.right .active-skill-overlay.toggle-fight{
    background-position-x: -76px;
}
#gameUI .overlay .ui-holder.right .active-skill-overlay.gun_1{
    background-position-x: -152px;
}
#gameUI .overlay .ui-holder.right .active-skill-overlay.mg_1{
    background-position-x: -228px;
}
#gameUI .overlay .ui-holder.right .active-skill-overlay.priority-display{
    background-position-x: -304px;
}
#gameUI .overlay .ui-holder.right .hotkey-display{
    background: white;
    border: 1px solid black;
    border-radius: 3px;
    position: absolute;
    top: 52px;
    left: -2px;
    font: 18px/18px var(--font-title);
    padding: 1px 3px;
    color: black;
}


/*#gameUI .overlay .ui-holder.right .battle-functions-holder > .priority-display{*/
#gameUI .overlay .ui-holder.right > .priority-display{
    text-align: center;
    position: absolute;
    top: 418px;
    right: 13px;
    vertical-align: middle;
    background: url('../images/new/combat_button_without_glow.png');
    width: 75px;
    height: 76px;
    font: 16px/73px var(--font-title);
    color: white;
}



#gameUI .overlay .ui-holder.right .battle-functions-holder > .reinf{
    position: absolute;
    top: 75px;
    right: 13px;
    text-align: center;
}
#gameUI .overlay .ui-holder.right .reinf:hover{
    filter: brightness(144%);
    /*transform: scale(1.2);*/
}
#gameUI .overlay .ui-holder.right .reinf div{
    display: inline-block;
    text-align: center;
    pointer-events: none;
}
#gameUI .overlay .ui-holder.right .reinf .reinf-icon{
    width: 68px;
    height: 71px;
    background: url('../images/new/reinforcements_icon.png') center no-repeat;
    position: relative;
    top: 15px;
}
#gameUI .overlay .ui-holder.right .reinf .circle{
    /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;*/
    /*width: 105px;*/
    /*height: 105px;*/
    background: url('../images/new/combat_button_without_glow.png');
    width: 75px;
    height: 76px;
    position: relative;
    background-size: 100% 100%;
}
#gameUI .overlay .ui-holder.right .reinf .reinf-overlay{
    width: 86px;
    height: 86px;
    background: url('../images/new/special_powers_on_combat_button_overlay.png') center no-repeat;
    /*position: relative;
    top: -64px;*/
    position: absolute;
    top: 10px;
    left: 10px;
}
#gameUI .overlay .ui-holder.right .reinf .amount-holder{
    background: url('../images/new/combat_tank_amount_bar.png') center no-repeat;
    background-size: 100% 100%;
    color: white;
    border-radius: 2px;
    padding: 0px 4px;
    position: relative;
    top: -15px;
    z-index: 1;
    /*width: 97px;*/
    font: 12px/18px var(--font-reg);
}
/*#gameUI .overlay .ui-holder.right .reinf .counter{*/
    /*width: 43px;*/
    /*height: 43px;*/
    /*background: url('../images/new/chances_left_note.png') center no-repeat;*/
    /*position: absolute;*/
    /*top: -8px;*/
    /*right: 18px;*/
    /*font: 19px/37px var(--font-title);*/
/*}*/
#gameUI .overlay .ui-holder.right .reinf .counter {
    /*width: 25px;
    height: 25px;*/
    /*background: url('../images/new/chances_left_note.png') center no-repeat;*/
    position: absolute;
    top: -4px;
    right: 3px;
    font: 18px/18px var(--font-title);
    background: white;
    /*background-size: 100% 100%;*/
    color: black;
    padding: 1px 3px;

    border: 1px solid black;
    border-radius: 3px;
}
#gameUI .overlay .ui-holder.right .hotkeys-battle-legend {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid black;
    border-radius: 4px;
    position: absolute;
    right: 0px;
    top: 548px;
}

.fullscreen-tutorial-holder{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../images/backgrounds/Tutorial_Help_screen_on_combat_no_texts-01-01.jpg') center no-repeat;
    background-size: 100% 100%;
}
.fullscreen-tutorial-holder .tut-bubble{
    position: absolute;
    padding: 10px;
    background: black;
    color: white;
    max-width: 14%;
    width: max-content;
    font: 15px/15px var(--font-reg);
}
.fullscreen-tutorial-holder .x{
    display: inline-block;
    position: absolute;
    top: 7px;
    right: 19px;
    color: white;
    font: 21px/16px var(--font-btn);
}
.fullscreen-tutorial-holder .x:hover{
    transform: scale(1.2);
    filter: brightness(127%);
}
/*




#gameContent.battle .overlay {
    display: none;
}*/

/*modular*/
#gameUI .overlay .top-menu {
    height: 24px;
    height: 46px;
    padding: 0 10px;
    /*background: rgba(28,215,235, 0.19);*/
    background: rgba(0,0,0, 1);
    color: white;
    overflow: hidden;

    display: flex;
    align-items: center;
}
/*modular*/
#gameUI .overlay .top-menu .item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /*padding: 4px 5px;*/

    /*margin-right: 4px;*/

    flex: 0 1 98px;
    font: 13px/16px var(--font-reg);
    margin-right: 30px;
}
#gameUI .overlay .top-menu .item.game-year {
    position: relative;
    /*top: 8px;*/
    /*width: 77px;*/
    width: 79px;
    padding: 0px;
    text-align: center;
    margin-right: 0px;
    flex: 0 0 124px;

}
#gameUI .overlay .top-menu .item.timelapse {
    /*width: 50px;*/
    width: 79px;
    position: relative;
    text-align: left;
    /*padding: 4px 1px;*/
    /*margin-top: 5px;*/
    flex: 0 0 124px;
    margin-right: 12px;
}
#gameUI .overlay .top-menu .item.timelapse .icon.time {
    /* testing shorthand declaration for BG size <- issue with reducing size when suign sprite*/
    /*background: url('../images/resources_sprite_64_64.png') -100% -200% / 400% 600%, url('../images/main_menu/64_64_playpage_icons_updated.png') 0 0 / 1300% auto;*/
    /*background: url('../images/resources_sprite_64_64.png') -100% -200% / 400% 600%, url('../images/main_menu/64_64_playpage_icons_updated.png') 0 0 / 1300% auto;*/

    background:  url('../images/timelapse_setting.png') 0 0 / 100% 100%;
}

#gameUI .overlay .top-menu .item.timelapse .play-pause {
    display: inline-block;
    position: relative;
    top: 1px;
    /*width: 43px;*/
    /*padding-right: 17px;*/
    text-align: center;
    color: white;
    /*background: url('../images/new/build_upgrade_button.png') no-repeat;
    background-size: 100% 100%;*/
    font: 700 12px/20px var(--font-reg);
}
#gameUI .overlay .top-menu .item.timelapse .play-pause:not(.pause) {
    border-radius: 50%;
    animation: backgroundFlicker 5s ease-out infinite;
}
#gameUI .overlay .top-menu .item.timelapse .play-pause .icon {
    /*position: absolute;
    right: -10px;
    top: -5px;*/
}
#gameUI .overlay .top-menu .item.timelapse .play-pause.pause .icon {
    background-position-x: -2900%;
}
#gameUI .overlay .top-menu .item.timelapse .play-pause:hover {
    color: black;
}
#gameUI .overlay .top-menu .item.timelapse .play-pause:hover .icon {
    filter: brightness(127%);
}
#gameUI .overlay .top-menu .item.timelapse .time-saved {
    display: inline-block;
    font: 700 10px/12px var(--font-reg);
    color: white;
    text-align: center;
    margin-top: 0px;
    /*padding-right: 35px;*/
    width: calc(100% - 74px);
    display: none;
}
#gameUI .overlay .top-menu .item.timelapse > .icon.big.time {
    width: 50px;
    padding-left: 30px !important;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
#gameUI .overlay .top-menu .item.timelapse .game-speed {
    display: inline-block;
    font: 13px/18px var(--font-reg);
    color: white;
    text-align: center;
    margin-top: 0px;
    position: relative;
    /*top: 2px;*/
    top: 11px;
    /*padding-right: 35px;*/
    width: 39px;
    padding-right: 5px;
    vertical-align: middle;
    border: 1px solid #767676;;
    border-left: none;
}
#gameUI .overlay .top-menu .item.timelapse .game-speed:after {
    position: absolute;
    content: '\25BC';

    right: 1px;
    top: 0;
    bottom: 0;
    margin: auto 0;

    font: 7px/18px var(--font-reg);
    color: #767676;

}
#gameUI .overlay .top-menu .item.view {
    background-color: #0199e2;
}
#gameUI .overlay .top-menu .item.view.active {
    background-color: #0199e2;
    color: black;
}
/*
#gameUI .overlay .top-menu .item.main-resources {
    padding: 0px;
    margin-top: 8px;
    display: flex;
}
#gameUI .overlay .top-menu .item.main-resources > div {
    display: inline-block;
    margin-right: 4px;
    color: #ffffff;
    width: 120px;
}
#gameUI .overlay .top-menu .item.main-resources > div.health,
#gameUI .overlay .top-menu .item.main-resources > div.productivity {
    width: 81px;
}*/
#gameUI .overlay .top-menu .item[data-tooltip-type="res_info"] > span {
    display: inline-block;
    width: calc(100% - 30px);
    text-align: center;
}
#gameUI .overlay .top-menu .citizen-daily-gain {
    position: absolute; /* dont set any left or right, we want to use it's defautl position, just ot not affect the witdh/positioning of the parent*/
    font: 10px/10px var(--font-reg);
    color: #B6B6B6;
    margin-top: 1px; /* use amrgin as usign top will not have it behave as static anymore*/
    padding-left: 19px;
}
#gameUI .overlay .top-menu .item.population > span {
    vertical-align: middle;
    position: relative;
    top: -3px;
}
#gameUI .overlay .top-menu .item.population > span .idle-citizens {
    position: relative;
    width: max-content;
    top: 3px;
}
#gameUI .overlay .item.game-speed {
    color: white;
    /*margin-left: 80px;*/
    margin-left: 118px;
}
#gameUI .overlay .item.game-speed > span {
    display: inline-block;
    padding: 2px 5px;
    margin-right: 10px;
    background: #0199e2;
    color: white;
    pointer-events: auto;
}
#gameUI .overlay .item.game-speed > span.active {
    background: #0199e2;
    color: black;
}
#gameUI .overlay .top-menu .item.population {
    flex: 0 0 148px;
    margin-right: 0px;
}
/* MODULAR CORPUS WIDGET !!! */
#gameUI .corpus-data-widget {
    position: relative;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
}
#gameUI .corpus-data-widget.adjust-to-parent {
    width: 100%;
    height: 100%;
}
#gameUI .corpus-data-widget.adjust-to-parent-w {
    width: 100%;
}
#gameUI .corpus-data-widget.auto-height {
    height: auto;
}
#gameUI .corpus-data-widget.current-selected {
    outline: 0.2em solid white;
    outline-offset: 0px;
}
#gameUI .corpus-data-widget > div {
    display: inline-block;
}
#gameUI .corpus-data-widget .title {
    display: block;
    color: white;

    background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    /*font: 20px/35px var(--font-title);*/
    font: 20px/32px var(--font-title);
    border-bottom: 1px solid #41535C;
}
#gameUI .corpus-data-widget .circle {
    position: relative;
    width: 100%;
    height: 100%;

    /*background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;*/
    background: url('../images/new_ui/game/manage_plans/tank_corpus_placeholder.png') center no-repeat;
    background-size: 100% 100%;
}
#gameUI .corpus-data-widget.hp .circle {
    background: url('../images/new/corpus_BG2.png') center center no-repeat, url('../images/new_ui/game/manage_plans/tank_corpus_placeholder.png') center no-repeat;
    background-size: 80% 80%, 100% 100%;
}
#gameUI .corpus-data-widget.dmg .circle {
    background: url('../images/new/corpus_BG3.png') center center no-repeat, url('../images/new_ui/game/manage_plans/tank_corpus_placeholder.png') center no-repeat;
    background-size: 80% 80%, 100% 100%;
}
#gameUI .corpus-data-widget.extra-status-1 .circle{
    height: calc(100% - 32px);
    width: calc(100% - 32px);
}
#gameUI .corpus-data-widget.circle-height-120 .circle {
    height: 120px;
    max-height: calc(100% - 32px);
}
#gameUI .corpus-data-widget.circle-height-140 .circle {
    height: 140px;
    max-height: calc(100% - 32px);
}
#gameUI .corpus-data-widget.circle-height-100 .circle {
    height: 100px;
    max-height: calc(100% - 32px);
}
#gameUI .corpus-data-widget .circle.active {
    /*background: url('../images/new/setup_formation_corpus_bg_tile1.png') center no-repeat;*/
}
#gameUI .corpus-data-widget .circle .plan-image {
    position: relative;
    width: 100%;
    height: 100%;
}
#gameUI .corpus-data-widget .circle .plan-image.ghost {
    opacity: 0.5;
}
#gameUI .corpus-data-widget .circle .plan-image > div{
    /*width: 69px;
    height: 37px;*/
    width: 69%;
    height: 37%;
    filter: drop-shadow(-4px -3px 1px rgba(0,0,0,0.98));
}
#gameUI .corpus-data-widget .status-bar {
    display: block;
    position: relative;
    right: 0;
    left: 0;
    margin: 0 auto;
    margin-top: -3px;

    /*top: -20px;*/


    /*position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;*/
    color: white;
    padding: 5px 10px;

    background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.4));
    border: 1px solid #41535C;
    font: normal 14px/20px var(--font-reg);
}
#gameUI .corpus-data-widget .status-bar:nth-of-type(3){
}
#gameUI .corpus-data-widget.small-statuses .status-bar {
    font: normal 10px/14px var(--font-reg);
    padding: 2px 10px;
}

#gameUI .corpus-data-widget .aura-plaquette {
    position: absolute;
    top: 8%;
    right: 8%;
    left: auto;
    width: 32px;
    height: 32px;
    background: url('../images/new/corpus_leader_icon.png');
    background-size: 100% 100%;
    pointer-events: auto;
}
#gameUI .corpus-data-widget .aura-plaquette:hover {
    filter: brightness(147%);
}
/* END MODULAR CORPUS WIDGET */

#gameUI .overlay .battle-menu {
    /*background: purple;*/
}
/*#gameUI .overlay .battle-menu > div{*/
    /*display: inline-block;*/
/*}*/
#gameUI .overlay .battle-menu .top{
    /*background: rgba(0, 0, 0, 0.65);*/
    padding: 1px;
    text-align: center;
}
#gameUI .overlay .battle-menu .top > .center{
    /*background: rgba(0, 0, 0, 0.65);*/
    background: rgba(2, 2, 2, 1);
}
#gameUI .overlay .battle-menu .top > div{
    display: inline-block;
    color: white;
    font: 14px/16px var(--font-title);
}
#gameUI .overlay .battle-menu .top .upg-points{
    display: inline-block;
    padding: 1px 20px;
}
#gameUI .overlay .battle-menu .top .center{
    display: inline-block;
    text-align: center;
    /*padding: 2px 125px;*/
    width: 892px;
    /*width: 862px;*/
    height: 26px;
    font: 15px/24px var(--font-title);
    /*border-radius: 4px;
    border: 1px solid #999999;*/
    position: relative;
    top: 5px;

    max-width: calc(100% - 2px);

    background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.4));
    border: 1px solid #41535C;
    padding: 5px 10px;
}
/*#gameUI .overlay .battle-menu .top > div:nth-child(2){*/
    /*!*margin-left: 1100px;*!*/
    /*display: inline-block;*/
    /*!*width: calc(100% - 110px);*!*/
    /*width: calc(100% - 370px);*/
    /*vertical-align: bottom;*/
    /*padding-bottom: 4px;*/
/*}*/
#gameUI .overlay .battle-menu .top .go-back{
    margin-left: 17px;
}
#gameUI .overlay .battle-menu .bottom{
    text-align: center;
    /*background: rgba(255, 255, 255, 0.2);*/
    /*background: linear-gradient(to right, rgba(255, 255, 255, 0.60) , rgba(255, 255, 255, 0.35) 20%, rgba(255, 255, 255, 0.64) 65%, rgba(0, 0, 0, 0.7) 100%);*/
    /*padding-left: 50px;*/
    /*padding-left: 44px;*/
    padding-top: 3px;
}
#gameUI .overlay .battle-menu .bottom > div{
    display: inline-block;
}
#gameUI .overlay .battle-menu .bottom .status-bar{
    /*background: url('../images/new/combat_tank_amount_bar.png') center no-repeat;*/
    /*background-size: 100% 100%;*/
    /*width: 90px;*/
    /*height: 19px;*/
}
#gameUI .overlay .battle-menu .bottom .bottom-inner-holder{
    /*background: rgba(2, 2, 2, 0.88);
    border-radius: 8px;*/
    background: url('../images/new_ui/game/dark_bg_1.png'), #1F1F1F;
    background-size: 100% 100%;

    border: 1px solid #41535C;
}
#gameUI .overlay .battle-menu .bottom > .bottom-inner-holder > div{
    display: inline-block;
    vertical-align: top;
}
#gameUI .overlay .battle-menu .bottom > .bottom-inner-holder .left {
    width: max-content;
    max-width: calc(100% - 188px);
    position: relative;
    left: -2px;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget{
    text-align: center;
    width: 130px;
    /*margin-left: 30px;*/
    display: inline-block;
    position: relative;
    vertical-align: top;
    /*height: calc(100% - 4px);*/

    display: flex;
    flex-direction: column;

    /*flex: 0 1 140px;*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget:nth-child(1){
    margin-left: 2px;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.empty > div{
    /*display: none;*/
    /*opacity: 0.25;*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.empty > .circle{
    /*opacity: 0.5;*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.empty > .circle.disabled{
    opacity: 0.25;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.marked{
    /*background: rgba(255, 255, 0, 0.4);
    animation: filterBrightnessFlicker 7.0s ease-in-out infinite;*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.marked.hp{
    /*background: rgba(56, 129, 50, 0.6);*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.marked.dmg{
    /*background: rgba(77, 123, 169, 0.6);*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.marked.no-tank{
    /*background: rgba(247, 248, 249, 0.6);*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.selected,
#gameUI .overlay .battle-menu .bottom .corpus-widget.marked.selected{
    /*background: rgba(173, 255, 47, 0.7);*/
    /*background: rgba(0, 128, 0, 0.7);*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > div{
    display: inline-block;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .background-layer{
    width: 100%;
    /*height: 131px;*/
    position: absolute;
    top: 27px;
    left: 0px;
    bottom: 0;
    right: 0;
    opacity: 0.6;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .background-layer[data-type="0"]{
    background: #388132;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .background-layer[data-type="1"]{
    background: #a97b4d;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .background-layer[data-type="2"]{
    background: #f7f8f9;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .background-layer[data-type="3"]{
    background: #4d7ba9;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget .aura-plaquette{
    /*position: absolute;
    top: 32px;
    left: 16px;
    width: 32px;
    height: 32px;
    background: url('../images/new/corpus_leader_icon.png');
    background-size: 100% 100%;*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .aura-plaquette:hover{
    /*filter: brightness(147%);*/
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .title{
    font: 14px/22px var(--font-title);
    /*margin-bottom: 4px;*/
    color: white;
    /*margin-top: 2px;*/
    background: url('../images/new_ui/game/title_bg_dark.png');
    background-size: 100% 100%;

    border-bottom: 1px solid #41535C;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget .corpus-widget-holder {
    flex: 1 1 auto;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .title > .help{
    position: relative;
    top: -1px;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle{
    background: url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    width: 105px;
    height: 105px;
    position: relative;
    background-size: 100% 100%;
    margin-top: 8px;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle.hp{
    background: url('../images/new/corpus_BG2.png') center no-repeat, url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    background-size: 100% 100%;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle.dmg{
    background: url('../images/new/corpus_BG3.png') center no-repeat, url('../images/new/setup_formation_corpus_bg_tile2.png') center no-repeat;
    background-size: 100% 100%;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle.active{
    background: url('../images/new/setup_formation_corpus_bg_tile1.png') center no-repeat;
    background-size: 100% 100%;
    width: 105px;
    height: 105px;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget .active-overlay{
    background: url('../images/new/corpus_select_border.png') center no-repeat;
    width: 107px;
    height: 107px;
    position: absolute;
    top: 0px;
    background-size: 100% 100%;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle .plan-image{
    width: 90px;
    height: 45px;
    position: relative;
    top: 29%;
    left: 4%;
    transform: rotate(-17deg);
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle .plan-image > div{
    width: 96px;
    height: 48px;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .circle .note{
    position: relative;
    width: 100%;
    height: 31px;
    text-align: center;
    font: 700 14px/16px var(--font-reg);
    /*top: 30%;*/
    top: 22%;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .amount-holder{
    color: white;
    border-radius: 2px;
    position: relative;
    top: -14px;
    z-index: 0;

    font: 14px/18px var(--font-reg);
    width: 99px;
    height: 19px;
    background: url('../images/new/tank_amount_button.png');
    background-size: 100% 100%;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget.empty > .amount-holder{
    opacity: 0.48;
}
#gameUI .overlay .battle-menu .bottom .corpus-widget > .upg-points{
    position: relative;
    top: -9px;
    padding: 1px 11px;
    font: 13px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .bottom  .center{
    font: 700 14px/16px var(--font-reg);
    position: relative;
    width: 188px;
    height: 160px;
}
#gameUI .overlay .battle-menu .bottom  .center > div{
    display: inline-block;
    vertical-align: top;
    height: 162px;
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector{
    display: none;
    background:  url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    background-size: 100% 100%;
    width: 190px;
    /*height: 554px;*/
    height: auto;
    position: absolute;
    /*bottom: 128px;*/
    right: -2px;
    bottom: -1px;
    padding-bottom: 13px;
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector.active{
    display: block;
    z-index: 1;
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector .randomize-squadrons{
    width: 128px;
    height: 103px;
    background: url('../images/new_ui/game/map/randomize_formation_button.png');
    margin: 0 auto;
    margin-top: 40px;
}
#gameUI .overlay .battle-menu .bottom .center > .formation-selector .randomize-squadrons:hover{
    filter: brightness(147%);
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector .randomize-squadrons .text{
    color: white;
    position: relative;
    top: 73px;
    font: 700 16px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .bottom .center > .formation-selector .close-selector{
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    font: 700 16px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector .close-selector:hover {
    transform: scale(1.2);
}
#gameUI .overlay .battle-menu .bottom .center > .formation-selector .formation-type{
    width: 162px;
    height: 111px;
    background: url('../images/new/format_sprite_updated.png');
    background-size: auto 101%;
    margin: 0 auto;
    margin-top: 13px;
    /*border: 2px solid transparent;*/
    border: 2px solid grey;

    /*background-size: auto 100%;*/
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector .formation-type:hover{
    border: 2px solid yellow;
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector .formation-type[data-type="line"]{
    background-position-x: 0;
    margin-top: 23px;
}
#gameUI .overlay .battle-menu .bottom .center > .formation-selector .formation-type[data-type="wedge"]{
    background-position-x: calc(-99% - 1px);
}
#gameUI .overlay .battle-menu .bottom  .center > .formation-selector .formation-type[data-type="box"]{
    background-position-x: calc(-197%);
}
#gameUI .overlay .battle-menu .bottom .center > .button-stack{
    width: 188px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 128px;
    /*background: rgba(2, 2, 2, 0.95);*/
    border-radius: 4px;
}
#gameUI .overlay .battle-menu .bottom  .center > .button-stack > .button{
    padding: 3px 0px;
    margin-bottom: 15px;
    position: relative;
    width: 100px;
    max-width: 100%;
}
#gameUI .overlay .battle-menu .bottom  .center > .button-stack > .upg-points > .notification-icon{
    /*top: 12px;
    right: 3px;*/
    position: absolute;
    top: 11px;
    right: -23px;
}
#gameUI .overlay .battle-menu .bottom  .left > div{
    /*display: inline-block;*/
    vertical-align: top;
    justify-content: space-evenly;
}
#gameUI .overlay .battle-menu .bottom  .left > .corpus-holder{
    width: 674px;
    height: 162px;
    /*background: #020202;*/
    /*background: url('../images/new/corpus_battle_console_border.png'), rgba(2, 2, 2, 0.95);*/
    /*background: url('../images/new/corpus_battle_console_border.png');
    border-radius: 7px;
    background-size: 100% 100%;*/
    margin-top: 0px;


    border: 1px solid #41535C;
}
#gameUI .overlay .battle-menu .bottom  .left > .corpus-holder > div:not(:last-child) {
    /*margin-right: 10px;*/
}
#gameUI .overlay .battle-menu .bottom  .left > .corpus-holder .corpus-widget .corpus-widget-holder {
    max-width: 140px;
}
#gameUI .overlay .battle-menu .bottom  .left > .corpus-holder .corpus-widget .corpus-widget-holder {
    margin-left: calc((100%  - 140px) / 2 );
}
#gameUI .overlay .battle-menu .bottom  .left .buttons-holder{
    /*width: 146px;*/
    width: 168px;
    text-align: center;
    margin-left: 27px;
}
#gameUI .overlay .battle-menu .bottom  .left .buttons-holder > div{
    margin-top: 19px;
}
#gameUI .overlay .battle-menu .bottom  .left .buttons-holder > div.button{
    margin-top: 8px;
    /*width: 80%;*/
    font: 13px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .bottom  .left .buttons-holder > .spots{
    margin-top: 3px;
    font: 700 14px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .bottom  .left .buttons-holder > .currently-filled{
    text-align: center;
    font: 700 18px/16px var(--font-reg);
    margin-top: 8px;
}
#gameUI .overlay .battle-menu .bottom  .center .aura-widget{
    display: none;
    width: 208px;
    text-align: center;
    padding-top: 2px;
}
#gameUI .overlay .battle-menu .bottom  .center .aura-widget.empty div{
    display: none;
}
#gameUI .overlay .battle-menu .bottom  .center .aura-widget.marked{
    background: rgba(255, 255, 0, 0.4);
}
#gameUI .overlay .battle-menu .bottom  .center .aura-widget .title{
    font: 14px/15px var(--font-title);
    padding-left: 20px;
}
#gameUI .overlay .battle-menu .bottom > .center .aura-widget .title .help{
    position: relative;
    top: -1px;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .circle-leader{
    display: inline-block;
    /*width: 142px;
    height: 144px;*/
    width: 117px;
    height: 112px;
    /*background: url('../images/new/aura_example7.png') center center no-repeat;*/
    background: url('../images/new/auras_sprite_combat.png') center center no-repeat;
    background-position-x: -235px;
    background-size: 300% 100%;

    /*margin-top: -3px;*/
    margin-top: -2px;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .circle-leader.enabled{
    filter: brightness(147%);
    animation: scaleBrightnessFlicker 7.0s ease-in-out infinite;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .amount-holder{
    /*background: grey;*/
    color: white;
    /*border: 1px solid black;*/
    border-radius: 2px;
    padding: 1px 1px;
    position: relative;
    /*top: -48px;*/
    /*z-index: 1;*/
    display: block;
    margin: -17px auto 0 auto;
    /*width: 69px;*/
    width: 113px;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .buttons-holder{
    text-align: center;
    padding-top: 3px; /* weird hack to prevent overflow */
    padding-bottom: 1px;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .buttons-holder > div{
    display: inline-block;
    padding: 1px 15px;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .buttons-holder > div.disabled{
    opacity: 0.5;
}
#gameUI .overlay .battle-menu .bottom .center .aura-widget > .buttons-holder > div:hover{
    cursor: pointer;
}
#gameUI .overlay .battle-menu .utility-widget{
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;

    /* TODO - this would be better in some general UI, not here*/
    /*100% view port - 200px offset from bottom, plus take into account height of thsi widget*/
    bottom: calc((100vh - 200px - 350px)/2 + 200px);

    /*bottom: 345px;*/
    /*left: 852px;*/

    text-align: center;
    font: 14px/16px var(--font-title);
    padding-top: 2px;
    /*background: url('../images/new/unit_formation_details.png');
    width: 195px;
    height: 242px;
    background-size: 100% 100%;*/
    width: max-content;

}
#gameUI .overlay .battle-menu .utility-widget .top-widget-part {
    position: relative;
    width: 150px;
    height: 120px;
    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    background-size: 100% 100%;
    z-index: 1;
}
#gameUI .overlay .battle-menu .utility-widget .spots{
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: white;
    font: 700 22px/17px var(--font-reg);
}

#gameUI .overlay .battle-menu .utility-widget .enter-battle{
    position: absolute;
    top: -105px;
    left: -22px;
    background: url('../images/new/enter_battle_button.png');
    width: 195px;
    height: 196px;
    background-size: 100% 100%;
}
#gameUI .overlay .battle-menu .utility-widget .enter-battle:hover{
    filter: brightness(120%);
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder{
    color: black;
    position: relative;
    width: 205px;
    top: -10px;
    left: -28px;
    background: url('../images/new_ui/game/title_bg_light.png');
    background-size: 100% 100%;
    padding-top: 20px;
    padding-bottom: 5px;
    font: 700 12px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder > div{
    text-align: center;
    /*margin-top: 15px;*/
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder > span {
    display: block;
    font-weight: bold;
    font-size: 14px;
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder .crew-fighting {
    margin-top: 5px;
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder .unit-formation-power{
    /*font-weight: bold;*/
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder > .idle-citizens-count{
    font-weight: bold;
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder > .idle-citizens-amount{
    /*font-weight: bold;*/
}
#gameUI .overlay .battle-menu  .utility-widget .utility-subholder > .idle-citizens-amount.animScale{
    animation: scaleInOutSpecIdleCitizens 1.2s ease-in-out 3;
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder > div:nth-child(7){
    margin-top: 1px;
    font: 700 17px/20px var(--font-reg);
}
#gameUI .overlay .battle-menu .utility-widget .utility-subholder > .save-formation{
    padding: 3px 10px;
    margin-top: 10px;
}
#gameUI .overlay .battle-menu .utility-widget .icon:not(.help){
    background-position-x: -100%;
    position: relative;
    top: -2px;
    filter: brightness(0);
}
/*#gameUI .overlay .battle-menu .center .randomize-squadrons{*/
    /*width: 100px;*/
/*}*/
#gameUI .overlay .battle-menu .center .buttons-holder .clear-all-squadrons{
    width: 100px;
    margin-top: 17px;
    font: 700 14px/16px var(--font-reg);
}
#gameUI .overlay .battle-menu .bottom > .right{
    font: 700 14px/16px var(--font-reg);
    text-align: center;
    /*margin-left: 25px;*/
    position: absolute;
    right: 0px;
    /*top: 86px;*/
    top: 44px;
    bottom: 0;
}
#gameUI .overlay .battle-menu .bottom > .right > div{
    /*display: inline-block;*/
    /*margin-left: 30px;*/
}
#gameUI .overlay .battle-menu .bottom > .right .not-yet{
    color: white;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    font: 700 13px/16px var(--font-reg);
    padding-left: 16px;
    padding-right: 16px;

    right: 0;
    bottom: 12px;
    width: max-content;
}
#gameUI .overlay .battle-menu .bottom > .right .not-yet .go-back{
    margin-left: 6px;
}
#gameUI .overlay .battle-menu .bottom > .right .battle-button-holder{
    position: relative;
}
#gameUI .overlay .battle-menu .bottom > .right .enter-battle:hover{
    cursor: pointer;
    filter: brightness(120%);
    color: black;
}
#gameUI .overlay .battle-menu .bottom > .right .enter-battle{
    position: relative;
    top: 16px;
    right: 66px;
    padding: 6px 25px;
}
#gameUI .overlay .battle-menu .bottom > .right .play-button{
    width: 60px;
    height: 60px;
    background: url('../images/new/enter_battle_play_button.png') center no-repeat;
    position: absolute;
    background-size: 100% 100%;
    top: -7px;
    right: -47px;
}
#gameUI .overlay .battle-menu .bottom > .right .battle-button-holder.disabled > .play-button{
    opacity: 0.3 !important;
}
/*#gameUI .overlay .battle-menu .bottom > .right .battle-button-holder > .play-button:hover{*/
    /*cursor: pointer;*/
/*}*/
#gameUI .overlay .battle-menu .testing-button{
    display: inline-block;
    margin-left: 20px;
}
#gameUI .overlay .top-menu .item.about {
    position: absolute;

    top: 11px;
    right: 5px;
    /*
    float: right;*/
    width: 39px;
    height: 26px;
    padding: 0;
    background: url('../images/new/icon_menu.png') center no-repeat;

    font: 700 20px/20px var(--font-reg);
    margin-right: 0;
    /*margin-top: 11px;*/

}
/*modular*/
#gameUI .overlay .left-menu {
    position: absolute;
    /*left: 51px;*/
    left: 10px;
    /*top: 129px;*/
    /*top: 90px;*/
    top: 95px;
    height: auto;
    width: auto;
    /*padding: 5px 10px 5px 0;*/
    /*background: rgba(0,0,0,0.7);*/
    color: white;
}
/*modular*/
#gameUI .overlay .left-menu .item {
    position: relative;
    display: block;
    /*width: 80px;
    padding: 3px 5px;
    font: 700 14px/20px var(--font-reg);
    text-align: center;*/
    /*width: 64px;
    height: 64px;*/
    width: 72px;
    height: 72px;
    /*height: 56px;*/

    margin-bottom: 18px;
    text-align: center;
    /*border-radius: 5px;*/

    outline: 1px solid #41535CCC;
    outline-offset: 4px;
}
/* TODO - better have 2 divs isntead of hardcoding this? */
/*modular*/
#gameUI .overlay .left-menu .item.view {
    /*background: url('../images/new/button_sidemenu_disabled.png') no-repeat;
    background-size: 100% 100%;*/
}
#gameUI .overlay .left-menu .item.view.disabled-click,
#gameUI .overlay .bottom .item.view.disabled-click {
    display: none;
}
#gameUI .overlay .left-menu .item.view.non-view,
#gameUI .overlay .bottom .item.view.non-view {
    background: none;
    /*height: 36px;*/
    position: absolute;
    /*bottom: 64px;*/
    bottom: 38px;
    left: 10px;
    width: 72px;
    height: 72px;
}
#gameUI .overlay .bottom .item.view.non-view.objective-missions:after {
    content: attr(data-after);
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;

    font: 700 12px/14px var(--font-reg);
    color: white;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
#gameUI .overlay .bottom .item.view.non-view.quick-tutorial {
    width: 72px;
    height: 72px;
    bottom: 124px;
    color: white;
    font: 700 40px/72px var(--font-reg);
    text-align: center;
    text-shadow: 3px 3px 10px rgba(255,255,255,0.4), -3px 3px 10px rgba(255,255,255,0.4), 3px -3px 10px rgba(255,255,255,0.4), -3px -3px 10px rgba(255,255,255,0.4);
}
#gameUI .overlay .bottom .item.view.non-view.quick-tutorial .icon {
    background: #04141c;
}
#gameUI .overlay .left-menu .item.view.non-view .icon,
#gameUI .overlay .bottom .item.view.non-view .icon {
    /*width: 36px;
    height: 36px;
    top: 0;*/
}
#gameUI .overlay .left-menu .view:hover,
#gameUI .overlay .bottom .view:hover {
    filter: brightness(120%);
}
/*modular*/
#gameUI .overlay .left-menu .icon,
#gameUI .overlay .bottom .icon {
    position: relative;
    /*top: 4px;*/
    /*border-radius: 5px;*/
}

/*modular*/
#gameUI .overlay .left-menu .item.view.active,
#gameUI .overlay .bottom .item.view.active {
    /*background: url('../images/new/button_sidemenu_1.png') no-repeat;*/
    background-color: transparent;
    /*background: none;*/
    color: white;
}
#gameUI .overlay .left-menu .item.view:hover .icon,
#gameUI .overlay .left-menu .item.view.active .icon,
#gameUI .overlay .bottom .item.view:hover .icon,
#gameUI .overlay .bottom .item.view.active .icon {
    box-shadow: inset 0px 0px 10px #ffffff;
}
#gameUI .overlay .item.view.unlocked-notification .icon {
    animation: insetShadowFlicker 7.0s ease-in-out infinite;
    transition: background-color;
}
#gameUI .overlay .item.view .new-notification {
    /*background-color: #1bff1b;*/

    /*animation: backgroundFlicker 5.0s ease-out;*/

    /* REMOVED FOR NOW
    animation: scaleFlicker 3.0s ease-in-out infinite;
    transition: background-color;*/
}
#gameUI .overlay .item.view .new-notification-static {
    /*background-color: #1bff1b;*/
    /* REMOVED FOR NOW
    animation: scaleFlicker 3.0s ease-in-out infinite;*/
}
#gameUI .tutorial-flicker {
    /*animation: scaleBrightnessFlicker 5.0s ease-in-out infinite;*/
    animation: scaleFlickerSmaller 4.0s ease-in-out infinite;
}
#gameUI .tutorial-flicker[data-action-type="change_workers"] {
    /*filter: brightness(13) hue-rotate(183deg);*/
    /*background-color: #686868;*/
    background-color: #ffc535;
    filter: brightness(100%); /* for some weird reason this fixes the ugly flickering animation*/

    animation: scaleFlickerSmallerInverted 4.0s ease-in-out infinite;
}
#gameUI .tutorial-flicker[data-action-type="change_workers"]:after {
    filter: brightness(0);
}/*
#gameUI .tutorial-flicker[data-action-type="change_workers"]:before {
    position: absolute;
    content: '';
    display: block;
    top: calc((30px - 60px) / 2);
    left: calc((30px - 60px) / 2);
    width: 60px;
    height: 60px;
    background: url('../images/radial_white_blur2.png');
    background-size: 100% 100%;
}*/

#gameUI .button.build.tutorial-flicker {
    animation: scaleBrightnessFlickerSmaller 4.0s ease-in-out infinite;
}
#gameUI .bottom .item.tutorial-flicker,
#gameUI .sub-menu .item.tutorial-flicker,
#gameUI .left-menu .item.tutorial-flicker {
    outline-color: #FFB800CC !important;
    animation: scaleBrightnessFlickerSmaller 4.0s ease-in-out infinite;
}
#gameUI .single-part.tutorial-flicker {
    animation: none;
}
#gameUI .single-part.tutorial-flicker:not(.dummy):not(.used) {
    animation: scaleBrightnessFlicker102 4.0s ease-in-out infinite;
}
/*modular*/
#gameUI .overlay .sub-menu {
    pointer-events: none;
    position: absolute;
    top: 90px;
    /*left: 140px;*/
    /*left: 80px;*/
    left: 100px;
    padding: 5px 0;
    color: white;
}
/*modular*/
#gameUI .overlay .sub-menu .item {
    pointer-events: auto;
    display: inline-block;
    width: 121px;
    height: 28px;
    color: black;

    margin-right: 10px;
    text-align: center;
    font: 14px/26px var(--font-title);

    /*min-width: 80px;*/
    width: max-content;

    /*background: url('../images/new/menu_tabs.png') no-repeat;
    background-size: auto 100%;
    background-position-x: 100%;
    background-size: 200% 100%;*/
    padding: 0 20px;

    /*background: url('../images/new/buttons_updated.png') no-repeat;
    background-size: 200% 100% !important;
    background-position-x: 0;*/
}
#gameUI .overlay .sub-menu .item:hover {
    filter: brightness(120%);
}
/*modular*/
#gameUI .overlay .sub-menu .item.active {
    background-position-x: 100%;
    color: white;
}
#gameUI .overlay .ui-holder.top .qol {
    position: absolute;
    /*right: 20px;
    top: 90px;*/
    right: 231px;
    top: 6px;
    padding: 9px;
}
#gameUI .overlay .ui-holder.left .go-back {
    position: absolute;
    top: 27px;
    left: 0px;
    width: 105px;
    height: 105px;
    background: url('../images/new/back_icon.png');
    background-size: 100% 100%;
}
#gameUI .overlay .ui-holder.left .go-back:hover {
    filter: brightness(120%);
}
#gameUI .location-header {
    background: gray;
    color: white;
    padding-left: 10px;
    padding-top: 4px;
    margin-bottom: 14px;
}
/*modular*/
#gameUI .overlay .info-bar {
    /*background: rgba(28,215,235, 0.10);*/
    background: rgba(35,35,35, 1);
    padding: 4px 5px;
    /*margin-top: 2px;*/
    /*padding-left: 140px;*/
    padding-left: 15px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 2px solid black;
    box-shadow: inset 0 1px 1px rgb(0, 0, 0);
}
/*modular*/
#gameUI .overlay .info-bar > div {
    position: relative;
    display: inline-block;
    margin-right: 30px;
    color: #ffffff;
    /* width: 120px;*/
    /*width: 81px;*/
    background: url('../images/frame_resources_header.png');
    background-size: 100% 100%;
    line-height: 25px;

    flex: 0 1 98px;
}
#gameUI .overlay .info-bar > div[data-absolute-gain]:before {
    content: '';
    position: absolute;

    top: 16px;
    right: 6px;

    display: inline-block;
    width: 18px;
    height: 10px;
    background: url('../images/new_ui/game/up_arrow_green.png') center center no-repeat;
    background-size: 100% 100%;
}
#gameUI .overlay .info-bar > div[data-absolute-gain^="-"]:before {
    /*background: url('../images/new/arrow_food_water_decreasing_note.png');*/
    background: url('../images/new_ui/game/down_arrow_red.png') center center no-repeat;
    background-size: 100% 100%;
}
/* special cases, requiring wider bars*/
#gameUI .overlay .info-bar > div.tiles,
#gameUI .overlay .info-bar > div.knowledge {
    /*width: 120px;*/
    /*flex: 0 0 120px;*/

}
/*modular*/
#gameUI .overlay .info-bar > div > span {
    display: inline-block;
    width: calc(100% - 30px);
    text-align: center;
    /*margin-left: 10px;*/
    margin-left: 3px;
    font: 12px/25px var(--font-reg);
}
/*modular*/
/*#gameUI .overlay .build-queue {
    position: absolute;
    top: 7px;
    right: 60px;
    padding: 2px 5px;
    width: 150px;

    color: #ffffff;
    font: 700 12px/14px var(--font-reg);
    background: rgba(28,215,235, 0.51);
    border:1px solid black;
}*/
#gameUI .overlay .top-message {
    position: relative;
    color: #ffffff;
    font: 700 14px/16px var(--font-reg);
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;

    pointer-events: none;
    padding: 5px 5px 5px 20px;
    background: rgba(0, 168, 0, 0.76);
}
#gameUI .overlay .top-message .objective span {
    color: yellow;
}
#gameUI .overlay .top-message .special-message {
    color: var(--clr-red-primary);
    position: absolute;
    top: 4px;
    right: 10px;
}
#gameUI .overlay .instructions {
    position: relative;
    width: 450px;
    max-width: 100%;
    display: inline-block;
    color: #ffffff;
    font: 700 12px/14px var(--font-reg);
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;

    pointer-events: auto;
    padding: 5px 5px 5px 20px;
    background: rgba(0, 168, 0, 0.76);
    display: none;
}
#gameContent.battle .overlay .instructions {
    /*background: rgba(255,255,0,0.5);*/
}
/* hide overlay during battle*/
#gameContent.battle #gameUI .overlay .ui-holder.top > div:not(.controls) {
    display: none;
}
#gameContent.battle #dynamicDOM .notifications,
#gameContent.battle #dynamicDOM .notifications-holder {
    display: none;
}
#gameContent.battle #gameUI .overlay .ui-holder.top .note:not(.not-displayed) {
    display: block !important;
    margin: 0 auto;
    text-align: center;
    width: 110px;
    /*height: 30px;*/
    /*background: rgba(255, 255, 255, 0.15);*/
    background: rgba(255, 255, 255, 0.60);
    font: 700 14px/16px var(--font-reg);
    padding-bottom: 4px;
}
#gameUI .overlay .instructions > div {
    font: 700 14px/16px var(--font-reg);
    color: yellow;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    margin-bottom: 5px;
}
#gameUI .overlay .instructions .close {
    float: right;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    border: 1px solid black;
    background: green;
    pointer-events: auto;
    margin-left: 20px;
}
#gameUI .overlay .instructions.off .close {
    background: red;
}
#gameUI .overlay .instructions.off {
    height: 15px;
    overflow: hidden;
}
#gameContent .overlay .instructions ul {
    padding-left: 15px;
    font: 700 13px/16px var(--font-reg);
}
/*modular*/
#gameUI .overlay .controls {
    position: relative;
    margin: 0 auto;
    text-align: center;
    max-width: 850px;
    overflow: auto;
    /*background: rgba(255, 255, 255, 0.28);*/
    background: rgba(0, 0, 0, 0.80);
    /*padding: 3px 5px;*/
    padding: 2px 30px;
    margin-top: 10px;
    width: max-content;
    /*border: 1px solid rgba(28,215,235,0.22);*/
    /*border: 1px solid white;*/
    margin-right: calc(43% - 306px);
}
#gameUI .overlay .controls[data-type="battle_select"] {
    background: rgba(0, 0, 0, 0.80);
    padding: 2px 30px;
    margin-top: 6px;
    border: 1px solid white;
}
#gameUI .overlay .controls[data-type="battle_select"] .button-style{
    margin-top: 6px;
}
#gameUI .overlay .controls[data-type="battle"] {
    background: var(--title-bg-dark-img);
    /*background-size: 100% 100%;*/
}
#gameUI .overlay .controls[data-type="battle"].battle{
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    text-align: left;
}
#gameUI .overlay .controls[data-type="battle"].battle .note{
    position: absolute;
    width: 98%;
    text-align: center;
    z-index: 2;
}
#gameUI .overlay .controls[data-type="battle"].battle .settings{
    padding-left: 20px;
    padding-bottom: 3px;
    margin-top: 4px;
    font: 700 13px/16px var(--font-reg);
}
#gameUI .overlay .controls[data-type="battle"].battle .settings > .setting:not(:first-child){
    margin-left: 52px;
}
#gameUI .overlay .controls[data-type="battle"].battle .settings .setting{
    margin-right: 37px;
    color: white;
}
#gameUI .overlay .controls[data-type="battle"].battle .help{
    display: inline-block;
    position: absolute;
    right: 100px;
    top: 7px;
    padding: 3px 24px;
    font: 16px/16px var(--font-btn);
}
#gameUI .overlay .controls[data-type="battle"] > .note > span{
    font: 700 15px/21px var(--font-reg);
}
#gameUI .overlay .controls .automation-note {
    float: left;
    font: 700 12px/30px var(--font-reg);
    /*color: yellow;*/
    color: white;
    /*text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;*/
}
#gameUI .overlay .controls .automation-note > div {
    padding: 3px 5px;
    font: 700 14px/18px var(--font-reg);
    color: white;
    /*background: red;*/
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
#gameUI .overlay .controls .automation-note span {
    font: 700 14px/30px var(--font-reg);
}
#gameUI .overlay .controls .automation-note span.time {
    font: 14px/30px var(--font-title);
}
#gameUI .overlay .controls .automation-note > .stop-auto {
    padding: 3px 30px;
    font: 15px/18px var(--font-reg);
    margin-left: 20px;
    margin-top: 3px;
    margin-right: 0px;
}
#gameUI .overlay .controls .automation-note > .stop-auto:hover {
    color: black;
}
/*#gameUI .overlay .controls .automation-note > div:hover {*/
    /*color: yellow;*/
/*}*/
#gameUI .overlay .controls .conquer-progress {
    display: inline-block;
    float: right;
    font: 700 16px/30px var(--font-reg);
    /*color: white;*/
    color: black;
    /*text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;*/
    margin-right: 20px;
}
/* map navigation */
#gameUI .overlay .map-navigation-holder {
    position: relative;
    /*width: 375px;*/
    /*width: 270px;*/
    /*height: 150px;*/
    /*background: rgba(255,255,255, 0.8);
    padding: 12px 8px 18px 8px;
    box-shadow: 1px 1px 2px #666, -1px -1px 2px #666;*/
    padding: 0 0px 3px 0px;
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
}
#gameUI .overlay .map-navigation {
    /*position: absolute;*/
    /*top: 96px;
    left: 770px;*/
    /*width: max-content;*/
    position: relative;
    /*width: 100%;*/
}
#gameContent.hide-map-navigation .overlay .map-navigation {
    display: none;
}
#gameUI .overlay .map-navigation .continent {
    background: #3e3e3e;
    text-align: left;
    color: white;
    padding: 5px 10px;
    margin: 0;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.5);
    font: 14px/16px var(--font-title);
}
#gameUI .overlay .map-navigation .area-types {
    /*width: 285px;*/
    margin: 0 3px;
    margin-top: 8px;
}
#gameUI .overlay .map-navigation .area-types > div {
    display: inline-block;
    position: relative;
    /*background: url('../images/territories_regions_menu_buttons_sprite.png') no-repeat;*/
    /*background: url('../images/new/sprite_map_navigation.png') no-repeat;*/
    /*background: url('../images/new/sprite_map_navigation_updated.png') no-repeat;*/
    /*height: 43px;*/
    /*height: 40px;*/
    height: 28px;
    padding: 2px 2px;
    color: white;
    text-align: center;
    font: 700 12px/13px var(--font-reg);

    vertical-align: top;
    text-transform: uppercase;
    /*min-width: 80px;*/
    flex-basis: max-content;
}
#gameUI .overlay .map-navigation .area-types > div {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
#gameUI .overlay .map-navigation .area-types > div:not(:last-child) {
    margin-right: 3px;
}
#gameUI .overlay .map-navigation .area-types > div > span {
    display: block;
    text-align: center;
}
#gameUI .overlay .map-navigation .area-types > div.inactive {
    /*background-position-y: 0;*/
    /*background-position-y: -99px;*/
    /*background-position-y: -94px;*/
}
#gameUI .overlay .map-navigation .area-types > div.active {
    /*background-position-y: -54px;*/
    /*background-position-y: -51px;*/
    /*background-position-y: -49px;*/
    /*background-position-y: 0;*/
    pointer-events: none;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}
#gameUI .overlay .map-navigation .area-types > div.disabled,
#gameUI .overlay .map-navigation .area-types > div.disabled-clickable,
#gameUI .overlay .map-navigation .area-types > div.disabled-click {
    /*background-position-y: -107px;*/
    /*background-position-y: -99px;*/
    /*background-position-y: -49px;*/
    /*background-position-y: -47px;*/
    color: black;
    pointer-events: auto;
}
#gameUI .overlay .map-navigation .area-types > div.disabled {
    pointer-events: none !important;
}
#gameUI .overlay .map-navigation .area-types > div:hover {
    filter: brightness(120%);
}
#gameUI .overlay .map-navigation .area-types > div.flickering {
    /*animation: insetShadowFlicker 7.0s ease-in-out infinite;*/
    animation: scaleBrightnessFlicker 5.0s ease-in-out infinite;
    /*animation: filterBrightnessFlicker 7.0s ease-in-out infinite;*/
    transition: filter, transform;
}
#gameUI .overlay .map-navigation .area-types .world:not(.icon) {
    /*background-position-x: 0;*/
    /*width: calc(125px - 50px);*/
    /*width: calc(120px - 50px);
    padding-right: 50px;*/
    /*width: calc(78px - 11px);*/
    /*padding-right: 11px;*/
    line-height: 26px;
}
#gameUI .overlay .map-navigation .area-types .region {
    /*background-position-x: -125px;*/
    /*width: calc(195px - 105px);*/
    /*margin-left: -48px;*/
    /*background-position-x: -120px;
    width: calc(189px - 105px);
    padding-left: 55px;
    padding-right: 50px;
    margin-left: -40px;*/
    /*background-position-x: -78px;
    width: calc(107px - 21px);
    padding-left: 10px;
    padding-right: 11px;*/
    /*margin-left: -30px;*/
    /*margin-left: -4px;*/
}
#gameUI .overlay .map-navigation .area-types .territory {
    /*background-position-x: -320px;*/
    /*width: calc(148px - 55px);*/
    /*margin-left: -46px;*/
    /*background-position-x: -309px;
    width: calc(140px - 55px);
    padding-left: 55px;
    margin-left: -35px;*/
    /*background-position-x: -185px;
    width: calc(100px - 16px);
    padding-left: 7px;*/
    /*margin-left: -25px;*/
    /*margin-left: -4px;*/
}
#gameUI .overlay .map-navigation .area-types .world .icon {
    /*margin-top: -7px;*/
}
/* end map navigation */
/* start map-objecgives */
#gameUI .overlay .map-objectives {
    /*position: absolute;
    top: 90px;
    right: 10px;*/
    position: relative;
    /*top: 80px;*/
    margin-top: 15px;
}
#gameUI .overlay .map-objectives .conquer-progress {
    /*background: rgba(255,255,255,1);*/
    padding: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    /*width: 300px;*/
    /*width: 320px;*
    max-width: calc(100% - 45px);*/
    width: 100%;
    max-width: 100%;

    font: 700 12px/14px var(--font-reg);
    vertical-align: middle;
}
#gameUI .overlay .map-objectives .conquer-progress > div {
    flex: 1 1 auto;
    /*background: #555553;*/
    /*padding: 2px 0;*/
    color: white;
    text-align: center;
}
#gameUI .overlay .map-objectives .conquer-progress span {
    display: block;
    font: 12px/20px var(--font-reg);
    text-align: center;
    color: var(--clr-grey-primary);
}
#gameUI .overlay .map-objectives .conquer-progress:before,
#gameUI .overlay .map-objectives .conquer-progress:after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;

    /*background: url('../images/resources_sprite_64_64.png');*/
    /*background-size: 400% 600%;*/
    /*background-position: 0 -500%;*/
    background: url('../images/new/map_flags.png');
    background-size: 200% 100%;
    background-position: -100%;
    transform: scale(1.2) translateX(1px);
}
#gameUI .overlay .map-objectives .conquer-progress:before {
    background-position: 0 0;
    transform: scale(1.2) translateX(-3px);
}
#gameUI .overlay .map-objectives .triangle-right:hover {
    filter: brightness(180%);
}
#gameUI .overlay .map-objectives .triangle-right[data-value="ON"] {
    width: 64px;
    height: 64px;
    background: url('../images/sprite_menu_icons_128_128.png');
    vertical-align: middle;

    background-size: 600% auto;
    background-position-x: -500%;
}
#gameUI .overlay .map-objectives.hide-objectives .conquer-progress,
#gameUI .overlay .map-objectives.hide-objectives .last-actions {
    display: none;
}
#gameUI .overlay .map-objectives .last-actions {
    /*float: right;*/
    padding-right: 25px;
}

#gameUI .overlay .info-entry {
    /*position: absolute;
    top: 0px;
    left: 0;
    right: 0;*/
    /*width: 280px;*/
    width: 330px;
    padding-left: 20px;
    margin: 0 auto;

    background: rgba(0,0,0,1);
    border: 1px solid #7f8282;
    text-align: left;
    color: white;
    font: 700 14px/28px var(--font-reg);
    height: 28px;
    margin-bottom: 10px;
    float: right;
    clear: both;
    max-width: 100%;
}
#gameUI .overlay .info-entry:nth-of-type(2) {
    /*top: 30px;
    left: 160px;*/
}
#gameUI .overlay .info-entry > div {
    display: inline-block;
}
#gameUI .overlay .info-entry .icon {
    position: relative;
    top: -3px;
    transform: scale(1.3);
    margin-right: 12px;
}
/* end map objectives */
/* start view types */
#gameUI .overlay .view-types {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin-top: 30px;*/

    /*background: linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0, 0, 0,0.2) 20%, rgba(0, 0, 0,0.1) 65%, rgba(0,0,0,0.1) 100%);*/

    font: 700 14px/16px var(--font-reg);
    color: white;
    text-transform: uppercase;
    text-align: center;
}
#gameContent.hide-view-categories .overlay .view-types {
    display: none;
}
#gameUI .overlay .view-types > div {
    padding: 10px 5px 5px 5px;
    /*margin: 0 10px;*/
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    min-height: 80px;
}
#gameUI .overlay .view-types span {
    display: block;
    padding: 2px 0 5px 0;
    background: #3e3e3e;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.5);
}
#gameUI .overlay .view-types .view-type {
    font: 700 12px/20px var(--font-reg);
    color: white;
    text-transform: capitalize;
    margin-top:  5px;
}
#gameUI .overlay .view-types .view-type:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    /*background: url('../images/main_menu/64_64_playpage_icons_updated.png');

    background-size: 1600% auto;
    background-position-x: -1100%;*/

    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: 0;

    margin-right: 10px;
    transition: transform;
}
#gameUI .overlay .view-types .view-type.active:before {
    /*background-position-x: -1200%;*/
    background-position-x: -100%;
}
#gameUI .overlay .view-types .view-type:hover:not(.active):not(.disabled-click) {
    transform: scale(1.1);
}
#gameUI .overlay .view-types .view-type.locked:before {
    background: url('../images/locked_content.png') no-repeat;

    background-size: auto 80%;
    background-position: 4px 0px;
}
#gameUI .overlay .view-types .extra-info {
    font: 9px/11px var(--font-reg);
    margin-top: 10px;
    text-transform: none;
}
/* end view types */
/* start side panel */
#gameUI .overlay .side-panel {
    position: absolute;

    /*top: 150px;
    left: 100px;*/

    width: 285px;

    /*padding: 10px;*/

    /* variant to overlay under menu buttons */
    top: 75px;
    left: 0;
    padding: 65px 5px 5px 110px;
    /*z-index: -1;*/
    /* end variant underb uttons */

    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/

    /*background: rgba(255,255,255,0.3);*/
    /*background: rgba(0,0,0,1);*/
    /*background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;*/
    background: url('../images/new_ui/game/dark_bg_3.png'), #1F1F1F;
    background-size: 100% 100%;
    box-shadow: 2px 2px 6px #2b2626;

    border: 2px solid var(--clr-border-primary);
}
#gameContent.world #gameUI .overlay .side-panel,
#gameContent.research #gameUI .overlay .side-panel {
    bottom: 0;
    top: 75px;
    /* extend over whole side*/
}
#gameUI .overlay .side-panel.extended-bottom {
    bottom: 0;
    box-shadow: 2px 0px 6px #2b2626;
}
#gameUI .overlay .side-panel > div {
    position: relative;
    flex: 0 1 auto;
    /*padding: 20px;*/
    /*background: rgba(255,255,255,0.9);*/
}
#gameUI .overlay .side-panel .top-part {
    /*min-height: 286px;*/
}
#gameContent.territories #gameUI .overlay .side-panel .top-part {
    min-height: 394px;
}
/*#gameUI .overlay .side-panel:not(.extended-bottom) .bottom-part {
    display: none;
}*/
#gameUI .overlay .side-panel:not(.extended-bottom) .bottom-part .secondary-stats,
#gameUI .overlay .side-panel:not(.extended-bottom) .bottom-part .setupColonies {
    display: none;
}
#gameUI .overlay .side-panel .extend-bottom {
    position: absolute;
    bottom: 0px;
    right: 0px;

    width: 26px;
    height: 25px;
    /*background: url('../images/resources_sprite_64_64.png');*/
    vertical-align: middle;

    /*background-size: 400% 600%;

    background-position: -200% -500%;
    transform: rotate(90deg);
    filter: brightness(0%) invert(1);*/ /* turn ti to white*/
}
#gameUI .overlay .side-panel .extend-bottom:hover {
    /*filter: brightness(180%);*/
    /*filter: brightness(0%) invert(0.8);*/
}
#gameUI .overlay .side-panel .extend-bottom[data-value="ON"] {
    /*transform: rotate(270deg);*/
}
#gameUI .overlay .side-panel .extend-bottom[data-value="OFF"]:after {
    background-position: -200% 0;
}
/*#gameUI .overlay .side-panel.hide-bottom .extend-bottom {
    display: none;
}*/
#gameUI .overlay .side-panel.hide-bottom .bottom-part .secondary-stats,
#gameUI .overlay .side-panel.hide-bottom .bottom-part .setupColonies {
    display: none;
}
#gameUI .overlay .side-panel .bottom-part {
    text-align: center;
}
#gameContent.world #gameUI .overlay .side-panel .bottom-part {
    margin-top: 25px;
}
#gameUI .overlay .side-panel .bottom-part > div {
    /*padding: 10px 25px;*/
    /*background: #314242;*/
    color: white;
}
#gameContent.world #gameUI .overlay .side-panel .bottom-part > div {
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    padding-left: 18px;
    padding-bottom: 10px;
}
#gameUI .overlay .side-panel .bottom-part .title {
    margin-bottom: 10px;
    font: 12px/14px var(--font-reg);
}
#gameUI .overlay .side-panel .bottom-part > div:not(:last-child) {
    margin-bottom: 25px;
}
#gameUI .overlay .stats-holder {
    padding: 15px 0 5px 0;
}
#gameUI .overlay .main-stats {
    position: relative;
}
#gameUI .overlay .global-stat {
    font: 0.9em/1.1em var(--font-reg);
    margin-bottom: 10px;
}
#gameUI .overlay .global-stat > span {
    font-weight: 700;
    color: var(--clr-grey-primary);
}
#gameUI .overlay .relation-stats {
    font: 0.9em/1.2em var(--font-reg);
}
#gameUI .overlay .relation-stats > div {
    padding: 5px;
    border: 1px solid #41535C;
}
#gameUI .overlay .relation-stats > div:not(:last-child) {
    border-bottom: none;
}
#gameUI .overlay .relation-stats .progress-bar {
    height: 15px;
    /*background-color: rgba(255,255,255,1);*/
    background: none;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.2), inset 0px 2px 2px rgba(0, 0, 0, 0.2);
    /*border: 1px solid white;*/
}
#gameUI .overlay .relation-stats .progress-bar:before {
    background: #5D8D4B;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.3), inset 0px 2px 2px rgba(0, 0, 0, 0.3);
    /*background-size: 100% 100%;*/
}
/*
#gameUI .overlay .relation-stats .infamy .progress-bar:before {
    background: red;
}
#gameUI .overlay .relation-stats .notoriety .progress-bar:before {
    background: gold;
}
#gameUI .overlay .relation-stats .diplomacy .progress-bar:before {
    background: deepskyblue;
}*/
#gameUI .overlay .relation-stats .progress-bar:after {
    /*content: '';*/ /* overriding default behaviour*/
    font: 12px/15px var(--font-reg);
}
#gameUI .overlay .setup-colony {
    position: relative;
    padding: 5px 10px;
    /*background: url('../images/new/military_economic_colony_info_button.png');
    background-size: 100% 100%;*/

    color: white;
    font: 12px/14px var(--font-reg);

    border: 2px solid;
    border-image-slice: 1;

    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
#gameUI .overlay .setup-colony:not(:last-child) {
    margin-bottom: 6px;
}
#gameUI .overlay .setup-colony:hover {
    filter: brightness(120%);
}
#gameUI .overlay .setup-colony > span {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
}
#gameUI .overlay .setup-colony > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#gameUI .overlay .setup-colony > div > div {
    flex: 0 1 auto;
}
#gameUI .overlay .setup-colony .icon-holder {
    width: 60px;
    height: 60px;
    background-size: 4000% auto;
    margin: 0;
}
#gameUI .overlay .setup-colony .colonies-available {
    font: 25px/25px var(--font-reg);
    color: white;
    text-align: center;
    flex: 1 1 auto;
    padding-right: 60px;
}
#gameUI .overlay .setup-colony .colonies-available div {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font: 700 12px/14px var(--font-reg);
    text-align: right;
}
/* end side panel*/
#gameUI .overlay .setup-troops {
    float: right;
    display: inline-block;
    width: 135px;
    padding: 5px 10px;
    font: 700 14px/16px var(--font-reg);
    /*color: black;*/
    color: white;
    /*background: lime;*/
    /*border: 2px solid black;*/
}
#gameUI .overlay .setup-troops:hover {
    /*background: white;*/
    color: black;
}
#gameContent.setup_troops #gameUI .scroll-holder {
    height: calc(100% - 40px);
}
#gameContent.setup_troops .right-column #gameUI .scroll-holder {
    height: calc(100% - 45px);
}
#gameContent.setup_troops .content-holder .left-column {
    width: calc(100% - 400px - 20px);
}
#gameContent.setup_troops .content-holder .right-column {
    width: 400px;
}
/*modular*/
#gameUI .overlay .right-ui {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 160px;
    height: 340px;
    padding: 20px;

    background: #0095ef;
    text-align:right;
}
#gameUI .overlay .right-ui .forward-time {
    padding: 5px 10px;
    color: white;
    background: grey;
    display: inline-block;
}
.ui-holder .research-right-ui {
    /*position: absolute;
    top: 130px;
    right: 39px;

    text-align: center;*/
}
.ui-holder .research-right-ui .side-holder {
    font: 12px/14px var(--font-reg);
}
.ui-holder .research-right-ui .side-holder:not(:last-child) {
    margin-bottom: 20px;
}
.ui-holder .research-right-ui .side-holder .title {
    background: #3e3e3e;
    box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.5);
    padding: 5px 10px;

    font: 14px/16px var(--font-title);
    text-transform: uppercase;
}
.ui-holder .research-right-ui .side-holder .title .icon {
    margin-left: 10px;
}
.ui-holder .research-right-ui .side-holder .holder-content {
    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    padding: 5px;
}
.ui-holder .research-right-ui .side-holder.perk-points-holder .icon.perk-points {
    width: 60px;
    height: 60px;
}
.ui-holder .research-right-ui .side-holder.perk-points-holder .flex-column:first-child {
    margin-right: 20px;
}.ui-holder .research-right-ui .side-holder.perk-points-holder .button-icon.more {
    margin-top: 10px;
    margin-left: 15px;
 }

    /*.ui-holder .research-right-ui > div {
        margin: 0 auto;
    }*/
/*.ui-holder .research-right-ui .drag-icon {
    width: 90px;
    height: 90px;
    background: url('../images/research/drag_icon_research_tree.png');
    background-size: 100% 100%;
    margin-bottom: 20px;

 }
.ui-holder .research-right-ui .research-legend {
    margin-top: 10px;
    margin-bottom: 8px;
    padding: 8px 32px;
}*/
/*.ui-holder .research-right-ui .research-points-left {
    padding: 0px 10px 3px 5px;
    text-align: left;
    font: 15px/30px var(--font-reg);

    color: white;
    background: black;
    border: 1px solid white;
    border-radius: 3px;
}*/
.ui-holder .research-right-ui .prestige-holder .holder-content {

    /*width: 150px;
    min-height: 200px;*/

    padding: 80px 0 5px 0;
    background: url('../images/research/citizen_behind_prestige_button.png') center calc(100% - 75px) no-repeat, #3e3e3e;

    color: white;
    text-align: center;
}
.ui-holder .research-right-ui .prestige-holder.extended-bottom .holder-content {

    /*width: 150px;
    min-height: 200px;*/

    padding: 10px 10px 110px 10px;
    background: url('../images/research/citizen_behind_prestige_button.png') center calc(100% - 35px) no-repeat, #3e3e3e;
}
/*.ui-holder .research-right-ui .prestige-holder.extended-bottom {
    min-height: 200px;
    background: url('../images/research/citizen_behind_prestige_button.png') center calc(100% - 60px) no-repeat, black;
}*/
/*.ui-holder .prestige-holder .title {
    margin-bottom: 20px;
}
.ui-holder .research-right-ui .time-left {
    margin-top: 10px;
    font-weight: bold;
}*/
.ui-holder .prestige-holder .prestige {
    margin: auto;
    padding: 8px 32px;
    font: 14px/16px var(--font-btn);
}
.ui-holder .research-right-ui .prestige-holder.extended-bottom  .prestige {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    /*padding: 5px 3px;*/
    padding: 8px 32px;
}
/*.ui-holder .prestige-holder.extended-bottom .prestige {
    bottom: 46px;
}*/
.ui-holder .prestige-holder .prestige.link {
    padding: 0;
    /*height: 32px;*/
    line-height: 16px;
}
.ui-holder .prestige-holder .prestige > a {
    width: 100%;
    height: 100%;
    display: block;
    color: white;
    text-decoration: none;
}
/*.ui-holder .prestige-holder .prestige:hover,
.ui-holder .prestige-holder .prestige:hover > a{
    color: black;
}*/
.ui-holder .prestige-holder .below-button {
    /*position: absolute;
    bottom: 6px;
    left: 7px;
    right: 7px;*/
    margin: 5px auto 0 auto;
    text-align: center;
}
.ui-holder .prestige-holder .below-button > div {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.ui-holder .prestige-holder .below-button .icon {
    margin-right: 10px;
}
/* NEW RESOURCES */
/*modular*/
#gameUI .content-holder .section-holder {
    max-width: 998px;
    /*border: 1px solid #0199e2;*/
}
/*modular*/
#gameUI .content-holder .extender {
    float: right;
}
/*modular*/
#gameUI .content-holder .extender:hover:before {
    color: black;
}
/*modular*/
#gameUI .content-holder .extender:before {
    /*content: '\25BC';*/
    content: '';
    display: inline-block;
    /*font: 25px/25px var(--font-title);*/
    color: white;
    background: url('../images/new/button_down.png');
    background-size: 100% 100%;
    /*width: 27px;
    height: 19px;*/
    width: 23px;
    height: 16px;
    filter: brightness(0%);
}
/*modular*/
#gameUI .content-holder .section-holder.extended .extender:before {
    /*content: '\25B2';*/
    content: '';
    background: url('../images/new/button_up.png');
    background-size: 100% 100%;
}
/*modular*/
#gameUI .section-holder .extended-data {
    /*padding:5px;*/
    /*display: block !important;
    transition: max-height 1s ease-out, height 1s ease-out;
    opacity: 1;
    max-height: 1000px;*/
    /*height: auto;*/
}
#gameUI .section-holder .extended-data.not-displayed {
    /*height: 0 !important;*/
    /*opacity: 0 !important;*/
    /*overflow: hidden;*/
    /*height: 0;*/
    /*max-height: 0 !important;*/
    /*overflow: hidden;*/
}

#gameUI .content-holder .section.resources {
    /*width: auto;*/
}
#gameUI .content-holder .section.resources > .column-holder > .flex-column:not(:last-child) {
    margin-right: 1%;
}
#gameUI .content-holder .section-holder.resources {
    /* old way7non collapsing columns*/
    /*display: inline-block;
    width: calc(32% - 2px);
    margin-right: 1%;*/
    vertical-align: top;
    max-width: 100%;
    margin-bottom: 5px;

    /* COLUMNATTEMPT
    break-inside: avoid;
    overflow: hidden;*/
}
/* COLUMNATTEMPT
#gameUI .content-holder .section-holder.resources > div,
#gameUI .content-holder .section-holder.resources > div > div {
    break-inside: avoid;
}*/
#gameUI .content-holder .section-holder.resources .box-field {
    margin-bottom: 0;
}
#gameUI .content-holder .section-holder.resources .box-field.quick-notes {
    min-width: 150px;
}
#gameUI .content-holder .section-holder.resources.extended .box-field.quick-notes {
    color: transparent;
}
/*modular*/
#gameUI .content-holder .section-holder.several-columns {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    margin-bottom: 5px;
    width: calc(32% - 2px);
    margin-right: 1%;

    border: none;
}
#gameUI .content-holder .section.resources .box-data {
    /*background: rgba(255,255,255, 0.88);*/
    /*color: black;*/
    /*border-top: 1px solid #0199e2;
    border-right: 1px solid #0199e2;
    border-left: 1px solid #0199e2;*/

    padding-bottom: 0;
}
#gameUI .content-holder .section.resources box-holder:last-child .box-data {
    /*border-bottom: 1px solid #0199e2;*/
}
#gameUI .content-holder .section.resources .box-data .title {
    /*color: black;*/
}
#gameUI .content-holder .section.resources .box-data[data-type="buildings"] {
    height: 115px;
}
#gameUI .content-holder .section.resources .box-data[data-subtype="mining_plant"] {
    height: 165px;
}
#gameUI .content-holder .section.resources .box-data[data-subtype="mining_plant"][data-level="0"] {
    /*height: 125px;*/
}

/*#gameUI .content-holder .section-holder.buildings.several-columns .box-data {
    height: 125px;
}*/
/* END NEW RESOURCES */


/* END Ccntent */

/* css animations */
/*modular*/
.flicker {
    color: orange !important;
}
/*modular*/
#gameContent .animation,
#animations-attach-point .animation {
    /*z-index: 1;*/
    pointer-events: none;
    font: 12px/15px var(--font-reg);
}
#animations-attach-point .animation.over-ui {
    z-index: 2;
}
#animations-attach-point .animation.origin-left {
    transform-origin: 0 center;
}
#animations-attach-point .animation.anim-2s {
    animation-duration: 2s;
}
.animation.shine60 {
    position: absolute;
    transform: translateX(100%) rotate(60deg);
    top: -180%;
    width: 100%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.5) 90%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);
    animation: slideHorizontally60Deg 2s ease-out;
}
.animation.shine60.greenish {
    background: linear-gradient(to right, rgba(72, 190, 97,0) 0%,rgba(72, 190, 97,0) 70%,rgba(72, 190, 97,0.5) 90%,rgba(52, 170, 77,0) 99%,rgba(52, 170, 77,0) 100%);
}
/*modular*/
.scale_in_out_text {
    position: absolute;

    left: 250px;
    top: 250px;

    font: 700 12px/15px var(--font-reg);
    color: #ffffff;

    text-align: center;

    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
.scale_in_out_text.enemy {
    color: var(--clr-red-primary);
}
.scale_in_out_text.player {
    color: #00b0ff;
}
.scale_in_out_text.animation.tank_set {
    /*color: #008000;*/
    color: rgb(255, 255, 59);
    color: rgb(59, 255, 157);
    font: 700 15px/15px var(--font-reg);
    z-index: 2;
}
.scale_in_out_text.animation.res_added {
    /*color: #008000;*/
    color: rgb(255, 255, 59);
    color: rgb(59, 255, 157);
    font: 700 15px/15px var(--font-reg);
    z-index: 2;
}
.scale_in_out_text.animation.fully_filled {
    color: yellow;
    font: 700 15px/15px var(--font-reg);
    z-index: 2;
}
/*modular*/
.anim_scaleInOut {
     animation: scaleInOut 4.0s ease-out;
 }
.anim_scaleInOutDown {
     animation: scaleInOutDown 4.0s ease-out;
}
.anim_scaleInOutDownShort {
     animation: scaleInOutDownShort 4.0s ease-out;
}
.anim_scaleInOutSmall {
    animation: scaleInOutSmall 4.0s ease-out;
}
.anim_scaleIn {
    animation: scaleIn 4.0s ease-out;
}
.anim_fadeOutIn {
    opacity: 0;
    animation: fadeOutIn 0.3s ease-out;
    transition: opacity 0.3s ease-in-out;
}
.anim_radialBlur {
    /*background: radial-gradient(#000000, #333333);
    transition: background 2s ease-in-out, opacity 2s ease-in-out;
    animation: radialBlur 2.0s ease-out infinite;*/

    /*background: url('../images/radial_white_blur.png') no-repeat;*/
    transition: background-color 0.6s ease-in-out, opacity 0.6s ease-in-out;
    animation: radialBlur 0.6s ease-out /*infinite*/;
    background: url('../images/overlay/clouds_radial_blur.png') no-repeat, #000000;
    background-size: 100% 100%;
}
.anim_radialBlur.ms-100 {
    transition-duration: 100ms;
    animation-duration: 100ms;
}
.anim_radialBlur.ms-10 {
    transition-duration: 10ms;
    animation-duration: 10ms;
}
@keyframes slideHorizontally60Deg {
    /*0% {transform:translateX(-100%) rotate(60deg);}
    100% {transform:translateX(100%) rotate(60deg);}*/

    0% {transform:translate(-100%, 0) rotate(60deg);}
    100% {transform:translate(100%, 100%) rotate(60deg);}
}
/*modular*/
@keyframes scaleIn{
    0%      { opacity: 1.0; transform:  scale(1.0); }
    100%    { opacity: 0.0; transform:  scale(2.2); }
}
@keyframes scaleInOut {
     0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
     100%    { opacity: 0.0; transform: translate(0, -50px) scale(1.5); }
}
@keyframes scaleInOutDown {
     0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
     100%    { opacity: 0.0; transform: translate(0, 50px) scale(1.5); }
}
@keyframes scaleInOutDownShort {
     0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
     100%    { opacity: 0.0; transform: translate(0, 25px) scale(1.2); }
}
@keyframes scaleInOutSpec {
    0%      { opacity: 1.0; transform: scale(1.0) }
    50%    { opacity: 1.0; transform: scale(1.1); }
    100%    { opacity: 1.0; transform: scale(1.0); }
}
@keyframes scaleOutInSpec {
    0%      { opacity: 1.0; transform: scale(1.0) }
    50%    { opacity: 1.0; transform: scale(0.8); }
    100%    { opacity: 1.0; transform: scale(1.0); }
}
@keyframes scaleInOutSpecIdleCitizens {
    0%      { opacity: 1.0; transform: scale(1.0) }
    50%    { opacity: 1.0; transform: scale(1.4); }
    100%    { opacity: 1.0; transform: scale(1.0); }
}
/*modular*/
@keyframes scaleInOutSmall {
    0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
    100%    { opacity: 0.0; transform: translate(0, -10px) scale(1.1); }
}
/*modular*/
@keyframes scaleFlicker {
    0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
    16%      { opacity: 1.0; transform: translate(0px, 0px) scale(1.2); }
    33%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
    50%      { opacity: 1.0; transform: translate(0px, 0px) scale(1.2); }
    66%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
    83%      { opacity: 1.0; transform: translate(0px, 0px) scale(1.2); }
    100%    { opacity: 1.0; transform: translate(0, 0) scale(1); }
}
/*modular*/
.anim_background_flicker {
    animation: backgroundFlicker 4.0s ease-out;
}
/*modular*/
@keyframes backgroundFlicker {
    0%      { background-color: #FFFF0070;}
    10%      { background-color: transparent;}
    20%      { background-color: #FFFF0070;}
    30%      { background-color: transparent;}
    40%      { background-color: #FFFF0070;}
    50%      { background-color: transparent;}
    60%      { background-color: #FFFF0070;}
    70%      { background-color: transparent}
    80%      { background-color: #FFFF0070;}
    90%      { background-color: transparent}
    100%    { background-color: #FFFF0070; }
}
@keyframes insetShadowFlicker {
    0%       { box-shadow: inset 0px 0px 10px #ffffff;}
    10%      { box-shadow: inset 0px 0px 0px #ffffff;}
    20%      { box-shadow: inset 0px 0px 10px #ffffff;}
    30%      { box-shadow: inset 0px 0px 0px #ffffff;}
    40%      { box-shadow: inset 0px 0px 10px #ffffff;}
    50%      { box-shadow: inset 0px 0px 0px #ffffff;}
    60%      { box-shadow: inset 0px 0px 10px #ffffff;}
    70%      { box-shadow: inset 0px 0px 0px #ffffff;}
    80%      { box-shadow: inset 0px 0px 10px #ffffff;}
    90%      { box-shadow: inset 0px 0px 0px #ffffff;}
    100%     { box-shadow: inset 0px 0px 10px #ffffff;}
}
@keyframes filterBrightnessFlicker {
    0%       { filter: brightness(100%);}
    10%      { filter: brightness(180%);}
    20%      { filter: brightness(100%);}
    30%      { filter: brightness(150%);}
    40%      { filter: brightness(100%);}
    50%      { filter: brightness(150%);}
    60%      { filter: brightness(100%);}
    70%      { filter: brightness(150%);}
    80%      { filter: brightness(100%);}
    90%      { filter: brightness(150%);}
    100%     { filter: brightness(100%);}
}
@keyframes scaleBrightnessFlicker {
    0%       { filter: brightness(100%);transform: scale(1.0);}
    10%      { filter: brightness(150%);transform: scale(1.15);}
    20%      { filter: brightness(100%);transform: scale(1.0);}
    30%      { filter: brightness(150%);transform: scale(1.15);}
    40%      { filter: brightness(100%);transform: scale(1.0);}
    50%      { filter: brightness(150%);transform: scale(1.15);}
    60%      { filter: brightness(100%);transform: scale(1.0);}
    70%      { filter: brightness(150%);transform: scale(1.15);}
    80%      { filter: brightness(100%);transform: scale(1.0);}
    90%      { filter: brightness(150%);transform: scale(1.15);}
    100%     { filter: brightness(100%);transform: scale(1.0);}
}
@keyframes scaleBrightnessFlickerSmaller {
    0%       { filter: brightness(100%);transform: scale(1.0);}
    10%      { filter: brightness(150%);transform: scale(1.1);}
    20%      { filter: brightness(100%);transform: scale(1.0);}
    30%      { filter: brightness(150%);transform: scale(1.1);}
    40%      { filter: brightness(100%);transform: scale(1.0);}
    50%      { filter: brightness(150%);transform: scale(1.1);}
    60%      { filter: brightness(100%);transform: scale(1.0);}
    70%      { filter: brightness(150%);transform: scale(1.1);}
    80%      { filter: brightness(100%);transform: scale(1.0);}
    90%      { filter: brightness(150%);transform: scale(1.1);}
    100%     { filter: brightness(100%);transform: scale(1.0);}
}
@keyframes scaleFlickerSmaller {
    0%       { transform: scale(1.0);}
    10%      { transform: scale(1.07);}
    20%      { transform: scale(1.0);}
    30%      { transform: scale(1.07);}
    40%      { transform: scale(1.0);}
    50%      { transform: scale(1.07);}
    60%      { transform: scale(1.0);}
    70%      { transform: scale(1.07);}
    80%      { transform: scale(1.0);}
    90%      { transform: scale(1.07);}
    100%     { transform: scale(1.0);}
}
@keyframes scaleFlickerSmallerInverted {
    0%       { transform: scale(1.0);}
    10%      { transform: scale(0.90);}
    20%      { transform: scale(1.0);}
    30%      { transform: scale(0.90);}
    40%      { transform: scale(1.0);}
    50%      { transform: scale(0.90);}
    60%      { transform: scale(1.0);}
    70%      { transform: scale(0.90);}
    80%      { transform: scale(1.0);}
    90%      { transform: scale(0.90);}
    100%     { transform: scale(1.0);}
}

@keyframes radialBlur {
    /*0%    { background: radial-gradient(#000000, #000000); opacity: 1;}
    50%    { background: radial-gradient(#000000 30%, transparent); opacity: 1;}
    100%  { background: radial-gradient(#000000 0%, #000000 100%); opacity: 1;}*/
    /*0%   { background: transparent; opacity: 0;}*/
    0%  { background: #000000; opacity: 1;}
    100% { background: transparent; opacity: 1;}
}
@keyframes fadeOutIn {
    0%   { opacity: 0;}
    100% { opacity: 1;}
}
@keyframes fadeInHeightStay {
    0%   { transform: scaleY(0); opacity: 0;}
    3%   { transform: scaleY(1); opacity: 1;}
    100% { opacity: 1;}
}
@keyframes fadeInHeightStayPlusScale {
    0%   { transform: scaleY(0); opacity: 0;}
    3%   { transform: scaleY(1); opacity: 1;}
    5%   { transform: scale(1.1); opacity: 1;}
    7%   { transform: scale(1); opacity: 1;}
    9%   { transform: scale(1.1); opacity: 1;}
    11%   { transform: scale(1); opacity: 1;}
    100% { opacity: 1;}
}
@keyframes fadeInHeight {
    0%   { transform: scaleY(0); opacity: 0;}
    100%   { transform: scaleY(1); opacity: 1;}
}
@keyframes fadeOutHeight {
    /*0%   { transform: scaleY(1); opacity: 1;}
    100%   { transform: scaleY(0); opacity: 0;}*/
    0%   { max-height:100px; opacity: 1;}
    100%   { max-height: 0px; opacity: 0;}
}
@keyframes fadeInWidthHeight {
    0%   { transform: scale(0,0); opacity: 0;}
    100%   { transform: scale(1,1); opacity: 1;}
}
@keyframes fadeOutWidthHeight {
    0%   { transform: scale(1,1); opacity: 1;}
    100%   { transform: scale(0,0); opacity: 0;}
}
/* END css animations */

/* unit icons/images */
/*modular*/
.unit-data .image {
    background-size: contain !important;
}
/*modular*/
.unit-data .image[data-unit-type=tank_1]{
    background: url('../images/units/tank_1_turret.png') center no-repeat, url('../images/units/tank_1_base.png') center no-repeat;
}
/*modular*/
.unit-data .image[data-unit-type=tank_2]{
    background: url('../images/units/tank_2_turret.png') center no-repeat, url('../images/units/tank_2_base.png') center no-repeat;
}

/*modular*/
.part-data .image,
.plan-image > div {
    background: url('../images/units/tank_sprite_updated.png');
    background-size: 400% 1600%;
}
/*modular*/
.plan-image > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
/*modular*/
.part-data .image[data-part-subtype=empty],
.plan-image > div[data-part-subtype=empty] {
    background: none;
}
/*modular*/
.part-data .image[data-part-type=hull],
.plan-image > div[data-part-type=hull]{
    background-position-x: 0;
}
/*modular*/
.part-data .image[data-part-type=turret],
.plan-image > div[data-part-type=turret]{
    background-position-x: -100%;
}
/*modular*/
/*.part-data .image[data-part-subtype=allround],*/
.plan-image > div[data-part-subtype=allround] {
    background-position-y: 0;
}
.plan-image > div[data-part-type="turret"][data-part-subtype="allround"] {
    left: 14%;
}
.plan-image > div[data-part-subtype=allround][data-part-speciality="regular"] {
    background-position-y: 0%;
}
.plan-image > div[data-part-subtype=allround][data-part-speciality="desert"] {
    background-position-y: -100%;
}
.plan-image > div[data-part-subtype=allround][data-part-speciality="dirt"] {
    background-position-y: -200%;
}
.plan-image > div[data-part-subtype=allround][data-part-speciality="snow"] {
    background-position-y: -300%;
}
/*modular*/
/*.part-data .image[data-part-subtype=defensive],*/
.plan-image > div[data-part-subtype=defensive] {
    background-position-y: -400%;
}
.plan-image > div[data-part-type="turret"][data-part-subtype="offensive"] {
    left: 14%;
}
.plan-image > div[data-part-subtype=offensive][data-part-speciality="regular"] {
     background-position-y: -400%;
}
.plan-image > div[data-part-subtype=offensive][data-part-speciality="desert"] {
    background-position-y: -500%;
}
.plan-image > div[data-part-subtype=offensive][data-part-speciality="dirt"] {
    background-position-y: -600%;
}
.plan-image > div[data-part-subtype=offensive][data-part-speciality="snow"] {
    background-position-y: -700%;
}
/*modular*/
/*.part-data .image[data-part-subtype=mobile],*/
.plan-image > div[data-part-type="turret"][data-part-subtype="mobile"] {
    left: 5%;
}
.plan-image > div[data-part-subtype="mobile"][data-part-speciality="regular"] {
    background-position-y: -800%;
}
.plan-image > div[data-part-subtype="mobile"][data-part-speciality="desert"] {
    background-position-y: -900%;
}
.plan-image > div[data-part-subtype="mobile"][data-part-speciality="dirt"] {
    background-position-y: -1000%;
}
.plan-image > div[data-part-subtype="mobile"][data-part-speciality="snow"] {
    background-position-y: -1100%;
}
/*modular*/
/*.part-data .image[data-part-subtype=offensive],*/
.plan-image > div[data-part-type="turret"][data-part-subtype="defensive"] {
    left: 24%;
    top: -3%;
}
.plan-image > div[data-part-subtype=defensive][data-part-speciality="regular"] {
    background-position-y: -1200%;
}
.plan-image > div[data-part-subtype=defensive][data-part-speciality="desert"] {
    background-position-y: -1300%;
}
.plan-image > div[data-part-subtype=defensive][data-part-speciality="dirt"] {
    background-position-y: -1400%;
}
.plan-image > div[data-part-subtype=defensive][data-part-speciality="snow"] {
    background-position-y: -1500%;
}


/* BANNER STUFF BELOW HERE */
.top-left-absolute {
    position: absolute;
    top: 10px;
    left: 10px;
}
.top-right-absolute {
    position: absolute;
    /*top: 10px;
    right: 10px;*/
    bottom: calc(27% - 20px);
    right: 6%;
}
.bottom-right-absolute {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
/* END BANNER STUFF */

/* RESPONSIE STUFF */


/*modular*/
@media screen and (max-width: 1550px) {
    #dynamicDOM .popup-holder.fullscreen .popup-content-holder {
        font: 15px/20px var(--font-reg);
    }
    #gameUI .content-holder .section-holder.several-columns/*,
    #gameUI .content-holder .section-holder.resources*/ {
        width: calc(49% - 2px);
        margin-right: 1%;
    }

    #gameContent.resources .content-holder .section.jobs {
        /*max-width: calc(49% - 10px);
        margin: 5px 0;*/

        /* width is 18px less becuaseo f scroll bar, then account for x1 15 margin, and divide by 2 columns*/
        max-width: calc((100% - 18px) * (99 / 200));
        /* just align to the left now*/
        margin: 0 5px 5px 0;
    }
    /*
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header {
        bottom: 82%;
        max-width:600px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content-holder {
        top: 17%;
        width: 450px;
        max-height: 520px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button {
        width: 250px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .discord-link{
        width: 250px;
        height: 85px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content-holder, #dynamicDOM .popup-holder[data-type="start_menu"] .popup-content-holder {
        top: 17%;
    }*/
    #gameUI .content-holder .global-market .trade-chart-holder {
        height: 330px;
    }
    #gameUI .content-holder .global-market .trade-chart-holder > canvas {
        max-height: 330px;
    }

    #dynamicDOM .extra-overlay .timelapse-controls .status:before {
        margin-left: 5%;
    }
    #dynamicDOM .extra-overlay .timelapse-controls .status:after {
        margin-right: 5%;
    }

    /*#gameUI .overlay .map-navigation {
        left: 390px;
    }
    #gameUI .overlay .map-objectives {
        right: 0;
        max-width: 300px;
    }*/
    #dynamicDOM .popup-holder .popup-content-holder {
        top: 5%;
    }
    #dynamicDOM .popup-holder .popup-content {
        /*max-height: 500px;*/
        /* best solution for scroll issues to properly defined a max/min height of the popup*/
        max-height: clamp(200px, 775px, calc(80vh - 40px));
    }

    /* battle screen adjustments */

    #gameUI .overlay .battle-menu .bottom {
        padding-left: 0;
    }
    #gameUI .overlay .battle-menu .bottom .left {
        /*width: 50%;*/
    }

    #gameUI .overlay .battle-menu .top .center {
        font: 13px/18px var(--font-title);
        height: 16px;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget {
        /*width: 24%;
        max-width: 162px;
        margin-left: 1%;*/
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget > .title {
        /*position: absolute;*/
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget .aura-plaquette {
        /*left: 28px;*/
    }
    #gameUI .overlay .battle-menu .bottom .center > .button-stack {
        height: 110px;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget > .circle {
        width: 80px;
        height: 80px;

        margin-top: 35px;
        background-size: 100% 100%;
    }

    #gameUI .overlay .battle-menu .bottom .corpus-widget > .circle .plan-image{
        top: 24%;
        left: -9%;
    }
    #gameUI .overlay .battle-menu .bottom  .left > .corpus-holder {
        height: 135px;
    }
    #gameUI .overlay .battle-menu .bottom .center {
        height: 133px;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget .active-overlay {
        width: 80px;
        height: 80px;
    }
    #gameUI .overlay .battle-menu .bottom > .left .corpus-holder {
        width: 78%;
    }
    #gameUI .overlay .battle-menu .bottom > .left .buttons-holder {
        width: 20%;
        margin-left: 2%;
    }

    #gameUI .overlay .battle-menu .bottom > .center {
        width: 40%;
    }
    #gameUI .overlay .battle-menu .bottom > .center .aura-widget {
        width: 40%;
        min-width: 160px;
    }
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget {
        width: 60%;
        min-width: 180px;
    }

    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-logo {
        max-height: 100px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-pitch {
        margin-top: -10px;
        max-width: 30%;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .two-columns-justified {
        margin-top: 1%;
    }
    #gameContent #dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu > span {
        font: 700 18px/25px var(--font-reg);
    }



    #gameUI .overlay .side-panel {
        /*width: 305px; /* make sure container size is the same, but give a bit less padding to positio more neatly*/
        /*padding: 54px 10px 10px 60px;*/
        padding: 31px 5px 5px 110px;
    }
    #gameContent.world #gameUI .overlay .side-panel .top-part {
        /*min-height: 195px;*/
    }
    #gameContent.world #gameUI .overlay .side-panel .bottom-part {
        /*height: clamp(200px, calc(100vh - 370px), 50vh);*/
    }

    #dynamicDOM .notifications-new .notification {
        padding: 1px 5px;
        font: 700 12px/16px var(--font-reg);
        min-height: 25px;
    }
    #dynamicDOM .notifications-new .notification .icon {
        width: 25px;
        height: 25px;
    }

    #gameContent.manage_plans .content-holder .left-column {
        width: calc(57% - 30px);
    }

    #gameUI .content-holder .section.create-plans .tab-data .part-data {
        /*padding-left: 3px;*/
        max-width: calc(100% - 3px);
    }
    #gameUI .content-holder .section.create-plans .tab-data .single-part {
        width: 90px;
        height: 90px;
        font-size: 12px;
        line-height: 14px;
    }
    #gameUI .content-holder .section.create-plans .sub-header .buttons-holder .button.dropdown {
        margin-left: 7px;
    }

    #gameUI .tut-bubble {
        padding: 8px;
        font: 13px/13px var(--font-reg);
    }
    #gameUI .content-holder .section.create-plans .delete-holder {
        margin-top: 10px;
    }
    /*#gameContent.factories #gameUI .content-holder .section.buildings {
        width: 100%;
        margin-right: 0;
        max-width: calc(100% - 18px);
    }*/
    #gameContent.factories #gameUI .content-holder .box-holder,
    #gameContent.change_product #gameUI .box-holder {
        width: calc(49% - 2px);
    }
}
@media screen and (max-width: 1200px) {

    #gameUI .overlay .info-bar > div {
        width: 20%;
        margin-right: 5px;
    }
    #gameUI .overlay .top-menu .item.main-resources > div {
        width: auto;
    }
    #gameUI .content-holder .plan-data .plan-design {
        width: 100px;
        margin: 0 160px 0 auto;
    }
    #gameUI .content-holder .plan-data {
        font: 700 12px/16px var(--font-reg);
    }
    #gameUI .content-holder .plan-data .plan-stats {
        margin: 17px auto 5px auto;
    }
    #gameUI .content-holder .section.create-plans .tab-data .single-part {
        width: 70px;
        height: 70px;
        font-size: 10px;
        line-height: 12px;
    }
    #gameContent.manage_plans .content-holder .right-column .tabs .tab {
        padding: 2px 5px;
        font: 700 12px/20px var(--font-reg);

    }
    #gameUI .content-holder .section.produce-plans .title > div:nth-child(1), #gameUI .content-holder .box-holder[data-type="setup-troops"] .title > div:nth-child(1) {
        width: 120px;
        font: 12px/16px var(--font-title);
    }
    #gameUI .content-holder .section.produce-plans .level-widget {
        float: right;
        margin-left: 0;
    }
    #gameUI .content-holder .box-data .queue-item {
        font: 700 14px/16px var(--font-reg);
    }
    #gameUI .content-holder .section.buildings .box-data .desc,
    #gameUI .content-holder .section.produce-plans .box-data .desc,
    #gameUI .content-holder .section.queues .desc,
    #gameUI .content-holder .box-holder[data-type="setup-troops"] .desc {
        font: 700 12px/16px var(--font-reg);
    }
    #gameUI .content-holder .box-data .build, #gameUI .content-holder .box-data .produce {
        font: 12px/14px var(--font-reg);
        padding: 3px 3px;
        min-width: 65px;
    }
    #gameUI .content-holder .box-data .build.maxed[data-cost-types=""], #gameUI .content-holder .box-data .produce.maxed[data-cost-types=""] {
        max-width: 110px;
        font: 11px/14px var(--font-reg);
        right: 4px;
        bottom: 41px;
    }
    #gameUI .content-holder .section.produce-plans .level-widget > .progress-bar {
        width: 80px !important;
    }
    #gameContent.manage_plans .content-holder .right-column .tabs, #gameUI .content-holder .section.manage-plans .sub-header .tabs {
        left: 1px;
    }
    #gameContent.manage_plans .content-holder .right-column .tabs .tab {
        font: 11px/20px var(--font-title);
        padding: 2px 2px;
        margin-left: 1px;
    }
    #gameContent.manage_plans .content-holder .right-column .tabs .tab:nth-child(n+2) {
        margin-left: 1px;
    }
    #gameUI .content-holder .sub-header {
        padding: 5px 2px;
    }
    #gameContent.manage_plans .content-holder .left-column {
        width: calc(45% - 5px);
        margin-right: 5px;
    }
    #gameContent.manage_plans .content-holder .right-column {
        width: 55%;
    }
    #gameContent.produce .content-holder .section.queues .box-data {
        padding: 1px;
        margin-bottom: 1px;
    }
    #gameContent #dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu > span {
        font: 700 15px/15px var(--font-reg);
    }
    #gameUI .content-holder .plan-data .stats-holder {
        position: relative;
        left: 0;
        margin-left: 0;
        top: auto;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    /*#gameUI .content-holder .plan-data .save-design{
        position: absolute;
        left: auto;
        right: 10px;
        top: 205px;
        bottom: auto;
    }
    #gameUI .content-holder .plan-data .cancel-design{
        position: absolute;
        left: auto;
        right: 90px;
        top: 205px;
        bottom: auto;
    }*/
    #gameUI .content-holder .plan-data .save-design-note {
        height: auto;
         position: absolute;
         left: calc(100% - 160px);
         right: 5px;
         top: 230px;
     }
    #gameUI .overlay .battle-menu .bottom .left > .corpus-holder {
        /*width: calc(100% - 200px);*/
        /*width: 100%;*/
        max-width: 100%;
        /*width: max-content;*/
    }

    #gameUI .tut-bubble {
        padding: 5px;
        font: 12px/12px var(--font-reg);
    }
    #gameUI .overlay .controls[data-type="battle"].battle .help {
        right: 10px;
    }
    #gameUI .overlay .controls[data-type="battle"].battle .settings .setting {
        font: 10px/17px var(--font-reg);
        margin-right: 5px;
    }
    #gameUI .overlay .controls[data-type="battle"].battle {
        padding: 2px 10px;
    }
}
/*modular*/
@media screen and (max-width: 1030px) {
    /* start main menu fixes */
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header {
        padding-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-logo {
        max-height: 60px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by {
        margin-left: 4%;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .demo-note {
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="start_game"] {
        margin-top: 10px;
    }
    .menu-box.play-options {
        margin-bottom: 5px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.mini.important-links .icon {
        width: 20px;
        height: 20px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .discord-link-menu {
        min-height: 80px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community .menu-box.discord img {
        height: 60px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by {
        line-height: 24px;
    }
    #gameContent #dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu > span {
        font: 700 12px/15px var(--font-reg);
    }
        /* end main menu fixes */

    #dynamicDOM .popup-holder.fullscreen .popup-content-holder {
        font: 700 12px/16px var(--font-reg);
    }
    /*#gameUI .overlay .top-menu {
        padding: 5px 3px;
    }*/
    #gameUI .overlay .top-menu .item {
        margin-right: 5px;
    }
    #gameContent.resources .content-holder .section.jobs {
        /*max-width: calc(99% - 10px);*/

        /* width is 18px less becuaseo of scroll bar*/
        max-width: calc((100% - 18px));
    }
    #gameUI .overlay .left-menu {
        /*top: 131px;*/
        /*top: 85px;*/
    }
    #gameUI .overlay .left-menu .item {
        width: 50px;
        height: 50px;
    }
    #gameUI .overlay .bottom .item.view.non-view.quick-tutorial {
        width: 50px;
        height: 50px;
        bottom: 60px;
        line-height: 50px;
    }
    #gameUI .overlay .left-menu .item.view.non-view, #gameUI .overlay .bottom .item.view.non-view {
        width: 50px;
        height: 50px;
    }
    #dynamicDOM .notifications {
        height: 30px;
        width: 30px;
    }
    #dynamicDOM .notifications:before {
        width: 30px;
        height: 30px;
        background-position: -60px -30px;
    }
    #dynamicDOM .notifications span {
        bottom: 16px;
        left: 32px;
    }

    #gameUI .overlay .item.game-speed {
        display: none;
    }
    #gameContent.extended-content #gameUI .content-holder {
        /*height: calc(100% - 255px);*/
        left: 60px;
        top: 120px;
        height: calc(100% - 125px);
    }
    #gameUI .overlay .info-bar {
        padding: 3px 5px;
    }
    #gameUI .overlay .sub-menu {
        left: 60px;
        top: 80px;
    }

    /*#dynamicDOM .notifications-holder {
        left: 110px;
        bottom: 65px;
    }
    #dynamicDOM .notifications {
        left: 20px;
        bottom: 60px;
    }*/
    /*#gameUI .overlay .top-menu .item {
        width: max-content;
        margin-right: 0;
        font: 11px/16px var(--font-reg);
        flex: 0 1 82px;
    }
    #gameUI .overlay .top-menu .icon.small {
        width: 20px;
        height: 20px;
    }
    #gameUI .overlay .top-menu .item.game-year {
        flex: 0 0 80px;
    }
    #gameUI .overlay .top-menu .item.timelapse {
        flex: 0 0 114px;
        margin-right: 5px;
    }
    #gameUI .overlay .top-menu .item.population {
        flex: 0 0 128px;
    }
    #gameUI .overlay .top-menu .notification-icon {
        width: 12px;
        height: 12px;
    }*/
    /*.notification-icon.pop-capped {
        top: 2px;
        right: -21px;
    }*/
    /*#gameUI .overlay .ui-holder.top .qol {
        padding: 9px 5px;
        font: 12px/16px var(--font-reg);
        right: 195px;
    }*/
    /*#gameUI .overlay .build-queue {
        padding: 2px 3px;
        width: 130px;
        font: 700 11px/14px var(--font-reg);
        right: 50px;
    }*/
    #gameUI .content-holder .section-holder.buildings.several-columns .box-data {
        /*height: 145px;*/
    }
    /*/ OLD CSS */
    #gameUI .content-holder .section.buildings,
    #gameUI .content-holder .section.produce-plans {
        margin-right: 0;
        max-width: 100%;
    }
    #gameUI .content-holder .section.queues {
        max-width: 100%;
    }
    #gameUI .content-holder .section.buildings {
        width: 48%;
    }
    #gameUI .content-holder .section.queues {
        margin-left: 20px;
        width: 48%;
    }
    #gameUI .content-holder .section.produce-plans > .box-holder {
        width: 48%;
    }
    #gameUI .content-holder .create-plans .tab-data {
        max-width: 100%;
    }
    #gameUI .content-holder .section.create-plans .scroller {
        height: clamp(250px, calc(100vh - 400px), 1000px);
    }
    #dynamicDOM .notifications-new {
        bottom: 35px;
    }
    #dynamicDOM .notifications-new .notification {
        padding: 1px 5px;
        font: 700 12px/16px var(--font-reg);
        min-height: 25px;
    }
    #dynamicDOM .notifications-new .notification .icon {
        width: 25px;
        height: 25px;
    }
    #gameUI .content-holder .global-market .trade-chart-holder {
        height: 230px;
    }

    #dynamicDOM .extra-overlay .timelapse-controls .status:before,
    #dynamicDOM .extra-overlay .timelapse-controls .status:after {
        content: '';
        display: none;
    }

    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-pitch {
        margin-top: -7px;
    }

    #gameUI .overlay .side-panel {
        /*width: 305px; !* make sure container size is the same, but give a bit less padding to positio more neatly*!*/
        padding: 31px 10px 10px 75px;
    }
    #gameContent.world #gameUI .overlay .side-panel .top-part {
        /*min-height: 195px;*/
    }
    #gameContent.world #gameUI .overlay .side-panel .bottom-part {
        height: clamp(200px, calc(100vh - 270px), 55vh);
    }

    #dynamicDOM .quick-tutorial {
        bottom: 50px;
        max-height: calc(100% - 100px);
    }
    /*#dynamicDOM .quick-tutorial .image {
        width: 180px;
        height: 180px;
    }*/

    #dynamicDOM .popup-holder.fullscreen .image {
        width: 160px;
        height: 160px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by.sign-up-form {
        position: relative;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .signup-form {

    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .signup-form input {
        max-width: calc(100% - 92px);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .sign-up.button-style {
        position: absolute;
        bottom: 5px;
        right: 3px;
        margin: 0;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options,
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by {
        margin-left: 10%;
    }
    #gameUI .content-holder .global-market .trade-chart-holder {
        padding: 0;
        height: 160px;
    }
    #gameUI .content-holder .new-trade-order {
        padding: 30px 10px 20px 10px;
    }
    #gameUI .content-holder .new-trade-order .right-side {
        right: 10px;
        padding-right: 40px;
    }
    #gameUI .content-holder .new-trade-order .input-holder {
        width: 200px;
    }

    #gameUI .overlay .battle-menu .bottom .corpus-widget .aura-plaquette {
        /*left: 22px;
        top: 19px;*/
    }

    #gameUI .overlay .battle-menu .bottom .corpus-widget > .circle {
        width: 50px;
        height: 50px;

        margin-top: 20px;
        background-size: 100% 100%;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget > .circle .plan-image {
        transform: rotate(-17deg) scale(0.6);
        top: 7%;
        left: -43%
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget > .amount-holder {
        top: -11px;
        font: 12px/15px var(--font-reg);
        height: 16px;
    }
    #gameUI .overlay .battle-menu .bottom  .left > .corpus-holder {
        height: 85px;
    }
    #gameUI .overlay .battle-menu .bottom .center {
        height: 83px;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget .active-overlay {
        width: 50px;
        height: 50px;
    }
    #gameUI .overlay .battle-menu .bottom > .left .corpus-holder {
        width: 78%;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget > .title {
        font: 10px/12px var(--font-title);
        margin-top: 0;
    }
    #gameUI .overlay .battle-menu .bottom .corpus-widget > .background-layer {
        top: 18px;
    }
    #gameUI .overlay .battle-menu .bottom .center > .button-stack {
        height: 81px;
    }
    #gameUI .overlay .battle-menu .bottom > .left .buttons-holder {
        width: 20%;
        margin-left: 2%;
    }
    #gameUI .overlay .battle-menu .bottom .center > .button-stack > .button {
        margin-top: 3px;
        font: 10px/12px var(--font-reg);
        margin-bottom: 5px;
    }

    #gameUI .overlay .battle-menu .bottom > .center {
        width: 40%;
    }
    #gameUI .overlay .battle-menu .bottom > .center .aura-widget {
        width: 40%;
        min-width: 160px;
    }
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget {
        width: 60%;
        min-width: 180px;
    }

    #gameUI .overlay .ui-holder.left .go-back {
        width: 80px;
        height: 80px;
    }
    #gameUI .overlay .ui-holder.left .clear-all-squadrons {
        top: 100px;
        font: 12px/14px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .utility-widget {
        font: 12px/14px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .utility-widget .top-widget-part {
        width: 85px;
        height: 77px;
    }
    #gameUI .overlay .battle-menu .utility-widget .enter-battle {
        width: 110px;
        height: 110px;
        top: -54px;
        left: -13px;
    }
    #gameUI .overlay .battle-menu .utility-widget .spots {
        font: 12px/13px var(--font-reg);
        bottom: 8px;
    }
    #gameUI .overlay .battle-menu .utility-widget .utility-subholder {
        font: 9px/10px var(--font-reg);
        width: 130px;
        left: -23px;
        padding-top: 15px;
    }
    #gameUI .overlay .battle-menu .utility-widget .utility-subholder > span {
        font-size: 11px;
    }

    #gameUI .overlay .battle-menu .bottom {
        /*padding-bottom: 3px;*/
    }
    #gameUI .overlay .battle-menu .top > div,
    #gameUI .overlay .battle-menu .top .center {
        font: 12px/12px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .top .center {
        height: 12px;
        padding: 3px;
    }
    #gameUI .overlay .battle-menu .bottom > .left .buttons-holder > .spots {
        font: 700 12px/14px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .bottom > .left .buttons-holder > div.button {
        font: 11px/14px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .bottom > .center,
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget,
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget .utility-subholder > div:nth-child(5),
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget .utility-subholder > div:nth-child(6) {
        font: 700 12px/14px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget .utility-subholder > div:nth-child(3),
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget .utility-subholder > div:nth-child(7) {

        font: 900 13px/15px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget .utility-subholder > .idle-citizens-count,
    #gameUI .overlay .battle-menu .bottom > .center .utility-widget .utility-subholder > .idle-citizens-amount {
        font: 700 12px/12px var(--font-reg);
    }
    #gameUI .overlay .battle-menu .bottom > .right .not-yet {
        font: 700 11px/14px var(--font-reg);
    }

    .arrow-right {
        font: 700 50px/20px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="advancement"] .arrow-right {
        top: -14px;
    }
    #gameUI .tut-bubble {
        font: 11px/11px var(--font-reg);
    }

    #gameUI .artillery-options {
        right: 1px;
        top: 143px;
    }
    #gameUI .artillery-options > .choice {
        width: 40px;
        height: 40px;
    }
    #gameUI .toggle-fight {
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
        top: 99px;
        right: 6px;
    }
    #gameUI .toggle-fight.not-selected {
        background-size: 100% 100%;
    }
    #gameUI .overlay .ui-holder.right .active-skill-overlay {
        width: 40px;
        height: 40px;
        background-size: auto 100%;
        left: -1px;
    }
    #gameUI .overlay .ui-holder.right .active-skill-overlay.toggle-fight {
        background-position-x: -40px;
        left: 0;
    }
    #gameUI .overlay .ui-holder.right .active-skill-overlay.gun_1 {
        background-position-x: -80px;
    }
    #gameUI .overlay .ui-holder.right .active-skill-overlay.mg_1 {
        background-position-x: -120px;
    }
    #gameUI .overlay .ui-holder.right .active-skill-overlay.priority-display {
        background-position-x: -160px;
    }
    #gameUI .overlay .ui-holder.right .battle-functions-holder > .reinf{
        right: 6px;
        top: 50px;
    }
    #gameUI .overlay .ui-holder.right .reinf .circle {
        width: 40px;
        height: 40px;
    }
    #gameUI .overlay .ui-holder.right .hotkey-display {
        top: 25px;
        font: 12px/12px var(--font-title);
    }
    #gameUI .overlay .ui-holder.right .reinf .counter {
        width: 18px;
        height: 18px;
        font: 13px/18px var(--font-reg);
        top: -7px;
        right: -4px;
    }
    #gameUI .overlay .ui-holder.right .active-skill-overlay.reinf {
        width: 40px;
        height: 40px;
    }
    #gameUI .overlay .ui-holder.right > .priority-display {
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
        top: 247px;
        right: 6px;
    }
    #gameUI .overlay .battle-menu .bottom .status-bar {
        padding: 2px 5px;
        font: normal 10px/12px var(--font-reg)
    }
    #gameUI .corpus-data-widget.extra-status-1 .circle {
        height: calc(100% - 20px);
        width: calc(100% - 20px);
    }
    #gameUI .overlay .battle-menu .bottom .left > .corpus-holder .corpus-widget .corpus-widget-holder {
        max-width: 80px;
        margin-left: calc((100% - 80px) / 2 );
    }
    #gameUI .overlay .battle-menu .bottom .center > .button-stack > .upg-points > .notification-icon {
        position: absolute;
        top: 7px;
    }

    #dynamicDOM .popup-holder[data-type="start_menu"] .popup-content-holder {
        margin: 0 20px;
    }
}
@media screen and (max-width: 950px) {

    /*Mobile view - menu goes to the bottom  <- does it need to?*/

    /*#gameUI .overlay .left-menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: auto;
        text-align: center;
    }
    #gameUI .overlay .left-menu .item {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 0;
    }*/

    /*#gameUI .overlay .build-queue {
        position: fixed;
        top: auto;
        bottom: 0px;
        right: 10px;
        width: 70px;
        height: 46px;
    }*/
    /*#gameUI .content-holder .section-holder.several-columns,
    #gameUI .content-holder .section-holder.resources {
        width: calc(100% - 2px);
        margin-right: 0%;
    }*/
    #gameUI .content-holder .section-holder.buildings.several-columns .box-data {
        /*height: 125px;*/
    }

    /* reduce sub menu sizes, padding etc to display it more neatly*/
    /*#gameUI .overlay .info-bar > div .icon.s-25-25 {
        width: 15px;
        height: 15px;
    }
    #gameUI .overlay .info-bar > div > span {
        width: calc(100% - 20px);
        font: 11px/25px var(--font-reg);
    }
    #gameUI .overlay .info-bar > div[data-absolute-gain^="-"]::before {
        left: 16px;
    }
    #gameUI .overlay .info-bar > div.tiles, #gameUI .overlay .info-bar > div.knowledge {
        flex: 0 0 90px;
    }*/

    #gameUI .content-holder .box-holder {
        font: 12px/14px var(--font-reg);
    }
    #gameUI .content-holder .title {
        font: 12px/14px var(--font-title);
    }
    #gameUI .content-holder .title > span {
        font: 12px/14px var(--font-title);
    }
    /*#gameUI .content-holder .box-data .assign-cits.max-workers .workers {
        font: 700 12px/20px var(--font-reg);
    }*/
    #gameUI .content-holder .box-data .costs {
        font: 12px/22px var(--font-reg);
    }
    #gameUI .content-holder .box-data .build-time {
        font: 12px/16px var(--font-reg);
    }
    #gameUI .content-holder .box-data .desc .right-part {
        margin-top: 5px;
    }
    #gameUI .content-holder .public-buildings .box-data[data-type="buildings"] {
        padding-top: 5px;
    }

    #gameUI .content-holder .section.produce-plans > .box-holder {
        width: 98%;
    }
    #gameUI .content-holder .section.produce-plans > .box-holder:nth-child(2n) {
        margin-left: 0;
    }
    #gameContent.manage_plans .content-holder .left-column,
    #gameContent.manage_plans .content-holder .right-column {
        width: 100%;
        margin-right: 0;
        margin-left: 0;

        height: auto;
        float: none;
    }
    #gameUI .content-holder .plan-data .stats-holder {
        position: absolute;
        right: 0px;
        left: 400px;
        top: 10px;
        margin: 0 auto;
    }

    /*#gameUI .content-holder .plan-data .save-design{
        position: absolute;
        left: 330px;
        right: auto;
        top: auto;
        bottom: 34px;
    }
    #gameUI .content-holder .plan-data .cancel-design{
        position: absolute;
        left: 255px;
        right: auto;
        top: auto;
        bottom: 34px;
    }*/
    #gameUI .content-holder .plan-data .save-design-note{
        height: 32px;
        position: absolute;
        left: 385px;
        right: auto;
        bottom: 2px;
        top: auto;
    }
    #gameUI .tut-bubble {
        font: 10px/10px var(--font-reg);
    }
    #gameUI .content-holder .section.create-plans .tab-data .single-part {
        width: 60px;
        height: 60px;
        font-size: 9px;
        line-height: 11px;
    }
}
@media screen and (max-width: 900px) {
    #gameUI .content-holder .section-holder.several-columns/*,
    #gameUI .content-holder .section-holder.resources*/ {
        width: calc(100% - 2px);
        margin-right: 0%;
    }

    #gameContent.extended-content #gameUI .content-holder .section.buildings,
    #gameContent.extended-content #gameUI .content-holder .section.queues,
    #gameContent.extended-content.produce #gameUI .content-holder .section.produce-plans{
        width: 98%;
        margin-left: 0;
        margin-right: 0;
    }


    #gameContent.factories #gameUI .content-holder .box-holder,
    #gameContent.change_product #gameUI .box-holder {
        width: calc(100% - 2px);
    }
}

/*modular*/
@media screen and (max-width: 700px) {
    /*#gameUI .overlay .left-menu {
        top: 105px;
    }*/
    #gameUI .content-holder {
        top: 130px;
        height: calc(100% - 180px);
    }
    #gameUI .content-holder .section-holder.several-columns/*,
    #gameUI .content-holder .section-holder.resources*/ {
        max-width: 100%;
    }
    /*#gameUI .overlay .top-menu {
        padding: 5px 1px;
    }*/
    #gameUI .overlay .top-menu .item {
        padding: 4px 2px;
    }

    #dynamicDOM .notifications-holder .notification {
        width: 100%;
        margin-right: 0px;
    }

    #dynamicDOM .popup-holder .popup-content-holder {
        top: 0;
        width: 100%;
        height: 100%;
    }
    /*#gameContent.extended-content #gameUI .content-holder .section.buildings,
    #gameContent.extended-content #gameUI .content-holder .section.queues,
    #gameContent.extended-content.produce #gameUI .content-holder .section.produce-plans{
        width: 98%;
        margin-left: 0;
        margin-right: 0;
    }*/
    #dynamicDOM .quick-popup-holder {
        right: auto !important;:
    }
    #dynamicDOM .quick-popup-holder .popup-content {
        padding: 5px;
    }
    #dynamicDOM .quick-popup-holder .category {
        padding: 5px;
    }
    #dynamicDOM .quick-popup-holder .category .setting {
        margin-right: 2px;
    }


    #gameContent #gameUI .content-holder .left-column {
    }
    #gameContent #gameUI .content-holder .right-column {
        display: block;
        width: 98%;
    }
    #gameUI .content-holder .global-market .trade-chart-holder {
        padding: 0;
        height: 150px;
    }
    #gameUI .content-holder .new-trade-order {
        padding: 30px 10px 20px 10px;
    }
    #gameUI .content-holder .new-trade-order .right-side {
        right: 10px;
        padding-right: 40px;
    }
    #gameUI .content-holder .new-trade-order .input-holder {
        width: 200px;
    }
    #gameUI .content-holder .plan-data .stats-holder {
        position: relative;
        left: 0;
        margin-left: 0;
        top: auto;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        margin-bottom: 15px;
    }


    /*#gameUI .content-holder .plan-data .save-design{
        position: absolute;
        left: auto;
        right: 10px;
        top: 205px;
        bottom: auto;
    }
    #gameUI .content-holder .plan-data .cancel-design{
        position: absolute;
        left: auto;
        right: 90px;
        top: 205px;
        bottom: auto;
    }*/
    #gameUI .content-holder .plan-data .save-design-note {
        height: auto;
        position: absolute;
        left: calc(100% - 160px);
        right: 5px;
        top: 230px;
    }

    #gameUI .tut-bubble {
        font: 9px/9px var(--font-reg);
    }
}
@media screen and (max-height: 800px) {
    #dynamicDOM .popup-holder[data-type="start_menu"] .popup-content-holder {
        top: 1%;
        /*bottom: 0;*/
        max-height: 98%;
        /*margin: auto;*/
    }
    #dynamicDOM .popup-holder[data-type="start_menu"] .popup-content {
        max-height: clamp(200px, 750px, calc(100vh - 40px))
    }
    #dynamicDOM .popup-holder[data-type="start_menu"] .popup-content .section-header {
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="start_menu"] .slide-container {
        margin-top: 3px;
    }
    #dynamicDOM .popup-holder[data-type="start_menu"] .popup-content .title {
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="start_menu"] .distribute-all-perk-points {
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="start_menu"] .slide-container > .slider-value {
        margin-bottom: 5px;
    }

    #dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder {
        margin-top: 5px;
        padding: 5px 20px;
    }
    #dynamicDOM .quick-popup-holder[data-type="filter"] .group-holder .numerical {
        height: 25px;
    }

    #gameUI #dynamicDOM .popup-holder.compact .popup-content-holder > .header {
        line-height: 30px;
        height: 30px;
    }
    #gameUI #dynamicDOM .popup-holder.compact .popup-content-holder > .header .title-note {
        left: auto;
        right: 40px;
        bottom: 8px;
    }
    #gameUI #dynamicDOM .popup-holder.compact .header .close:not(.button-timed) {
        width: 29px;
        height: 29px;
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder {

    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpus-data-widget .title {
        font: 14px/16px var(--font-title);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpus-data-widget.circle-height-120 .circle {
        height: 80px;
        max-height: calc(100% - 20px);
    }
    #dynamicDOM .popup-holder[data-type="battle_results"] .popup-content-holder .corpuses-holder .corpus-data-holder .amount-holder {
        padding: 3px 5px;
        font: normal 10px/14px var(--font-reg);
    }

    #dynamicDOM .quick-popup-holder .popup-content {
        padding: 10px;

        font: 12px/14px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="settings"] .popup-content {
        max-height: clamp(200px, 850px, calc(100vh - 100px));
    }
    #gameUI .overlay .left-menu .item {
        margin-bottom: 8px;
    }
}
@media screen and (max-height: 600px) {
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-logo {
        margin-top: 10px;
        max-height: 70px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-pitch {
        margin-top: -3px;
        max-width: 12%;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .game-options .icon {
        width: 40px;
        height: 40px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .game-options .icon.language {
        width: 66px;
        height: 40px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header {
        padding-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content > .two-columns-justified:not(.bottom-justify) {
        margin-top: 60px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] p {
        margin: 5px 5px;
    }
    .menu-box {
        flex: 0 1 300px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box {
        max-width: 300px;
        font: 700 14px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.steam {
        font: 700 14px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .demo-note {
        font: 700 18px/20px var(--font-reg);
        margin-top: 10px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .big-timer > div > span {
        font: 700 20px/20px var(--font-reg);
    }
    #gameContent #dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu {
        margin: 10px 0 0px 0;
        max-width: clamp(200px, 250px, calc(100%));
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] a img {
        max-width: 100%;
    }
    #gameContent #dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu > span {
        font: 700 15px/15px var(--font-reg);
    }
    #gameContent #dynamicDOM .popup-holder[data-type="main_menu"] .wishlist-link-menu > span {
        font: 700 11px/14px var(--font-reg);
    }
    #gameContent.lang-ru .popup-content .menu-social .menu-option {
        font-size: 16px;
    }
    .menu-box.play-options {
        padding-bottom: 5px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="start_game"] {
        margin-top: 10px;
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="start_game"] {
        font: 16px/25px var(--font-title);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options > div {
        max-width: clamp(200px, 250px, calc(100% - 40px));
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button.small[data-type="new_game"],
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button.small, .load-file {
        /*margin-top: 10px;
        font: 12px/16px var(--font-title);*/
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .popup-content .menu-button[data-type="feedback"] {
        font: 700 12px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.play-options .save-info {
        font: 700 12px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community,
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.important-links,
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.discord {
        font: 700 12px/14px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.community .title {
        font: 700 12px/14px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-box.made-by {
        font: 12px/14px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="main_menu"] .signup-form input {
        height: 16px;
        font: 12px/16px var(--font-reg);

    }

    #dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content {
        padding: 10px;
    }
    #dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .title {
        font: 2em/1.15em var(--font-title);
        margin-bottom: 20px;
    }
    #dynamicDOM .popup-holder.fullscreen .image {
        margin: 5px auto;
    }
    #dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .points-holder {
        padding: 5px;
    }
    #dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .buttons {
        margin-top: 5px;
    }

    #dynamicDOM .popup-holder .popup-content-holder {
        width: 90%;
        max-height: 98%;
        top: 1%;
    }
    #dynamicDOM .popup-holder[data-type="settings"] .popup-content-holder {
        top: 1%;
    }
    #dynamicDOM .popup-holder .popup-content {
        max-height: clamp(200px, 500px, calc(95vh - 20px));
    }
    #dynamicDOM .popup-holder .mission-set {
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder .mission-set .header {
        margin-bottom: 5px;
    }
    #dynamicDOM .popup-holder .missions-data {
        width: calc(90% - 84px);
        margin: 0 5% 5px 5%;
        padding: 10px 10px 0px 55px;
    }
    #dynamicDOM .popup-holder .missions-data .mission {
        font: 12px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder[data-type="language"] .popup-content-holder .setting {
        margin-top: 5px;
        padding: 5px;
        font: 700 14px/16px var(--font-reg);
    }

    #dynamicDOM .popup-holder[data-type="steam_note"] .popup-content-holder {
        max-height: clamp(250px, 690px, calc(100vh - 20px));
    }
    #dynamicDOM .popup-holder[data-type="steam_note"] .popup-content {
        max-height: clamp(200px, 775px, calc(100vh - 80px));
    }
    #dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry {
        margin-top: 1px;
        padding: 2px;
    }
    #dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .item-icon {
        width: 30px;
        height: 30px;
    }
    #dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .text-holder {
        padding-top: 4px;
    }
    #dynamicDOM .popup-holder[data-type="steam_note"] .column-holder .entry .text-holder .title {
        font: 12px/14px var(--font-title);
    }
    #dynamicDOM .popup-holder[data-type="steam_note"] .column-holder {
        padding-bottom: 15px;
    }
    #gameContent.world #gameUI .overlay .side-panel .bottom-part {
        height: clamp(150px, calc(100% - 170px), 60%);
        font: 11px/14px var(--font-reg);
    }
    #gameUI .overlay .side-panel .bottom-part > div {
        /*padding: 2px 25px;*/
    }
    #gameUI .overlay .setup-colony .icon-holder {
        width: 40px;
        height: 40px;
    }
    #gameUI .overlay .setup-colony > span {
        top: 1px;
    }
    #gameUI .overlay .setup-colony .colonies-available {
        font: 700 16px/25px var(--font-reg);
    }
    #gameUI .overlay .controls[data-type="battle"].battle .settings-group {
        margin-top: 0;
    }
    #gameUI .overlay .controls[data-type="battle"].battle .settings .setting {
        font: 700 12px/15px var(--font-reg);
    }
    #gameUI .overlay .controls {
        padding: 1px 5px;
    }
    #gameUI .overlay .controls[data-type="battle"].battle .help {
        top: 3px;
    }
    #gameContent.manage_plans .content-holder .right-column .plan-data .buttons-holder {
        margin-top: 32px;
    }

    .ui-holder.right .research-right-ui {
        top: 72px;
        right: 10px;
    }
    .ui-holder.right .research-right-ui .research-legend {
        margin-bottom: 5px;
        padding: 3px 32px;
    }
    .ui-holder.right .research-right-ui .research-points-left {
        font: 12px/20px var(--font-reg);
    }
    .ui-holder.right .research-right-ui .research-points-left .icon {
        width: 20px;
        height: 20px;
    }
    .ui-holder.right .research-right-ui .prestige-holder {
        margin-top: 5px;
        width: 120px;
        font: 12px/14px var(--font-reg);
        min-height: 160px;
        background: url('../images/research/citizen_behind_prestige_button.png') center calc(100% - 20px) no-repeat, black;
    }
    .ui-holder.right .research-right-ui .prestige-holder.extended-bottom {
        min-height: 160px;
        background: url('../images/research/citizen_behind_prestige_button.png') center calc(100% - 55px) no-repeat, black;
    }
    .ui-holder.right .research-right-ui .prestige-holder .icon.bigger,
    .ui-holder.right .research-right-ui .prestige-holder .icon.large {
        width: 30px;
        height: 30px;
    }
    .ui-holder.right .prestige-holder .title {
        margin-bottom: 5px;
    }
    .ui-holder.right .prestige-holder .prestige.link,
    .ui-holder.right .prestige-holder .prestige {
        font: 12px/15px var(--font-reg);
        padding: 2px 3px;
    }
    .ui-holder.right .prestige-holder.extended-bottom .prestige {
        bottom: 46px;
    }
    #dynamicDOM .quick-tutorial {
        padding: 3px 3px 5px 3px;
    }
    #dynamicDOM .quick-tutorial .header {
        font: 700 14px/16px var(--font-title);
        margin-bottom: 5px;
    }
    #dynamicDOM .quick-tutorial .close {
        top: 3px;
        right: 3px;
    }
    #dynamicDOM .quick-tutorial .sub-title {
        font: 12px/14px var(--font-title);
    }
    #dynamicDOM .quick-tutorial .desc {
        font: 12px/14px var(--font-reg);
    }
    #dynamicDOM .quick-tutorial .image {
        margin: 3px auto;
        width: 180px;
        height: 180px;
    }
    #dynamicDOM .notifications-new .notification {
        max-width: clamp(45vw, 350px, 45vw);
    }
    #dynamicDOM .quick-tutorial .image[data-subtype="manage_plans"], #dynamicDOM .popup-holder.fullscreen .image[data-subtype="manage_plans"] {
        /*height: 160px;
        width: 300px;*/
    }

    #gameUI .overlay .battle-menu .bottom .center > .formation-selector {
        bottom: -1px;
    }
    #gameUI .overlay .battle-menu .bottom .center > .formation-selector .randomize-squadrons {
        margin-top: 15px;
    }
    #gameUI .overlay .battle-menu .bottom .center > .formation-selector .formation-type {

        width: 120px;
        height: 83px;
        margin-top: 8px;
    }
    #gameUI .overlay .battle-menu .bottom .center > .formation-selector .formation-type[data-type="line"] {
        margin-top: 8px;
    }
    #dynamicDOM .quick-popup-holder[data-type="military"] .popup-content {
        font-size: 12px;
        line-height: 13px;
        padding: 5px;
    }

}
@media screen and (max-height: 500px) {
    #dynamicDOM .quick-tutorial .image {
        /*max-height: 40vh;*/
    }
}

@media screen and (max-height: 500px) and (min-width: 900px) {
    #dynamicDOM .popup-holder.fullscreen .popup-content-holder {
        font: 12px/16px var(--font-reg);
    }
    #dynamicDOM .popup-holder.fullscreen[data-type="event_details"] .popup-content-holder .popup-content .subtitle {
        font: 1.1em/1.3em var(--font-title);
        min-height: 7em;
    }
}
.green {
    color: var(--clr-green-primary) !important;
}
.red{
    color: var(--clr-red-primary);
}
.blue{
    color: var(--clr-blue-primary);
}
.yellow{
    color: var(--clr-yellow-primary);
}
.uppered{
    text-transform: uppercase;
}


.shake {
    display: inherit;
    transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
    animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake:hover,
.shake-trigger:hover .shake {
    animation-play-state: running; }

@keyframes shake {
    2% {
        transform: translate(-0.5px, 2.5px) rotate(-0.5deg); }
    4% {
        transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
    6% {
        transform: translate(1.5px, -1.5px) rotate(1.5deg); }
    8% {
        transform: translate(0.5px, 2.5px) rotate(-0.5deg); }
    10% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg); }
    12% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg); }
    14% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg); }
    16% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg); }
    18% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg); }
    20% {
        transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
    22% {
        transform: translate(0.5px, 1.5px) rotate(1.5deg); }
    24% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
    26% {
        transform: translate(-1.5px, -1.5px) rotate(0.5deg); }
    28% {
        transform: translate(1.5px, 2.5px) rotate(1.5deg); }
    30% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg); }
    32% {
        transform: translate(1.5px, 1.5px) rotate(1.5deg); }
    34% {
        transform: translate(2.5px, 0.5px) rotate(-0.5deg); }
    36% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg); }
    38% {
        transform: translate(0.5px, 0.5px) rotate(0.5deg); }
    40% {
        transform: translate(1.5px, -1.5px) rotate(1.5deg); }
    42% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg); }
    44% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
    46% {
        transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
    48% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg); }
    50% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg); }
    52% {
        transform: translate(1.5px, -1.5px) rotate(1.5deg); }
    54% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg); }
    56% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg); }
    58% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg); }
    60% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
    62% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg); }
    64% {
        transform: translate(2.5px, -0.5px) rotate(0.5deg); }
    66% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg); }
    68% {
        transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
    70% {
        transform: translate(2.5px, 0.5px) rotate(-0.5deg); }
    72% {
        transform: translate(1.5px, 0.5px) rotate(1.5deg); }
    74% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg); }
    76% {
        transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
    78% {
        transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
    80% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
    82% {
        transform: translate(-0.5px, 1.5px) rotate(1.5deg); }
    84% {
        transform: translate(-1.5px, 2.5px) rotate(-0.5deg); }
    86% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg); }
    88% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg); }
    90% {
        transform: translate(2.5px, -1.5px) rotate(-0.5deg); }
    92% {
        transform: translate(2.5px, 0.5px) rotate(-0.5deg); }
    94% {
        transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
    96% {
        transform: translate(1.5px, 2.5px) rotate(0.5deg); }
    98% {
        transform: translate(2.5px, -0.5px) rotate(1.5deg); }
    0%, 100% {
        transform: translate(0, 0) rotate(0); } }

/*.shake:hover,
.shake-trigger:hover .shake, .shake.shake-freeze, .shake.shake-constant {*/
.shake {
    animation-name: shake;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    /*animation-iteration-count: infinite;*/
    animation-iteration-count: 28;
    animation-delay: 200ms;
}