/* this file contains only new UI changes CSS, overwrites old ones*/
/* ideally this should be minimized/joined into one css ofcouse, but for starters it's easier*/
/* GENERAL COMMON CSS */
.no-radius {
    border-radius: 0 !important;
}
.just-bottom-left-radius {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* END GENERAL COMMON CSS*/
.icon {
    display: inline-block;
    width: 42px;
    height: 41px;
    /*background: url('../images/new_ui/game/resource_icons.png');
    background-size: 1100% 100%;*/
    background: url('../images/new_ui/game/icons/resource_icons_black.png');
    background-size: 800% 300%;
}
.icon.empty-bg {
    background: url('../images/new_ui/game/icons/resource_icons_transparent.png');
    background-size: 800% 300%;
}
.icon.empty-bg.citizens,
.icon.empty-bg.population { /* needs to be ovrerrided*/
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');

    background-size: 800% 400%;
    background-position: -400% 0;
}
.icon.tiles {
    background-position-x: 0;
}
.icon.mining_deposits {
    background-position-x: -100%;
}
.icon.knowledge,
.icon.research_points {
    background-position-x: -200%;
}
.icon.perk-points,
.icon.perk_points {
    background-position-x: -300%;
}
.icon.food {
    background-position-x: -400%;
}
.icon.water {
    background-position-x: -500%;
}
.icon.wood {
    background-position-x: -600%;
}
.icon.energy {
    background-position-x: -700%;
}
.icon.gold {
    background-position: 0 -100%;
}
.icon.stone {
    background-position: -100% -100%;
}
.icon.iron {
    background-position: -200% -100%;
}
.icon.uranium {
    background-position: -300% -100%;
}
.icon.water_sources {
    background-position: -400% -100%;
}
.icon.parts {
    background-position: -500% -100%;
}
.icon.timer {
    background-position: -600% -100%;
}
.icon.economic_colony {
    background-position: -700% -100%;
}
.icon.economic_colony {
    background-position: 0 -200%;
}
.icon.attack {
    background-position: -100% -200%;
}
.icon.toxicity {
    background: url('../images/new_ui/game/navigation/category_images_darkened.png');
    background-size: 1000% auto;
    background-position-x: -800%;
}
.icon.help {
    /*background: url('../images/new_ui/game/navigation/category_images_darkened.png');
    background-size: 1000% auto;
    background-position-x: -900%;*/

    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: -600% -200%;
}
.button-icon {
    display: inline-block;
    vertical-align: middle;
    width: 27px;
    height: 27px;
    /*background: url('../images/new_ui/game/button_icons.png');*/
    /*background-size: auto 100%;*/
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
}
.button-icon.right {
    background-position: 0 0;
}
.button-icon.left {
    background-position: -100% 0;
}
.button-icon.up {
    background-position: -200% 0;
}
.button-icon.down {
    background-position: -300% 0;
}
.button-icon.citizens {
    background-position: -400% 0;
}
.button-icon.more {
    /*background-position: -500% 0;*/
    background-position: -200% -300%;
}
.button-icon.question {
    background-position: -600% 0;
}
.button-icon.hamburger {
    background-position: -700% -0;
}
.button-icon.minus {
    background-position: 0 -100%;
}
.button-icon.plus {
    background-position: -100% -100%;
}
.button-icon.stats {
    background-position: -200% -100%;
}
.button-icon.demolish,
.button-icon.delete {
    background-position: -300% -100%;
}
.button-icon.close {
    background-position: -400% -100%;
}
.button-icon.time {
    background-position: -500% -100%;
}
.button-icon.download {
    background-position: -600% -100%;
}
.button-icon.world {
    background-position: -700% -100%;
}
.button-icon.society {
    background-position: 0 -200%;
}
.button-icon.army {
    background-position: -100% -200%;
}
.button-icon.factory {
    background-position: -200% -200%;
}
.button-icon.objectives {
    background-position: -300% -200%;
}
.button-icon.paused {
    background-position: -400% -200%;
}
.button-icon.no-citizens {
    background-position: -500% -200%;
}
.button-icon.help {
    background-position: -600% -200%;
}
.button-icon.explore {
    background-position: -700% -200%;
}
.button-icon.control_rate {
    background-position: 0 -300%;
}
.button-icon.power {
    background-position: -100% -300%;
}
#gameContent {
    /*background: url('../images/new_ui/game/game_background.png') bottom center no-repeat;*/
    /*background: url('../images/new_ui/common/backgrounds/bg_game_1.png') bottom center no-repeat;*/
    background: url('../images/new_ui/common/backgrounds/bg_game_2.png') bottom center no-repeat;
    background-size: 100% 100%;
}
/* START MAIN MENU */
#dynamicDOM .popup-holder[data-type="main_menu"] {
    /*background: url('../images/new_ui/menu/menu_background.png') center center no-repeat;*/
    /*background: url('../images/new_ui/common/backgrounds/bg_menu_1.png') bottom center no-repeat;*/
    background: url('../images/new_ui/common/backgrounds/bg_menu_2.png') bottom center no-repeat;
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header {
    position: absolute;
    top: 5%;
    left: 6%;
    max-width: 970px;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-logo {
    /*background: url('../images/new_ui/menu/logo_full.png');*/
    position: relative;
    vertical-align: bottom;
    /*max-width: 85%;*/
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-header .game-logo-demo {
    vertical-align: bottom;
    width: 14%;
    margin-left: 1%;
    padding-bottom: 0.5%;
}
#dynamicDOM .popup-holder[data-type="main_menu"] .menu-notification {
    position: absolute;
    right: 6%;
    top: 5%;
    padding: 20px;

    background: #3e3e3e;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);

    text-align: center;
    font: 16px/20px var(--font-reg);
    max-width: max(250px, 30%);
}
.menu-navigation {
    position: absolute;
    left: 6%;
    bottom: 10%;
}
/*.menu-navigation*/ .menu-option {
    /*font-size: 80px;
    line-height: 90px;*/
    font: 50px/55px var(--font-menu);
    text-shadow: 0.05em 0.05em 0.025em rgba(0, 0, 0, 0.4);
    color: #ffffff;
    margin-bottom: 1%;
    text-transform: uppercase;
}
.menu-option > span {
    font-weight: 100;
    font-size: 0.5em;
    line-height: 1.5em;
    vertical-align: top;
}
/*.menu-navigation*/ .menu-option:hover {
    transform: scale(1.1);
    transform-origin: 0 center;
}
.menu-social {
    position: absolute;
    right: 6%;
    bottom: 10%;

    display: flex;
    justify-content: flex-end;

    color: #ffffff;
}
.menu-social .menu-option {
    position: relative;
    /*font-size: 55px;
    line-height: 60px;*/
    font: 30px/35px var(--font-menu);

    flex: 0 1 auto;
    margin-right: 20px;
    text-shadow: 0.1em 0.1em 0.05em rgba(0, 0, 0, 0.4);
}
.menu-option:last-child {
    margin: 0;
}
.menu-social .menu-option:hover {
    transform: scale(1.03);
    transform-origin: 0 center;
}
.menu-option a {
    text-decoration: none;
    color: #ffffff;
}
.menu-social .menu-option .icon.language {
    position: absolute;
    top: -55px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 82px;
    height: 50px;
}
.menu-social .menu-option:last-child {
    /* this is for language text to better align under picture*/
    min-width: 88px;
    text-align: center;
}
/* END MAIN MENU */
/* INGAME PAUSE MENU */
.popup-holder[data-type="ingame_menu"] .menu-option {
    font: 40px/45px var(--font-menu);
    text-align: center;
    transform-origin: center center;
}
/* END INGAME PAUSE MENU*/
/* START TOP MENU*/
#gameUI .overlay .top-menu {
    height: 60px;
    padding: 0;
    /*font-family: var(--font-title);*/
    font: 20px/22px var(--font-title);
}
#gameUI .overlay .top-menu > div {
    height: calc(100% - 2px);
}
#gameUI .overlay .top-menu .left-side {
    /*background: url('../images/new_ui/game/top_menu_full.png') left top;*/
    background: url('../images/new_ui/common/headerV2.png') left top;
    /*background: url('../images/new_ui/common/headerV3.png') left top;*/
    background-size: 100% 100%;
    padding-bottom: 2px;
}
#gameUI .overlay .top-menu .right-side {
    /*background: green;*/
}
#gameUI .overlay .top-menu .play-pause {
    margin-left: 10px;
}
#gameUI .overlay .top-menu .play-pause .btn-play-pause {
    width: 37px;
    height: 37px;
    background: url('../images/new_ui/game/navigation/category_images_darkened.png');
    background-size: 1000% auto;
    background-position-x: -500%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#gameUI .overlay .top-menu .play-pause .btn-play-pause.play {
    background-position-x: -600%;
}
#gameUI .overlay .top-menu .next-row {
    font: 14px/11px var(--font-reg);
    color: #B6B6B6;
    font-feature-settings: 'tnum';
}
#gameUI .overlay .top-menu .left-side > .game-info {
    align-items: center;
    min-width: 290px;
}
#gameUI .overlay .top-menu .game-speed > div {
    display: inline-block;
    vertical-align: top;
}
#gameUI .overlay .top-menu .game-speed > div:not(.btn-dropdown) {
    box-sizing: border-box;
    border: 1px solid #41535C;
    border-right: 0;
}
#gameUI .overlay .top-menu .left-side > .population {
    margin: 0 1% 0 3%;
}
#gameUI .overlay .top-menu .left-side > .population > .population {
    position: relative;
}
#gameUI .overlay .top-menu .population .button-icon {
    vertical-align: middle;
    width: 19px;
    height: 19px;
}
#gameUI .overlay .top-menu .population .population .next-row {
    padding-left: 19px;
}
#gameUI .overlay .top-menu .left-side .build-queue .build-queue {
    margin-left: 10px;
}
#gameUI .overlay .top-menu .left-side .buy-settings .buy-settings[data-view="qol"] {
    margin-left: 10px;
}
#gameUI .overlay .top-menu .buy-settings .next-row {
    width: max-content;
}
#gameUI .overlay .top-menu .buy-settings .next-row > span > span {
    text-transform: uppercase;
}
/* END TOP MENU*/
.btn {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    /*border-radius: 8px;*/
    border: 2px solid;
    border-image-slice: 1;

    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    /*font: 22px/39px var(--font-btn);*/
    font: 20px/36px var(--font-btn);
}
.btn-inline {
    display: inline-block;
    padding: 0 5px;
}
.btn-smaller {
    font: 14px/16px var(--font-btn);
    padding: 4px 6px;
}
.btn-primary {
    /*background: url('../images/new_ui/game/button_orange.png');
    background-size: 100% 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%);


}
.btn-secondary {
    /*background: url('../images/new_ui/game/button_blue.png');
    background-size: 100% 100%;*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);


}
.btn.disabled,
.btn.click-disabled,
.button.disabled {
    /*background: url('../images/new_ui/game/button_grey.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%);
}
.btn.click-disabled  {
    pointer-events: auto;
    cursor: url('../images/cursors/cursorDefault_1.ico') 4 2, default;
}
.btn.click-disabled.maxed {
    pointer-events: none;
}
.btn-reduce {
    width: 30px;
    height: 30px;
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    background:  #010B10;

    color: #E6E6E6;
}
.btn-reduce:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    /*background-position: -100% 0;*/
    background-position: -400% -300%;
}
.btn-increase {
    width: 30px;
    height: 30px;
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    background:  #010B10;

    color: #E6E6E6;
}
.btn-increase:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    /*background-position: 0 0;*/
    background-position: -300% -300%;
}
.btn-dropdown {
    width: 31px;
    height: 30px;
    /*border-radius: 8px;*/

    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);

    color: #E6E6E6;

    border: 2px solid;
    box-sizing: border-box;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
}
.btn-dropdown:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: -300% 0;
}
.btn-dropdown.plus:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    background-position: -200% 0;
}
.btn-minus {
    display: inline-block;
    width: 30px;
    height: 30px;

    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: url('../images/new_ui/game/minus_icon.png') center center no-repeat, #010B10;*/
    background: #1F1F1F;

    border-right: 1px solid #41535C;

    text-align: center;
    color: #ffffff;
    line-height: 30px;
    /*border-radius: 8px 0 0 8px;*/
}
.btn-minus:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: 0 -100%;
}
.btn-plus {
    display: inline-block;
    width: 30px;
    height: 30px;

    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: url('../images/new_ui/game/plus_icon.png') center center no-repeat, #010B10;*/
    background: #1F1F1F;

    border-left: 1px solid #41535C;

    text-align: center;
    color: #ffffff;
    line-height: 30px;
    /*border-radius: 0 8px 8px 0;*/
}
.btn-plus:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: -100% -100%;
}

.btn-remove-all {
    width: 30px;
    height: 30px;

    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);

    color: #E6E6E6;

    border: 2px solid;
    box-sizing: border-box;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
.btn-remove-all:after { /* needs a helper like this, as otherwise the backgrounds are too full */
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: -400% -100%;
}
.btn-primary:hover {
    filter: brightness(127%);
}
.btn-secondary:not(.click-disabled):active {
    transform: translate(1px, 2px);
}
/* END buttons*/
.input-text {
    width: 40px;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);
    line-height: 28px;
    text-align: center;
    color: #ffffff;
}

#gameUI .overlay .top-menu .right-side > div {
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 70px;*/
    /*height: 70px;*/
    height: 100%;
    background: linear-gradient(180deg, #313131 0%, #0E0E0E 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.45), inset 0px 0px 8px 1px rgba(255, 255, 255, 0.2);
}

/* END TOP MENU */

/* START INFO BAR */
#gameUI .overlay .info-bar {
    /*height: 65px;*/
    height: 50px;
    background: #202020;
    border: 1px solid #393939;
    box-sizing: border-box;
    box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.7);

    color: #E8E8E8;
}
#gameUI .overlay .info-bar > div {
    /*height: 43px;*/
    height: 40px;
    padding: 0;

    margin: 0px 8px;

    /*background: #3E3E3E;*/
    background: #1F1F1F;
    /*border: 1px solid #404040;*/
    border: 1px solid #41535C;
    box-sizing: border-box;
    /*box-shadow: 0px 5.375px 5.375px rgba(0, 0, 0, 0.45), inset 0px 0px 10.75px 1.34375px rgba(0, 0, 0, 0.75);*/
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.45);
    /*border-radius: 11px;*/
    flex-basis: 150px;
}
#gameUI .overlay .info-bar .icon {
    /*width: 42px;
    height: 41px;*/
    width: 39px;
    height: 38px;
    /*border-radius: 9px 0px 0px 9px;*/

    border-right: 1px solid #41535C;
    box-sizing: border-box;
}
#gameUI .overlay .info-bar .resources-values {
    margin-left: 10px;
    display: grid;
    justify-content: left;
    align-content: center;
}
#gameUI .overlay .info-bar .resources-values > span {
    display: block;
    /*font: 14px/16px var(--font-title);*/
    font: 13px/15px var(--font-title);
}
#gameUI .overlay .info-bar .next-row {
    font-size: 10px;
    /*line-height: 14px;*/
    line-height: 13px;
    color: rgba(255, 255, 255, 0.6);
    /*min-height: 14px;*/
    min-height: 13px;
}
#gameUI .overlay .info-bar .next-row[data-absolute-gain^="-"] {
    color: var(--clr-red-primary);
}
#gameUI .overlay .info-bar .next-row[data-absolute-gain]:before {
    content: attr(data-absolute-gain);
    display: inline-block;
}
/* END INFO BAR */
/* START SUB MENU */
#gameUI .overlay .sub-menu {
    /*top: 140px;*/
    top: 115px;
    margin: 0 auto;
    right: 0;
    text-align: center;
}
#gameUI .overlay .sub-menu .item {
    position: relative;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    /*border-radius: 9px;
    border: 2px transparent;
    background-clip: padding-box;*/
    line-height: 30px;
    height: 30px;

    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);


}
#gameUI .overlay .sub-menu .item.active {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);

    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}
/* this is a hack for rounded gradient borders withotu extra elements*/
/*#gameUI .overlay .sub-menu .item:after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border-radius: 9px;
    z-index: -1;
    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
}
#gameUI .overlay .sub-menu .item.active:after {
    background: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}*/
/* END SUB MENU */
/* START LEFT MENU */
#gameUI .overlay .left-menu {
    /*top: 170px;*/
    top: 145px;
}
#gameUI .overlay .left-menu .item, #gameUI .overlay .bottom .item {
    /*border-radius: 7px;*/
    border: 2px solid transparent;
    outline: 1px solid #41535CCC;
    outline-offset: 4px;
}
.left-menu .icon, .bottom .view .icon {
    /*background: url('../images/new_ui/game/menu_icons.png');*/
    background: url('../images/new_ui/game/navigation/category_images_darkened.png');
    background-size: 1000% auto;

}
#gameUI .overlay .left-menu .item.view.active, #gameUI .overlay .bottom .item.view.active,
#gameUI .overlay .left-menu .item.view:hover,
#gameUI .overlay .bottom .item.view:hover {
    /*border: 2px solid #FF9900;*/
    outline: 1px solid #FFB800CC;
}
#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 0 0 12px #FF990065;
}
.item .icon.world {
    background-position: -400%;
}
.item .icon.social {
    background-position: -300%;
}
.item .icon.attack {
    background-position: 0%;
}
.item .icon.economy {
    background-position: -100%;
}
#gameUI .overlay .bottom .icon.objectives {
    background-position: -200%;
}
.left-menu .icon:after,
.bottom .view .icon:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    width: 27px;
    height: 27px;
    background: url('../images/new_ui/game/button_icons.png');
    background-size: auto 100%;
}
.left-menu .world:after {
    background-position-x: -1000%;
}
.left-menu .social:after {
    background-position-x: -700%;
}
.left-menu .attack:after {
    background-position-x: 0;
}
.left-menu .economy:after {
    background-position-x: -200%;
}
.bottom .view .objectives:after {
    background-position-x: -500%;
}

.left-menu .active .icon:after,
.bottom .view.active .icon:after {
    filter: sepia(59%) hue-rotate(-6deg) saturate(557%);
}
/* END LEFT MENU */

/* box holders */
/*#gameUI .content-holder .box-data {
    background: #151515;
    border: 2px solid #404040;
    box-sizing: border-box;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    height: auto;
}
#gameUI .content-holder .section.resources .box-data {
    background: #151515;

}*/
/* START NOTIFICATIONS BAR */
.notification-board {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;

    background: #161616;
    border-top: 1px solid #313131;
    box-sizing: border-box;
    box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.2), inset 0px 0px 8px 1px rgba(0, 0, 0, 0.75);

    color: #A8A8A8;
}
.notification-board.off,
.notification-board.hidden {
    display: none;
}

#gameContent.battle #dynamicDOM .notification-board {
    display: none;
}
.notification-board .holder {
    position: relative;
    /*width: 500px;
    height: 20px;*/
    width: max-content;
    /*background: green;*/
    /*left: 100%;*/
    left: 0;
    transition: transform linear;
}
@keyframes hideToTheLeft {
    to {
        transform: translate(calc(-102% - 20px)); /* a bit extra to go offscreen*/
    }
}
.notification-board .item {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: max-content;
    height: 10px;
    /*background: white;*/
    margin-left: 20px;
    color: rgba(255,255,255,0.8);

    /*transform: translateX(0);

    transition: transform linear;*/
    animation-fill-mode: forwards !important;
}
#dynamicDOM .notification-board:hover .item {
    animation-play-state: paused !important;
}
#dynamicDOM .notification-board .item .notification {
    color: #A8A8A8;
    line-height: 25px;
}
#dynamicDOM .notification-board .item .notification > div {
    display: inline-block;
}
#dynamicDOM .notification-board .item .notification.cit-gain,
#dynamicDOM .notification-board .item .notification.explorer-gain,
#dynamicDOM .notification-board .item .notification.positive {
    color: #5DAE41;
    color: black;
}
#dynamicDOM .notification-board .item .notification.warning {
    /*color: #ffdb00;*/
    color: #ffb800;
}
#dynamicDOM .notification-board .item .notification.danger {
    color: #FF2F2F;
}

#dynamicDOM .notification-board .item .notification .table-list{
    padding-left: 4px;
}
#dynamicDOM .notification-board .item .notification.cit-gain,
#dynamicDOM .notification-board .item .notification.explorer-gain,
#dynamicDOM .notification-board .item .notification.positive {
    color: #A8A8A8;
}
#dynamicDOM .notification-board .item .icon {
    width: 14px;
    height: 14px;
}

#dynamicDOM .notification-board .action-shortcut {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin-right: 5px;
    width: 15px;
    height: 15px;
    /*background: url('../images/new_ui/game/button_icons.png');
    background-size: auto 100%;
    background-position-x: -400%;*/
}
#dynamicDOM .notification-board .action-shortcut:hover {
    transform: scale(1.2);
}
/* END NOTIFICATIONS BAR */
/* START CONTENT HOLDER */
#gameUI .content-holder {
    /*top: 190px;*/
    top: 165px;
}
/*#gameUI .content-holder .section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#gameUI .content-holder .section .section-holder {
    width: calc(100% - 1%);
}*/
/* END CONTENT HOLDER */
/* START RESOURCES */
#gameUI .content-holder .section-holder.resources.extended {
    background: url('../images/new_ui/game/vertical_line.png') center center repeat-y;
}
#gameUI .content-holder .box-holder {
    /*background: #3E3E3E;*/
    /*background: #000000;*/
    background: #1F1F1F;

    /*box-shadow: inset 0px 0px 128px #000000;*/
    /*border: 2px solid #404040;*/
    border: 2px solid #41535C;
    box-sizing: border-box;
    /*filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.35));*/
    /*border-radius: 8px;*/
    /*transform: translate3d(0,0,0);*/

    /*margin-bottom: 20px;*/
    margin-bottom: 10px;
    transform: translate3d(0,0,0);
}
#gameUI .content-holder .extended-data .box-holder[data-type="jobs"] {
    border-top: none;
}
#gameUI .content-holder .box-holder:last-child {
    margin-bottom: 0;
}
#gameUI .content-holder .box-holder.list {
    display: flex;
    background: url('../images/new_ui/game/title_bg_light.png');
    background-size: 100% 100%;
    /*filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.4));*/
    /*border-radius: 8px 8px 0px 0px;*/
    border-bottom: none;
}
#gameUI .content-holder .box-holder.list .box-field {
    /*height: 31px;
    padding: 2px 5px;*/
    height: 28px;
    padding: 1px;
    color: black;
}
#gameUI .content-holder .box-holder .box-field.light {
    background: none;
    color: #000000;
}
/*#gameUI .content-holder .box-holder[data-type="resources"][data-subtype="water"] .box-field.light {
    flex-basis: auto;
}*/
#gameUI .content-holder .box-holder[data-type="resources"][data-subtype="water"] .box-field:not(.light) {
    flex: 0 1 100px;
}
#gameUI .content-holder .box-holder.list .box-field .title {
    color: black;
    /*font: 22px/31px var(--font-title);*/
    font: 20px/30px var(--font-title);
    /*margin-left: 10px;*/
    margin-left: 5px;
}
#gameUI .content-holder .box-holder .box-field.light .icon.small {
    width: 28px;
    height: 28px;
}
#gameUI .content-holder .box-holder.list .box-field span.title > span {
    display: inline-block;
    min-width: 160px;
    font: 14px/30px var(--font-reg);
    text-align: center;
    margin-left: 62px;
}
#gameUI .content-holder .box-holder.list.light .icon.small {
    width: 20px;
    height: 20px;
    position: relative;
    vertical-align: middle;
    top: -2px;
}
#gameUI .content-holder .section .box-header,
#gameUI .content-holder .box-holder .box-header {
    position: relative;
    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-radius: 8px 8px 0 0;*/
    /*border-bottom: 1px solid #404040;*/
    border-bottom: 1px solid #41535C;
}
#gameUI .content-holder .box-holder .box-header > div {
    /*height: 35px;
    line-height: 35px;*/
    height: 32px;
    line-height: 32px;
    color: #ffffff;
}
#gameUI .content-holder .box-holder .box-header > div.right-align {
    text-align: right;
    margin-right: 10px;
}
#gameUI .content-holder .box-holder .box-header .title {
    color: white;
    /*font: 20px/35px var(--font-title);*/
    font: 18px/32px var(--font-title);
    margin-left: 10px;
}
#gameUI .content-holder .box-holder .box-header .title .composition {
    display: inline-block;
    /*font: 15px/35px var(--font-title);*/
    font: 15px/32px var(--font-title);
    color: rgba(255,255,255,0.6);
    margin-left: 70px;
}
#gameUI .content-holder .box-holder .box-header .title .composition > div {
    margin-left: 5px;
}
#gameUI .content-holder .box-holder .box-content {
    /*min-height: 210px;*/
    min-height: 170px;
    color: #ffffff;
}
#gameUI .content-holder .box-holder.auto-height .box-content {
    min-height: auto;
}
#gameUI .content-holder .box-holder.no-workers .box-content {
    /*min-height: 180px;*/
    min-height: 138px;
}
#gameUI .content-holder .box-holder.no-workers.no-output .box-content {
    /*min-height: 138px;*/
    min-height: 113px;
}
#gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(1) {
    display: flex;
    flex-direction: column;
}
#gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(1) > div {
    flex: 0 0 auto;
}
#gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(1) > .icon-holder {
    flex-grow: 1;
}
#gameContent.public_buildings #gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(1) > .icon-holder {
    flex-grow: 0;
}
#gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(1) > .output {
    /*margin-bottom: auto;*/
}
#gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(1) > .assign-cits {
    border-top: 1px solid #41535C;
}
#gameUI .content-holder .box-holder .box-content > .flex-column.bg-mid {
    box-sizing: border-box;
    /*border-left: 1px solid #404040;*/
    border-left: 1px solid #41535C;
    background: url('../images/new_ui/game/dark_bg_1.png');
    background-size: 100% 100%;
}
/*#gameUI .content-holder .box-holder .box-content > .flex-column:nth-of-type(3) {*/
#gameUI .content-holder .box-holder .box-content > .flex-column.bg-right {
    box-sizing: border-box;
    /*border-left: 1px solid #404040;*/
    border-left: 1px solid #41535C;
    background: url('../images/new_ui/game/dark_bg_2.png');
    background-size: 100% 100%;
    /*padding-bottom: 35px;*/
    padding-bottom: 30px;
}
#gameUI .content-holder .box-holder .box-content .btn[data-action-type="build"] {
    text-align: center;

    line-height: 24px;
    padding: 6px 30px 6px 0;
}
#gameUI .content-holder .box-holder .box-content .btn[data-action-type="produce"] {
    line-height: 24px;
    padding: 6px 0px 6px 0;
}
#gameUI .content-holder .box-holder.extra-mid-padding .box-content > .flex-column.bg-mid {
    padding: 5px 10px;
}
/* TODO - replace with actual images*/
#gameUI .content-holder .box-content .icon-holder {
    position: relative;
    /*width: 175px;
    width: auto;*/
    width: 100%;
    /*height: 140px;*/
    height: 119px;
    overflow: hidden;

    /*background: url('../images/new_ui/game/buildings/building_1.png');
    background-size: 100% 100%;*/
}
#gameUI .content-holder .box-holder.no-workers-assigned .box-content .icon-holder:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);

}
#gameUI .content-holder .box-holder.no-workers-assigned .box-content .icon-holder:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 50px;
    margin: auto;

    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: -500% -200%;
}

#notworkingtest #gameUI .content-holder .box-holder .icon-holder .shine-animation {
    position: absolute;
    transform: translateX(100%) rotate(60deg);
    top: -180%;
    width: 100%;
    height: 200%;
    /*background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.13) 77%,
            rgba(255, 255, 255, 0.5) 92%,
            rgba(255, 255, 255, 0.0) 100%
    );*/
    /*background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.8) 90%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);*/
    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: slideHorizontally 2s infinite ease-out;
}
#gameUI .content-holder .box-content .icon-holder .icon-holder-box {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 3px;
    border: 2px solid var(--clr-border-primary);
}
#gameUI .content-holder .box-content .output {
    /*padding: 9px;*/
    padding: 4px;

    background: #000000;
    /*border: 1px solid #404040;*/
    border: 1px solid #41535C;
    border-bottom: none;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-left: none;
    border-right: none;

    /*border-top: 1px solid #404040;*/
    border-top: 1px solid #41535C;
}
#gameUI .content-holder .box-content .output > div {
    background: #5D8D4B;
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.75);
    /*border-radius: 4px;*/

    color: white;
    /*line-height: 22px;*/
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}
/*#gameUI .content-holder .box-content:nth-child(odd) .icon-holder {
    background: url('../images/new_ui/game/buildings/building_2.png');
    background-size: 100% 100%;
}*/
#gameUI .content-holder .box-data .assign-cits .assign-holder {
    /*border: 1px solid #404040;*/
    /*border: 1px solid #41535C;*/
    /*border-radius: 8px;*/
    line-height: 30px;
}
/*#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder {
    border: 1px solid #41535C;
}*/
#gameUI .content-holder .box-data .assign-cits .assign-holder > div {
    display: inline-block;
    vertical-align: top;
    height: 30px;
}
#gameUI .content-holder .box-data .assign-cits .assign-holder > .disabled,
#gameUI .content-holder .box-data .assign-cits .assign-holder > .click-disabled {
    opacity: 0.2;
    pointer-events: none;
}
/*#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > div {
    line-height: 30px;
}*/
#gameUI .content-holder .box-holder .box-data .assign-cits.max-workers .assign-holder > div {
    line-height: 16px;
}
#gameUI .content-holder .box-holder .box-data .assign-cits.max-workers .assign-holder .next-row {
    font-size: 12px;
}
#gameUI .content-holder .box-data .assign-cits .amount {
    width: calc(100% - 62px);
    /*background: radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);*/

    background: #1F1F1F;
    box-sizing: border-box;
    /*box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.45);*/

    text-align: center;
    line-height: 30px;
    color: white;
}
#gameUI .content-holder .box-data .assign-cits .amount:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/new_ui/game/button_icons.png');
    background-size: auto 100%;
    background-position-x: -100%;

    margin-right: 5px;
    vertical-align: middle;
    margin-top: -2px;
}
#gameUI .content-holder .box-data .assign-cits .assign-holder > div.btn-minus {
    /*border-radius: 0 8px 8px 0;*/
}
#gameUI .content-holder .box-data .assign-cits .assign-holder > div.btn-minus {
    /*border-radius: 8px 0 0 8px;*/
}
#gameUI .content-holder .box-data .resource-changes {
    /*background: #292929;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); /* TODO should be just on their holder */
    /*box-shadow: 0px 5.375px 5.375px rgba(0, 0, 0, 0.45), inset 0px 0px 10.75px 1.34375px rgba(0, 0, 0, 0.75);*/

    background: #1F1F1F;
    color: #E8E8E8;
}
#gameUI .content-holder .box-holder.auto-height .box-data .resource-changes {
    padding: 5px;
    text-align: center;
}
#gameUI .content-holder .box-holder.produce-tank .box-data .resource-changes {
    font-size: 12px;
    line-height:14px;
    background: none;
}
#gameUI .content-holder .box-data .resource-change .col-auto .icon {
    height: 39px;
    width: 40px;
}
#gameUI .content-holder .box-data .resource-change {
    position: relative;
    /*border-bottom: 1px solid #404040;*/
    border-bottom: 1px solid #41535C;
    align-items: center;
}
#gameUI .content-holder .box-data .resource-change.cant-afford {
    color: var(--clr-red-primary);
}
#gameUI .content-holder .box-data .resource-change .notification-icon.afford-ratio {
    display: none;
}
#gameUI .content-holder .box-data .resource-change.cant-afford .notification-icon.afford-ratio {
    display: inline-block;
}
#gameUI .content-holder .box-data .resource-change:not(.other-gains) > div:nth-of-type(1) {
    /*border-right: 1px solid #404040;*/
    border-right: 1px solid #41535C;
}
#gameUI .content-holder .box-data .resource-change > div:nth-of-type(2) {
    padding-left: 10px;
}
#gameUI .content-holder .box-data .resource-change > div:nth-of-type(2) .red.uppered {
    font-size: 12px;
}
#gameUI .content-holder .box-data .resource-change.gains > div:nth-of-type(3) {
    align-self: stretch;
    background: url('../images/new_ui/game/up_arrow_green.png') center center no-repeat;
}
#gameUI .content-holder .box-data .resource-change.operational-costs  > div:nth-of-type(3) {
    background: url('../images/new_ui/game/down_arrow_red.png') center center no-repeat;
    align-self: stretch;
}
#gameUI .content-holder .box-data .resource-change.other-gains {
    /*padding: 5px;
    min-height: 32px;*/
    padding: 3px;
    min-height: 33px;
    text-align: center;
}
#gameUI .content-holder .box-data .resource-change.other-gains .icon.help {
    margin-top: -3px;
    margin-left: 3px;
}
#gameUI .content-holder .box-data .next-row {
    /*font-size: 14px;*/
    font-size: 10px;
    line-height: 11px;
    color: #B6B6B6;
}
#gameUI .content-holder .box-data .next-row.red {
    color: var(--clr-red-primary);
}
#gameUI .content-holder .box-data .next-row.green {
    color: var(--clr-green-primary);
}
#gameUI .content-holder .box-data .next-row.higher {
    padding: 5px 0;
}
#gameUI .content-holder .box-data .build-info {
    position: relative;
    /*padding: 10px;*/
    padding: 5px;
}
#gameUI .content-holder .box-data .build-info .build-costs-holder {
    /*margin-top: 5px;*/
    margin-top: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 14px;
}
#gameUI .content-holder .box-data .build-info .build-costs-holder .icon {
    width: 15px;
    height: 15px;
}
#gameUI .content-holder .box-data .build-info .build-costs-holder .red-text {
    color: var(--clr-red-primary);
}
#gameUI .content-holder .box-data .build-info .additional-options {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    height: 30px;
}
#gameUI .content-holder .box-data .build-info .additional-options > div {
    /*border: 1px solid #666666;*/
    border: 1px solid #41535C;
    /*border-image-source: linear-gradient(180deg, #666666 100%, #161616 100%);*/

    /*background: radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);*/
    background: #1F1F1F;
    /*box-shadow: 0px 4px 4px 0px #00000025;*/

    text-align: center;
}
#gameUI .content-holder .box-data .build-info .additional-options > div .button-icon {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}
#gameUI .content-holder .box-data .text-box {
    text-align: right;
    padding: 0 5px;
    line-height: 30px;
}
#gameUI .content-holder .box-data .resource-box {
    /*background: #3E3E3E;*/
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.45), inset 0px 0px 8px 1px rgba(0, 0, 0, 0.75);*/
    background: #1F1F1F;
    /*border: 1px solid #404040;*/
    border: 1px solid #41535C;
    box-sizing: border-box;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.45);
    /*border-radius: 8px;*/

    line-height: 30px;
}
#gameUI .content-holder .box-data .resource-box > div:nth-of-type(1) {
    /*border-right: 1px solid #404040;*/
    border-right: 1px solid #41535C;
    margin-right: 10px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
#gameUI .content-holder .box-holder[data-subtype="water"] .icon.toxicity {
    position: relative;
    top: -2px;
    width: 23px;
    height: 23px;
}
#gameUI .content-holder .box-holder[data-subtype="water"] .icon.water_sources {
    position: relative;
    /*top: -6px;*/
    top: -2px;
}
/* for products specific */
#gameUI .content-holder .box-holder[data-type="products"] {
    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    background-size: 100% 100%;
}
#gameUI .content-holder .box-holder[data-type="products"] .box-content {
    min-height: 170px;
}
#gameUI .content-holder .box-holder[data-type="products"] .box-content .title {
    padding-left: 10px;
    font: 16px/35px var(--font-title);

    border: 1px solid var(--clr-border-primary);
    border-top: none;
    border-left: none;
}
/* end for products specific*/
/* START JOB SPECIFIC */
#gameUI .content-holder .box-holder[data-type="jobs"] {
    border-radius: 0;
    margin-top: 0;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-content {
    min-height: auto;
    /*padding: 10px;*/
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-content > .flex-column:last-child {
    padding: 0 10px;
    /*background: #1F1F1F;*/
    /*box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.45);*/
    align-self: center;
}
#gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-content > .flex-column:last-child {
    align-self: auto;
    padding-right: 0;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .resource-changes {
    /*box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.45);*/
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .resource-change {
    border: none;
    border-right: 1px solid #41535C;
    margin: 0 auto;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .resource-box {
    /*line-height: 41px;*/
    line-height: 39px;
    border: none;
    box-shadow: none;
    background: none;
    font-feature-settings: 'tnum';
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .resource-box span {
    position: relative;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .section-holder.resources .box-holder[data-type="jobs"] .assign-cits {
    /*line-height: 41px;*/
    line-height: 39px;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > div {
    height: 30px;
    /*padding: 5px 0 6px 0;*/
    padding: 4px 0 5px 0;
    background-clip: content-box;
    position: relative;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > .amount {
    /*height: 41px;*/
    height: 39px;
    width: calc(100% - 63px);
}
#gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > div.btn-plus {
    border-right: 1px solid #41535C;
}
#gameUI .content-holder .box-holder .exploring {
    font: 12px/30px var(--font-reg);
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.75);
    height: 100%;
    overflow: hidden;
}
#gameUI .content-holder .box-holder .exploring::before {
    background: #5D8D4B;
}
#gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-data .text-box {
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
}
#gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-data .text-box.hide-change {
    line-height: 30px;
}
#gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-data .text-box .next-row {
    text-align: center;
}
#gameUI .content-holder .box-holder .change-explore-area {
    display: inline-block;
    position: relative;
    top: 2px;
    /*left: 15px;*/
    font: 10px/12px var(--font-reg);
    padding: 3px 5px;
}
#gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-data .text-box.hide-change .change-explore-area {
    display: none;
}
#gameUI .content-holder .box-holder[data-type="jobs"] .resource-change.other-gains {
    border: none;
}
/* END JOB SPECIFIC*/
/* END RESOURCES */

/* START VIEW ADJUSTEMNTS */
#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 .content-holder .box-holder {
    display: inline-block;
    width: calc(32% - 2px);
    margin-right: 1%;
}
#gameContent.change_product #gameUI .box-holder .box-data {
    padding: 5px;
}
#gameUI .content-holder .box-holder.advancing .box-content > .flex-column.bg-right {
    padding: 0;
}
#gameUI .content-holder .box-holder.advancing .advancement-progress {
    max-width: 80%;
}
#gameUI .content-holder .box-holder.advancing .box-data .big-time {
    font: 700 14px/20px var(--font-reg);
    display: inline-block;
    margin-left: 5px;
    min-width: 7ch;
    text-align: left;
}
#gameUI .content-holder .box-holder.advancing [data-arrow="down_after"]::after,
#gameUI .content-holder .box-holder.advancing [data-arrow="up_after"]::after {
    vertical-align: middle;
}
/* END VIEW ADJUSTMENTS */

/* START POPUPS */
/* START POPUPS COMMON */
#dynamicDOM .popup-holder.compact .popup-content-holder {
    background: #151515;
    /*border: 2px solid #404040;*/
    border: 2px solid #41535C;
    box-sizing: border-box;
    box-shadow: 0px 5.808px 11.616px rgba(0, 0, 0, 0.35);
    /*border-radius: 12px;*/
}
#dynamicDOM .popup-holder.compact .popup-content-holder > .header {
    position: relative;
    padding: 0;

    background: url('../images/new_ui/popups/header_bg1.png');
    background-size: 100% 100%;

    line-height: 50px;

    /*border-bottom: 2px solid #404040;*/
    border-bottom: 2px solid #41535C;
    /*filter: drop-shadow(0px 5.808px 5.808px rgba(0, 0, 0, 0.4));*/
}
#dynamicDOM .popup-holder.compact .popup-content-holder > .header .title-note {
    position: absolute;
    bottom: 2px;
    left: 18px;
    font-size: 12px;
    line-height: 14px;
    font-weight: normal;
}
#dynamicDOM .popup-holder.compact .header .close:not(.button-timed) {
    top: 1px;
    right: 1px;
    width: 49px;
    height: 49px;
    /*background: url('../images/new_ui/popups/close_icon.png') center center no-repeat, radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);

    /*border-radius: 0px 10px 0px 0px;*/
}
#dynamicDOM .popup-holder.compact .header .close:not(.button-timed):after {
    content: '';
    display: block;
    margin: 20%;
    width: 60%;
    height: 60%;
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% 400%;
    background-position: -400% -100%;
}
#dynamicDOM .popup-holder.compact .popup-content {
    margin-left: 10px;
    background: url('../images/new_ui/popups/body_bg1.png');
    background-size: 100% 100%;
}
#dynamicDOM .popup-holder.bottom-buttons .popup-content {
    padding-bottom: 66px;
    /*max-height: clamp(200px, 500px, calc(95vh - 140px));*/
    max-height: clamp(200px, 850px, calc(80vh - 140px));
}
#dynamicDOM .popup-holder.compact .buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}
#dynamicDOM .popup-holder.compact .buttons > div {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);
    border: 2px solid #161616;
    /*border-image-source: linear-gradient(180deg, #666666 0%, #161616 100%);*/

    /*border-radius: 0px 0px 0px 9px;*/
    text-align: center;

    color: #ffffff;
    padding: 4px 0;
    font: 20px/25px var(--font-btn);

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}
#dynamicDOM .popup-holder.compact .buttons > div.selected,
#dynamicDOM .popup-holder.compact .buttons > div:hover,
#dynamicDOM .popup-holder.compact[data-type="game_over2"] .buttons > div {
    background: radial-gradient(114.29% 114.29% at 50% 0%, #4678C3 0%, #1D3551 100%);
    border-color: #11203E;

    cursor: url('../images/cursors/cursorPointer_1.ico') 10 1, pointer; /* overriding soem default ccsses*/
}
/* END POPUPS COMMON */

/* START LOAD GAME */
#dynamicDOM .popup-holder[data-type="load_game"] .game-saves {
    display: flex;
    flex-direction: column;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save {
    display: flex;
    align-items: stretch;
    height: 60px;
    margin-top: 10px;

    background: #292929;
    border: 1px solid #646464;
    box-sizing: border-box;
    box-shadow: 0px 7.8045px 7.8045px rgba(0, 0, 0, 0.45), inset 0px 0px 16px 1.95113px rgba(0, 0, 0, 0.75);
    /*border-radius: 8px;*/
    order: 2;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save.restore-point {
    margin-left: 30px;
    margin-top: 3px;
    background: #191919;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save.last-played {
    /*order: 1;*/
    background: rgba(250, 125, 45, 0.6);
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save.selected {
    background: #3E3E3E;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save > div {
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info {
    position: relative;
    flex: 1 1 0;
    color: rgba(255,255,255,0.6);
    padding: 10px;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info:first-child {
    border-right: 1px solid #646464;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info:nth-of-type(2) {
    flex-basis: 250px;
    flex-grow: 0;
    position: relative;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info  .save-name {
    position: relative;
    color: #ffffff;
    font-size: 18px;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save.restore-point .save-info  .save-name {
    /*margin-left: 20px;*/
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info  .save-name > span {
    position: absolute;
    right: 10px;
    font-size: 14px;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .help {
    position: absolute;
    right: 18px;
    top: 6px;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info  .difficulty {
    position: absolute;
    right: 10px;
    top: 0px;
    bottom: 0;
    margin: auto 0;
    height: 16px;
}
#dynamicDOM .popup-holder[data-type="load_game"] .game-save > .save-action {
    align-self: stretch;

    flex: 0 0 60px;
    border: 1px solid #838383;
    /*border-image-source: linear-gradient(180deg, #838383 0%, #3C3C3C 100%);*/
    background: radial-gradient(114.29% 114.29% at 50% 0%, #595959 0%, #1D1D1D 100%);

    display: flex;
    align-items: center;
    justify-content: center;
}
#dynamicDOM .popup-holder[data-type="load_game"] .load-file {
    height: 100%;
    width: 100%;
    line-height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.editable-field {
    min-height: 16px;
}
.editable-field input {
    width: 100%;
    box-sizing: border-box;
}
/* END LOAD GAME */
/* START GAME HELP POPUP */

#dynamicDOM .popup-holder.fullscreen-popup {
    background: rgba(0,0,0,0.9);
    z-index: 3;
}
#dynamicDOM .popup-holder.fullscreen-popup .popup-content-holder {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    top: 0;
    color: white;
}
#dynamicDOM .popup-holder.fullscreen-popup .header {
    text-align: center;
    font: 50px/50px var(--font-title);
    padding-top: 10px;
}
#dynamicDOM .popup-holder.fullscreen-popup .subtitle {
    font: 0.4em/1em var(--font-reg);
    color: #A8A8A8;
}
#dynamicDOM .popup-holder.fullscreen-popup .header .close {
    right: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
}
#dynamicDOM .popup-holder.fullscreen-popup .popup-content {
    height: auto;
    max-height: calc(100% - 100px);
    margin: 0;
    background: none;
    flex-direction: column;
}
#dynamicDOM .popup-holder.fullscreen-popup .help-category {
    width: 100ch;
    max-width: 95%;
    margin: 20px auto 0 auto;
}
#dynamicDOM .popup-holder.fullscreen-popup .popup-content > .help-category {
    min-height: 60px; /* the objective one under header has to be fixed*/
}
#dynamicDOM .popup-holder.fullscreen-popup .popup-content .tab-data {
    padding-left: 9px; /* helps account for centerign stuff, as it's 18px narrower due to scroll holder */
}
#dynamicDOM .popup-holder.fullscreen-popup .tabs-holder {
    height: calc(100% - 100px);
}
#dynamicDOM .popup-holder.fullscreen-popup .tabs {
    min-height: 76px;
    text-align: center;
}
#dynamicDOM .popup-holder.fullscreen-popup .tab {
    font-size: 16px;
    padding: 5px;
    margin-bottom: 3px;
}
#dynamicDOM .popup-holder.fullscreen-popup .tab-data {
    text-align: center;
}
#dynamicDOM .popup-holder.fullscreen-popup .popup-content .scroll-holder {
    height: calc(100% - 60px);
    max-height: calc(100% - 60px);
}
#dynamicDOM .popup-holder.fullscreen-popup .heading {
    display: flex;
    align-items: flex-start;
    color: #A8A8A8;
    /*text-align: left;*/
}
#dynamicDOM .popup-holder.fullscreen-popup .help-category.align-center .heading{
    justify-content: center;
}
#dynamicDOM .popup-holder.fullscreen-popup .desc {
    text-align: left;
    display: flex;
    flex-direction: column;
    /*align-items: flex-start;*/
    justify-content: flex-start;
}
#dynamicDOM .popup-holder.fullscreen-popup .help-category.align-center .desc {
    /*align-items: center;*/
    justify-content: center;
}
#dynamicDOM .popup-holder.fullscreen-popup .help-category .desc .title {
    font: 16px/18px var(--font-title);
}
#dynamicDOM .popup-holder.fullscreen-popup .image-overlay-holder {
    position: relative;
    display: inline-block;
    /*margin: 0 auto;*/
    text-align: center;
}
#dynamicDOM .popup-holder.fullscreen-popup .image-overlay-holder img {
    max-width: calc(100% - 18px);
}
#dynamicDOM .popup-holder.fullscreen-popup .image-overlay-holder .tut-bubble {
    position: absolute;
    max-width: 20%;
    background: black;
    padding: 5px;

    color: white;
    border: 1px solid white;
    /*font: 14px/16px var(--font-reg);*/
}
/* END GAME HELP POPUP*/
/* END POPUPS */
    /* START BUILDINGS ICONS */
/* END BUILDING ICONS */


/* START HELPER STUFF FOR DATA PROGRESS ETC */

/* END HELPER STUFF FOR DATA PROGRESS */
.btn[data-progress] {
    position: relative;
}
.btn[data-progress]:before {
    /*display: none;*/
    content: '';
    position: absolute;

    width: 30px;
    height: 30px;
    background: url('../images/new_ui/game/icons/resource_icons_transparent.png');
    background-size: 800% 300%;
    /*transform-origin: 20% 90%;*/
    transform-origin: 30% 91%;

    right: 4px;
    bottom: 5px;
    /*animation: 1.5s hitHammer ease-in-out infinite;*/
}
@keyframes hitHammer {
    0% {transform: rotate(0deg)}
    50% {transform: rotate(35deg)}
    100% {transform: rotate(0deg)}
}
.btn[data-progress]:not(.click-disabled):not(.disabled):hover:before {
    /*display: block;*/
    animation: 800ms hitHammer ease-in-out infinite;
}
.btn[data-progress]:after {
    content: '';
    transform-origin: 0 0;
    position: absolute;
    width: 80%;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    bottom: 5px;
    left: 10%;
}
.btn[data-progress*="e"]:after,
.btn[data-progress^="0.0"]:after,
.btn[data-progress="0"]:after {
    transform: scaleX(0.0);
}
.btn[data-progress^="0.01"]:after {
    transform: scaleX(0.01);
}
.btn[data-progress^="0.02"]:after {
    transform: scaleX(0.02);
}
.btn[data-progress^="0.03"]:after {
    transform: scaleX(0.03);
}
.btn[data-progress^="0.04"]:after {
    transform: scaleX(0.04);
}
.btn[data-progress^="0.05"]:after {
    transform: scaleX(0.05);
}
.btn[data-progress^="0.06"]:after {
    transform: scaleX(0.06);
}
.btn[data-progress^="0.07"]:after {
    transform: scaleX(0.07);
}
.btn[data-progress^="0.08"]:after {
    transform: scaleX(0.08);
}
.btn[data-progress^="0.09"]:after {
    transform: scaleX(0.09);
}
.btn[data-progress^="0.1"]:after {
    transform: scaleX(0.10);
}
.btn[data-progress^="0.11"]:after {
    transform: scaleX(0.11);
}
.btn[data-progress^="0.12"]:after {
    transform: scaleX(0.12);
}
.btn[data-progress^="0.13"]:after {
    transform: scaleX(0.13);
}
.btn[data-progress^="0.14"]:after {
    transform: scaleX(0.14);
}
.btn[data-progress^="0.15"]:after {
    transform: scaleX(0.15);
}
.btn[data-progress^="0.16"]:after {
    transform: scaleX(0.16);
}
.btn[data-progress^="0.17"]:after {
    transform: scaleX(0.17);
}
.btn[data-progress^="0.18"]:after {
    transform: scaleX(0.18);
}
.btn[data-progress^="0.19"]:after {
    transform: scaleX(0.19);
}
.btn[data-progress^="0.2"]:after {
    transform: scaleX(0.20);
}
.btn[data-progress^="0.21"]:after {
    transform: scaleX(0.21);
}
.btn[data-progress^="0.22"]:after {
    transform: scaleX(0.22);
}
.btn[data-progress^="0.23"]:after {
    transform: scaleX(0.23);
}
.btn[data-progress^="0.24"]:after {
    transform: scaleX(0.24);
}
.btn[data-progress^="0.25"]:after {
    transform: scaleX(0.25);
}
.btn[data-progress^="0.26"]:after {
    transform: scaleX(0.26);
}
.btn[data-progress^="0.27"]:after {
    transform: scaleX(0.27);
}
.btn[data-progress^="0.28"]:after {
    transform: scaleX(0.28);
}
.btn[data-progress^="0.29"]:after {
    transform: scaleX(0.29);
}
.btn[data-progress^="0.3"]:after {
    transform: scaleX(0.30);
}
.btn[data-progress^="0.31"]:after {
    transform: scaleX(0.31);
}
.btn[data-progress^="0.32"]:after {
    transform: scaleX(0.32);
}
.btn[data-progress^="0.33"]:after {
    transform: scaleX(0.33);
}
.btn[data-progress^="0.34"]:after {
    transform: scaleX(0.34);
}
.btn[data-progress^="0.35"]:after {
    transform: scaleX(0.35);
}
.btn[data-progress^="0.36"]:after {
    transform: scaleX(0.36);
}
.btn[data-progress^="0.37"]:after {
    transform: scaleX(0.37);
}
.btn[data-progress^="0.38"]:after {
    transform: scaleX(0.38);
}
.btn[data-progress^="0.39"]:after {
    transform: scaleX(0.39);
}
.btn[data-progress^="0.4"]:after {
    transform: scaleX(0.40);
}
.btn[data-progress^="0.41"]:after {
    transform: scaleX(0.41);
}
.btn[data-progress^="0.42"]:after {
    transform: scaleX(0.42);
}
.btn[data-progress^="0.43"]:after {
    transform: scaleX(0.43);
}
.btn[data-progress^="0.44"]:after {
    transform: scaleX(0.44);
}
.btn[data-progress^="0.45"]:after {
    transform: scaleX(0.45);
}
.btn[data-progress^="0.46"]:after {
    transform: scaleX(0.46);
}
.btn[data-progress^="0.47"]:after {
    transform: scaleX(0.47);
}
.btn[data-progress^="0.48"]:after {
    transform: scaleX(0.48);
}
.btn[data-progress^="0.49"]:after {
    transform: scaleX(0.49);
}
.btn[data-progress^="0.5"]:after {
    transform: scaleX(0.50);
}
.btn[data-progress^="0.51"]:after {
    transform: scaleX(0.51);
}
.btn[data-progress^="0.52"]:after {
    transform: scaleX(0.52);
}
.btn[data-progress^="0.53"]:after {
    transform: scaleX(0.53);
}
.btn[data-progress^="0.54"]:after {
    transform: scaleX(0.54);
}
.btn[data-progress^="0.55"]:after {
    transform: scaleX(0.55);
}
.btn[data-progress^="0.56"]:after {
    transform: scaleX(0.56);
}
.btn[data-progress^="0.57"]:after {
    transform: scaleX(0.57);
}
.btn[data-progress^="0.58"]:after {
    transform: scaleX(0.58);
}
.btn[data-progress^="0.59"]:after {
    transform: scaleX(0.59);
}
.btn[data-progress^="0.6"]:after {
    transform: scaleX(0.60);
}
.btn[data-progress^="0.61"]:after {
    transform: scaleX(0.61);
}
.btn[data-progress^="0.62"]:after {
    transform: scaleX(0.62);
}
.btn[data-progress^="0.63"]:after {
    transform: scaleX(0.63);
}
.btn[data-progress^="0.64"]:after {
    transform: scaleX(0.64);
}
.btn[data-progress^="0.65"]:after {
    transform: scaleX(0.65);
}
.btn[data-progress^="0.66"]:after {
    transform: scaleX(0.66);
}
.btn[data-progress^="0.67"]:after {
    transform: scaleX(0.67);
}
.btn[data-progress^="0.68"]:after {
    transform: scaleX(0.68);
}
.btn[data-progress^="0.69"]:after {
    transform: scaleX(0.69);
}
.btn[data-progress^="0.7"]:after {
    transform: scaleX(0.70);
}
.btn[data-progress^="0.71"]:after {
    transform: scaleX(0.71);
}
.btn[data-progress^="0.72"]:after {
    transform: scaleX(0.72);
}
.btn[data-progress^="0.73"]:after {
    transform: scaleX(0.73);
}
.btn[data-progress^="0.74"]:after {
    transform: scaleX(0.74);
}
.btn[data-progress^="0.75"]:after {
    transform: scaleX(0.75);
}
.btn[data-progress^="0.76"]:after {
    transform: scaleX(0.76);
}
.btn[data-progress^="0.77"]:after {
    transform: scaleX(0.77);
}
.btn[data-progress^="0.78"]:after {
    transform: scaleX(0.78);
}
.btn[data-progress^="0.79"]:after {
    transform: scaleX(0.79);
}
.btn[data-progress^="0.8"]:after {
    transform: scaleX(0.80);
}
.btn[data-progress^="0.81"]:after {
    transform: scaleX(0.81);
}
.btn[data-progress^="0.81"]:after {
    transform: scaleX(0.81);
}
.btn[data-progress^="0.82"]:after {
    transform: scaleX(0.82);
}
.btn[data-progress^="0.83"]:after {
    transform: scaleX(0.83);
}
.btn[data-progress^="0.84"]:after {
    transform: scaleX(0.84);
}
.btn[data-progress^="0.85"]:after {
    transform: scaleX(0.85);
}
.btn[data-progress^="0.86"]:after {
    transform: scaleX(0.86);
}
.btn[data-progress^="0.87"]:after {
    transform: scaleX(0.87);
}
.btn[data-progress^="0.88"]:after {
    transform: scaleX(0.88);
}
.btn[data-progress^="0.89"]:after {
    transform: scaleX(0.89);
}
.btn[data-progress^="0.9"]:after {
    transform: scaleX(0.90);
}
.btn[data-progress^="0.91"]:after {
    transform: scaleX(0.91);
}
.btn[data-progress^="0.92"]:after {
    transform: scaleX(0.92);
}
.btn[data-progress^="0.93"]:after {
    transform: scaleX(0.93);
}
.btn[data-progress^="0.94"]:after {
    transform: scaleX(0.94);
}
.btn[data-progress^="0.95"]:after {
    transform: scaleX(0.95);
}
.btn[data-progress^="0.96"]:after {
    transform: scaleX(0.96);
}
.btn[data-progress^="0.97"]:after {
    transform: scaleX(0.97);
}
.btn[data-progress^="0.98"]:after {
    transform: scaleX(0.98);
}
.btn[data-progress^="0.99"]:after {
    transform: scaleX(0.99);
}
.btn[data-progress^="1"]:after {
    /*/ enough resources available, don't display it */
    transform: scaleX(0);
}

#testHolder {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 999;
    background: white;
}
#testHolder .tester {
    width: max-content;
    padding: 5px;
    background: var(--clr-red-primary);
    transform: translateX(1000px);
    animation: testerAnim 5s 1;
    animation-fill-mode: forwards;
}
.tester.animated  {
    animation: testerAnim 5s 1;
}
@keyframes testerAnim {
    to {
        transform: translate(-50%);
    }
}


/* RESPONSIVE MEDIA QUERY OVERWRITES BELOW - temporary */
@media screen and (max-width: 1550px) {
    #gameUI .overlay .top-menu {
        font-size: 16px;
        line-height: 18px;
        height: 55px;
    }
    #gameUI .overlay .top-menu .next-row {
        font-size: 12px;
        line-height: 10px;
    }
    #gameUI .overlay .top-menu .population .button-icon {
        width: 14px;
        height: 14px;
    }
    #gameUI .overlay .top-menu .population .population .next-row {
        padding-left: 14px;
    }
    #gameUI .overlay .top-menu .citizen-daily-gain {
        padding-left: 14px;
    }
    #gameUI .overlay .top-menu .notification-icon {
        width: 12px;
        height: 12px;
    }
    #gameUI .overlay .top-menu .left-side > .population {
        margin: 0 1%;
        min-width: 290px;
    }

    #gameUI .overlay .info-bar {
        height: 45px;
    }
    #gameUI .overlay .info-bar > div {
        height: 30px;
        margin: 0 3px;
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.45);
    }
    #gameUI .overlay .info-bar > div[data-absolute-gain]::before {
        top: 10px;
        width: 14px;
        height: 8px;
    }
    #gameUI .overlay .info-bar .icon {
        width: 28px;
        height: 28px;
    }
    #gameUI .overlay .info-bar .resources-values {
        margin-left: 4px;
    }
    #gameUI .overlay .info-bar .resources-values > span {
        margin-top: 1px;
        font-size: 12px;
        line-height: 12px;
    }
    #gameUI .overlay .info-bar .next-row {
        font-size: 9px;
        line-height: 10px;
        min-height: 10px;
    }

    #gameUI .overlay .left-menu {
        top: 138px;
    }
    #gameUI .overlay .sub-menu {
        top: 102px;
    }
    #gameContent #gameUI .content-holder {
        top: 148px;
        height: calc(100% - 178px);
    }
    #gameContent.extended-content #gameUI .content-holder {
        top: 148px;
        height: calc(100% - 148px);
    }
    /* START CONTENT */
    #gameContent.factories #gameUI .content-holder .box-holder, #gameContent.change_product #gameUI .content-holder .box-holder {
        width: calc(49% - 2px);
    }
}


@media screen and (max-width: 1200px) {
    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-header {
        top: 5%;
        left: 4%;
    }
    .menu-navigation {
        left: 4%;
        bottom: 5%;
    }
    .menu-social {
        right: 4%;
        bottom: 5%;
    }
    .menu-option {
        font-size: 40px;
        line-height: 45px;
    }
    .menu-social .menu-option {
        font-size: 25px;
        line-height: 30px;
        margin-right: 10px;
    }
    .menu-social .menu-option:last-child {
        min-width: 70px;
    }
    .menu-social .menu-option .icon.language {
        width: 66px;
        height: 40px;
        top: -45px;
    }
    /* START UI */
    #gameUI .overlay .top-menu {
        font-size: 13px;
        line-height: 14px;
        height: 45px;
    }
    #gameUI .overlay .top-menu .next-row {
        font-size: 10px;
        line-height: 11px;
    }
    #gameUI .overlay .top-menu .citizen-daily-gain {
        font-size: 8px;
    }
    #gameUI .overlay .top-menu .left-side > .game-info {
        min-width: 190px;
    }
    #gameUI .overlay .top-menu .play-pause {
        margin-left: 2px;
        flex-basis: 25px;
    }
    #gameUI .overlay .top-menu .play-pause .btn-play-pause {
        width: 20px;
        height: 20px;
    }
    #gameUI .overlay .top-menu .game-info .col-100 {
        flex-basis: 60px;
    }
    #gameUI .overlay .top-menu .game-info .col-150 {
        flex-basis: max-content;
    }
    #gameUI .overlay .top-menu .game-speed > div:not(.btn-dropdown) {
        width: 20px;
        height: 20px;
    }
    #gameUI .overlay .top-menu .input-text {
        width: 30px;
        line-height: 20px;
    }
    #gameUI .overlay .top-menu .game-speed .btn-dropdown {
        width: 20px;
        height: 20px;
    }
    #gameUI .overlay .top-menu .left-side > .population {
        min-width: 220px;
    }
    #gameUI .overlay .top-menu .population .button-icon {
        width: 11px;
        height: 11px;
    }
    #gameUI .overlay .top-menu .population .population .next-row {
        padding-left: 11px;
    }
    #gameUI .overlay .top-menu .citizen-daily-gain {
        padding-left: 11px;
    }
    #gameUI .overlay .top-menu .button-icon.more {
        width: 15px;
        height: 15px;
        margin-top: -2px;
    }
    #gameUI .overlay .top-menu .notification-icon {
        width: 10px;
        height: 10px;
    }
    #gameUI .overlay .top-menu .left-side > .build-queue {
        min-width: 190px;
    }
    #gameUI .overlay .top-menu .left-side .col-30 {
        flex-basis: 20px;
    }
    #gameUI .overlay .top-menu .left-side .buy-settings .buy-settings[data-view="qol"] {
        margin-left: 2px;
    }
    #gameUI .overlay .top-menu .left-side .buy-settings .col-150 {
        flex-basis: max-content;
    }
    #gameUI .overlay .top-menu .right-side {
        flex-basis: 80px;
    }
    #gameUI .overlay .info-bar {
        height: 40px;
    }

    #gameUI .overlay .left-menu {
        top: 110px;
    }
    #gameUI .overlay .sub-menu {
        top: 90px;
    }
    #gameUI .overlay .left-menu .item {
        width: 50px;
        height: 50px;
    }
    #gameUI .overlay .left-menu .item, #gameUI .overlay .bottom .item {
        outline-offset: 2px;
    }
    #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;
    }
    #gameUI .overlay .sub-menu .item {
        height: 20px;
        line-height: 20px;
        font: 12px/20px var(--font-title);
    }
    #dynamicDOM .notification-board .item .notification {
        font-size: 10px;
    }
    /* END UI */
    #gameContent #gameUI .content-holder {
        top: 130px;
        left: 80px;
        height: calc(100% - 160px);
    }
    #gameContent.extended-content #gameUI .content-holder {
        top: 130px;
        left: 80px;
        height: calc(100% - 130px);
    }
    #gameUI .overlay .side-panel {
        padding-left: 85px;
        width: 225px;
    }
    #gameContent.territories #gameUI .overlay .side-panel .top-part {
        min-height: 275px;
    }
    #gameUI .overlay .map-navigation .area-types > div {
        font-size: 10px;
    }
    #gameUI .overlay .map-objectives .conquer-progress {
        font-size: 10px;
    }
    #gameUI .overlay .map-objectives .conquer-progress::before, #gameUI .overlay .map-objectives .conquer-progress::after {
        width: 30px;
        height: 30px;
    }
    #gameUI .overlay .view-types {
        font-size: 12px;
    }
    #gameUI .overlay .global-stat {
        font-size: 0.7em;
    }
    #gameUI .overlay .side-panel .extend-bottom {
        width: 18px;
        height: 18px;
    }
    #gameUI .overlay .relation-stats {
        font-size: 0.7em;
    }
    #gameUI .overlay .relation-stats > div {
        padding: 3px;
    }
    #gameUI .overlay .relation-stats .progress-bar {
        height: 12px;
    }
    #gameUI .overlay .relation-stats .progress-bar::after {
        font-size: 10px;
        line-height: 12px;
    }
    #gameUI .overlay .side-panel .bottom-part .title {
        font-size: 10px;
        margin-bottom: 5px;
    }
    #gameUI .overlay .setup-colony {
        padding: 3px 6px;
        font-size: 10px;
        line-height: 13px;
    }
    #gameUI .overlay .setup-colony .icon-holder {
        width: 40px;
        height: 40px;
    }
    #gameUI .overlay .setup-colony .colonies-available {
        font-size: 16px;
        line-height: 16px;
    }
    /* end side panel*/

    /* start content stuff*/
    #gameUI .content-holder .box-holder {
        margin-bottom: 5px;
    }
    #gameUI .content-holder .box-holder.list .box-field span.title > span {
        margin-left: 5px;
    }
    #gameUI .content-holder .box-holder .box-content > .flex-column.col-180 {
        flex-basis: 130px;
    }
    #gameUI .content-holder .extended-data .box-holder {
        font-size: 12px;
        line-height: 14px;
    }
    #gameUI .content-holder .box-holder .box-content {
        min-height: 150px;
    }
    #gameUI .content-holder .box-holder.no-workers .box-content {
        min-height: 124px;
    }
    #gameUI .content-holder .box-content .icon-holder {
        height: 100px;
    }
    #gameContent.product_stock #gameUI .content-holder .box-content .icon-holder {
        height: 133px;
    }
    #gameUI .content-holder .box-holder.no-workers.no-output .box-content {
        min-height: 98px;
    }
    #gameUI .content-holder .box-holder .box-data .resource-change .col-auto .icon {
        width: 30px;
        height: 30px;
    }
    #gameUI .content-holder .box-holder[data-type="jobs"] .box-data .resource-box {
        /*line-height: 31px;*/
        line-height: 1.1em;
    }
    #gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-data .resource-box {
        /*line-height: 31px;*/
        line-height: 39px;
    }
    #gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > div {
        padding: 3px 0;
        height: 25px;
    }
    #gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > .amount {
        height: 25px;
        /*padding: 3px 0;*/
    }
    #gameUI .content-holder .box-holder:not(.produce-tank) .box-header > div {
        height: 20px;
        line-height: 20px;
    }
    #gameUI .content-holder .box-holder .box-header .title {
        font-size: 15px;
        line-height: 20px;
    }
    #gameUI .content-holder .box-holder .box-header .title .composition{
        line-height: 20px;
    }
    #gameUI .content-holder .box-holder.produce-tank .box-header .title {
        line-height: 35px;
    }
    #gameUI .content-holder .box-data .assign-cits .assign-holder {
        line-height: 25px;
    }
    #gameUI .content-holder .box-data .assign-cits .assign-holder > div:not(.amount) {
        height: 25px;
        width: 25px;
        padding: 2px 0px;
    }
    #gameUI .content-holder .box-holder .box-data .assign-cits .assign-holder  .amount {
        width: calc(100% - 52px);
    }
    #gameUI .content-holder .box-data .build-info .additional-options {
        height: 25px;
    }
    #gameUI .content-holder .box-data .build-info .additional-options > div .button-icon {
        width: 16px;
        height: 16px;
    }

    #gameUI .content-holder .box-holder .box-header .title .composition {
        margin-left: 35px;
    }
    #gameUI .content-holder .box-holder[data-type="jobs"][data-subtype="explorer"] .box-data .text-box .next-row {
        display: inline-block;
    }
    #gameUI .content-holder .box-data .text-box {
        padding-top: 4px;
    }
    #gameUI .content-holder .box-holder[data-type="jobs"] .box-data .assign-cits .assign-holder > .amount {
        width: calc(100% - 53px);
        padding: 0;
        font-size:  12px;
    }
    #gameUI .content-holder .box-content .output {
        padding: 4px;
    }
    #gameUI .content-holder .box-content .output > div {
        line-height: 14px;
        font-size: 10px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .tabs {
        min-height: 60px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .tab {
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        padding: 3px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .heading {
        flex-basis: 100px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .heading .icon.large {
        width: 50px;
        height: 50px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .popup-content-holder {
        font-size: 12px;
        line-height: 14px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .help-category .desc .title {
        font-size: 14px;
        line-height: 16px;
    }
}
@media screen and (max-width: 1030px) {
    #dynamicDOM .popup-holder.compact .buttons > div {
        font: 20px/35px var(--font-btn);
        min-height: auto;
    }
    #dynamicDOM .popup-holder.bottom-buttons .popup-content {
        padding-bottom: 48px;
        max-height: clamp(200px, 850px, calc(80vh - 53px))
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save {
        height: 40px;
        margin-top: 5px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info {
        padding: 3px;
        font-size: 12px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info:first-child {
        min-width: 200px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .save-name {
        font-size: 14px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .save-name > span {
        font-size: 12px;
        right: 5px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .button-icon.tiny {
        width: 12px;
        height: 12px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .button-icon.tiny.time {
        margin: -4px 4px 0 4px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save > .save-action {
        flex-basis: 40px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save > .save-action .icon {
        width: 40px;
        height: 40px;
    }
    /* END MAIN MENU */

    #gameUI .overlay .top-menu {
        font-size: 12px;
        line-height: 13px;
        height: 40px;
    }
    #gameUI .overlay .info-bar {
        height: 35px;
    }
    #gameUI .overlay .info-bar > div {
        height: 26px;
        margin: 0 1px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
    }
    #gameUI .overlay .info-bar > div[data-absolute-gain]::before {
        top: 8px;
        right: 2px;
        width: 10px;
        height: 6px;
    }
    #gameUI .overlay .info-bar .icon {
        width: 24px;
        height: 24px;
    }
    #gameUI .overlay .info-bar .resources-values {
        margin-left: 2px;
    }
    #gameUI .overlay .info-bar .resources-values > span {
        margin-top: 1px;
        font-size: 10px;
        line-height: 10px;
    }
    #gameUI .overlay .info-bar .next-row {
        font-size: 8px;
        line-height: 9px;
        min-height: 9px;
    }

    #gameUI .overlay .left-menu {
        top: 109px;
    }
    #gameUI .overlay .sub-menu {
        top: 74px;
        /*left: 300px; !* to senceter it better ot not cover side panel *!*/
    }
    #gameContent #gameUI .content-holder {
        top: 106px;
        height: calc(100% - 136px);
    }
    #gameContent.extended-content #gameUI .content-holder {
        top: 106px;
        height: calc(100% - 106px);
    }
    #dynamicDOM .popup-holder.fullscreen-popup .tabs {
        min-height: 52px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .tab {
        font-size: 12px;
        line-height: 16px;
        height: 16px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .heading {
        flex-basis: 80px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .heading .icon.large {
        width: 40px;
        height: 40px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .popup-content-holder {
        font-size: 11px;
        line-height: 12px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .help-category .desc .title {
        font-size: 13px;
        line-height: 14px;
    }
    .achievement-box {
        min-width: 250px;
    }

    #gameUI .content-holder .new-trade-order .execute-order {
        top: 0;
        right: -4px;
        padding: 1px 4px;
        font-size: 12px;
    }
}
@media screen and (max-width: 950px) {
    .menu-option {
        font-size: 30px;
        line-height: 35px;
    }
    .menu-social .menu-option {
        font-size: 20px;
        line-height: 25px;
        margin-right: 5px;
    }
    .menu-social .menu-option:last-child {
        min-width: 55px;
    }
    .menu-social .menu-option .icon.language {
        width: 56px;
        height: 34px;
        top: -33px;
    }
    #gameContent.lang-ru .menu-option {
        font-size: 22px;
        line-height: 28px;
    }

    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info {
        font-size: 10px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info:first-child {
        min-width: 180px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .save-name {
        font-size: 12px;
    }
    #dynamicDOM .popup-holder[data-type="load_game"] .game-save .save-info .save-name > span {
        font-size: 10px;
        right: 5px;
    }
    #gameContent.factories #gameUI .content-holder .box-holder, #gameContent.change_product #gameUI .content-holder .box-holder {
        width: 100%;
        margin-right: 0;
    }
}
@media screen and (max-width: 700px) {
    #dynamicDOM .popup-holder.fullscreen-popup .tabs {
        min-height: 44px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .tab {
        font-size: 10px;
        line-height: 12px;
        height: 12px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .heading {
        flex-basis: 60px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .heading .icon.large {
        width: 30px;
        height: 30px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .popup-content-holder {
        font-size: 10px;
        line-height: 11px;
    }
    #dynamicDOM .popup-holder.fullscreen-popup .help-category .desc .title {
        font-size: 12px;
        line-height: 14px;
    }
}
@media screen and (max-height: 800px) {
    #gameUI .content-holder .box-data .resource-change.other-gains {
        padding: 0;
    }
}
@media screen and (max-height: 600px) {
    .ui-holder .research-right-ui .side-holder:not(:last-child) {
        margin-bottom: 5px;
    }
    .ui-holder .research-right-ui .side-holder .title {
        padding: 3px 6px;
        font: 12px/14px var(--font-title);
    }
    .research-icon::before {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
    .ui-holder .research-right-ui .side-holder:not(.prestige-holder) .holder-content {
        padding: 2px;
    }
    .ui-holder .research-right-ui .prestige-holder .holder-content {
        padding: 70px 0 5px 0;
        background: url('../images/research/citizen_behind_prestige_button.png') center calc(100% - 55px) no-repeat, #3e3e3e;
    }
    .ui-holder .prestige-holder .prestige {
        padding: 3px 32px;
    }
    .ui-holder .prestige-holder .below-button .icon {
        width: 20px;
        height: 20px;
    }

    #dynamicDOM .popup-holder[data-type="main_menu"] .menu-notification {
        padding: 10px;
        font: 14px/16px var(--font-reg);
    }
}
@media screen and (max-height: 500px) {

}
@media screen and (max-height: 500px) and (min-width: 900px) {

}