:root {
    --font-reg: 'inter';
    --font-title: 'bebas';
    --font-btn: 'bebas';
    --font-menu: 'bebas';

    --clr-red-primary: #fd2832;
    --clr-green-primary: #48be61;
    --clr-blue-primary: #5b9eff;
    --clr-yellow-primary: #ffb800;
    --clr-grey-primary: #B6B6B6;

    --clr-border-primary: #41535C;

    --title-bg-dark-img: url('../images/new_ui/game/title_bg_dark.png') center center/100% 100%;
    --title-bg-light-img: url('../images/new_ui/game/title_bg_light.png');
}
html {
    margin: 0;
    padding: 0;
    font-family: 'inter', 'Helvetica';
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    height: 100%;
}
/*modular*/
body {
    margin: 0;
    padding: 0;
    background: #cfd6d7;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */

    color: white;
}
/* compatibility issues */

.compatibility-issues {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    right: 0;
    width: 80%;
    height: calc(100% - 100px);
    margin: 0 auto;
    background: black;
    color: white;
    padding: 100px 10% 0 10%;
    font-size: 14px;
    line-height: 18px;

    text-align: center;
}
.compatibility-issues > div {
    max-width: 600px;
    margin: 0 auto;
}
/*modular*/
#mainContainer {
    width: 100%;
    height: 100%;
    /*width: 1000px;*/
    max-width: 100%;
    margin: 0 auto;
}
/*modular*/
#mainContent {
    position: relative;
    margin: 0 auto;
    /*width: 600px;
    min-height: 540px;*/
    /*width: 600px;
    min-height: 540px;*/
    width: 100%;
    height: 100%;
    /*background: url('../images/backgrounds/desert1.jpg') center center no-repeat;
    background: url('../images/backgrounds/grass_1.png') center center no-repeat;*/

    /*background: #102331;*/

}
/*modular*/
#gameContent {
    min-height: inherit;
    position: relative;
    width: 100%;
    height: 100%;

    /*background: url('../images/new/bg_new.jpg') bottom center no-repeat;*/
    /*background: url('../images/backgrounds/BG_test12.jpg') bottom center no-repeat;*/
    /*background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;*/
    overflow: hidden;
}
#gameContent.research {
    /*background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;*/
    /*background: url('../images/starting_story/armagedon_bg.jpg') top center no-repeat;*/
    background-size: 100% 100%;
}
#gameContent.global_market {
    /*background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;*/
    background-size: 100% 100%;
}
#gameContent.world {
    /*background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;*/
    /*background: url('../images/clouds_dark.png'), url('../images/clouds_dark.png') -200px -200px, url('../images/clouds_dark.png') -200px 200px, url('../images/clouds_dark.png') -200px 0px, url('../images/clouds_dark.png') 0px -200px;
    background-size: 400px 400px;*/
    /*background: #0f2342;*/ /*old bg*/
    /*background: #46b7b7;*/
}
#gameContent.territories {
    /*background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;*/
    background: url('../images/clouds_dark.png'), url('../images/clouds_dark.png') -200px -200px, url('../images/clouds_dark.png') -200px 200px, url('../images/clouds_dark.png') -200px 0px, url('../images/clouds_dark.png') 0px -200px;
    background-size: 400px 400px;
}
#gameContent.battle_select {
    /*background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;*/
    background: url('../images/clouds_dark.png'), url('../images/clouds_dark.png') -200px -200px, url('../images/clouds_dark.png') -200px 200px, url('../images/clouds_dark.png') -200px 0px, url('../images/clouds_dark.png') 0px -200px;
    background-size: 400px 400px;
}
#gameContent.setup_troops {
    background: url('../images/new/wd_bg2_research.jpg') top center no-repeat;
}
#gameContent{
    /*background: green !important;*/
}
#gameContent.research .animation-holder {
    /*background: rgba(0,0,0,0.88);*/
                                 }
 /*handle background scaling based on orientation/width:height ratio */
@media all and (orientation:portrait) {
    #gameContent {
        background-size: auto 100%;
    }
}
@media all and (orientation:landscape) {
    #gameContent {
        background-size: 100% 100%;
    }
}
@media screen and (min-width: 1920px) {
    #gameContent {
        background-size: 100% 100%;
    }
}
@media screen and (min-height: 1080px) {
    #gameContent {
        background-size: 100% 100%;
    }
}
@media screen and (min-height: 900px) {
    #dynamicDOM .popup-holder .popup-content {
        max-height: 600px;
    }
}
@media screen and (min-height: 800px) {
    #dynamicDOM .popup-holder .popup-content {
        max-height: 550px;
    }
}
@media screen and (min-height: 700px) {
    #dynamicDOM .popup-holder .popup-content {
        max-height: 500px;
    }
}
@media screen and (min-height: 600px) {
    #dynamicDOM .popup-holder .popup-content {
        max-height: 400px;
    }
}
#gameContent.battle {
    /*background: url('../images/backgrounds/desert1.jpg') center center no-repeat;
    background: url('../images/backgrounds/grass_1.png') center center no-repeat;
    background: url('../images/backgrounds/grass_2_min.png') center center no-repeat;*/
    background-size: 100% 100%;
    background: black;
}
/* GENERAL HELPERS */
/*modular*/
.disabled, .in-progress {
    pointer-events: none;
    opacity: 0.8;
}
.disabled.tutorial-flicker {
    pointer-events: auto;
    cursor: url('../images/cursors/cursorDefault_1.ico') 4 2, default;
}
/*modular*/
.disabled-click {
    color: #4d4d4d;
    opacity: 0.5;
    cursor: url('../images/cursors/cursorDefault_1.ico') 4 2, default !important;
}
/*modular*/
.not-displayed {
    display: none !important;
}
.hidden {
    opacity: 0;
    pointer-events: none;
}
/*modular*/
.not-available {
    display: none !important;
}
.force-in-front {
    z-index: 999 !important;
}
.no-pointer-events {
    pointer-events: none !important;
}
.margin-top-5 {
    margin-top: 5px;
}
.margin-top-15 {
    margin-top: 15px;
}
.over-basic-ui {
    z-index: 99;
}
.no-margin {
    margin: 0 !important;
}
/* END GENERAL HELPERS */
/* Cursor stuff */
html {
    cursor: url('../images/cursors/cursorDefault_1.ico') 4 2, default;
}
[cursorType=default] {
    cursor: url('../images/cursors/cursorDefault_1.ico') 4 2, default;
}
[cursorType=pointer]:not(.disabled):not(.active):not(.selected) {
    cursor: url('../images/cursors/cursorPointer_1.ico') 10 1, pointer;
}
[cursorType=text]:not(.disabled):not(.not-active) {
    cursor: url('../images/cursors/cursorText_1.ico') 14 16, text;
}
[cursorType=target]:not(.disabled):not(.not-active) {
    cursor: url('../images/cursors/targetCursor.ico') 38 38, default;
}
textarea, input, code {
    cursor: url('../images/cursors/cursorText_1.ico') 14 16, text;
}
a {
    cursor: url('../images/cursors/cursorPointer_1.ico') 10 1, pointer;
    color: yellow;
}
select {
    cursor: url('../images/cursors/cursorPointer_1.ico') 10 1, pointer;
}
label {
    cursor: url('../images/cursors/cursorDefault_1.ico') 4 2, default;
}
.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
    cursor: url('../images/cursors/cursorPointer_1.ico') 10 1, pointer !important;
}
/* Cursor helpers */
/* buttons */
/*modular*/
.button {
    display: inline-block;
    padding: 3px 4px;
    /*color: white;*/
    font: 14px/16px var(--font-btn);
    text-align: center;

    /*background: url('../images/new/build_upgrade_button.png') no-repeat;
    background-size: 100% 100%;*/


    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%, #DC642D 0%, #5C2712 100%);

    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}
/*modular*/
.button-style {
    display: inline-block;
    padding: 3px 4px;
    /*background: #0199e2;*/
    /*color: white;*/
    font: 14px/16px var(--font-btn);
    text-align: center;

    /*background: url('../images/new/build_upgrade_button.png') no-repeat !important;
    background-size: 100% 100% !important;*/
    /*background: url('../images/new/buttons_updated.png') no-repeat !important;
    background-size: 200% 100% !important;
    background-position-x: -100%;*/

    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') !important;
    background-size: 100% 100%;*/

    background: radial-gradient(114.29% 114.29% at 50% 0%, #DC642D 0%, #5C2712 100%);


    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);
}
/*.button.disabled, .button-style.disabled {
    background-position-x: 0;
}*/
.button-timed {
    position: relative;
    display: block;
    width: max-content;

    margin: 10px auto;
    padding: 5px 20px;
    font: 16px/18px var(--font-btn);
    text-align: center;
    text-transform: uppercase;

    /*border: 1px solid black;
    background: linear-gradient(to right, #d7d7d7 0%, #a0a0a0 30%, #a0a0a0 70%, #d7d7d7 100%);*/
    color: transparent;

    /*border-radius: 3px;
*/

    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%, #DC642D 0%, #5C2712 100%);*/

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

    border: 2px solid;
    border-image-slice: 1;
    /*border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);*/
    border-image-source: linear-gradient(180deg, #3E8BD2 0%, #11203E 100%);
}
.button-timed:before {
    content: '';
    width: calc(100% + 1px); /* take account border of parent*/
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    transform: scaleX(0);
    transform-origin: 0 0;
    /*background: linear-gradient(to right, #3e1808 0%, #954624 30%, #954624 70%, #3e1808 100%);*/

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


    /*border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #D2733E 0%, #3E2111 100%);*/

    transition: transform 5s ease-out;
}
.button-timed.transition-1s:before {
    transition-duration: 1s;
}.button-timed.transition-2s:before {
    transition-duration: 2s;
}
.button-timed.transition-3s:before {
    transition-duration: 3s;
}
.button-timed.transition-5s:before {
    transition-duration: 5s;
}
.button-timed.transition-10s:before {
    transition-duration: 10s;
}
.button-timed.timing:before {
    transform: scale(1);
}
.button-timed:after {
    content: attr(data-after);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    /*color: white;*/
    color: rgba(255, 255, 255, 0.9);
}
.button-timed:not(.disabled):hover {
    /*filter: brightness(125%);*/
}
/*modular*/
.button-big-bg {
    /*background: url('../images/new/playpage_play_button.png') no-repeat !important;*/
    background: url('../images/main_menu/play_button_playpage.png') no-repeat !important;
    background-size: 100% 100% !important;
}
/*modular*/
.button:hover,
.button-style:hover {
    /*color: black;*/
    /*border-color: #0199e2;*/
}
/*modular*/
/*.button.plus:hover,
.button.minus:hover,
.button-style.plus:hover,
.button-style.minus:hover {
    filter: brightness(127%);
}*/

/*modular*/
.button.disabled:not(.plus):not(.minus) {
    /*opacity: 0.5;*/
    /*background: url('../images/new/build_upgrade_disabled.png') no-repeat;*/
    /*background-size: 100% 100%;*/
}
/*modular*/
/*.button.plus,
.button-style.plus {
    width: 21px;
    height: 18px;
    padding: 0;
    background: url('../images/new/button2_arrow_up.png') no-repeat ;
    background-size: 100% 100%;
}*/
/*modular*/
/*.button.minus,
.button-style.minus {
    width: 21px;
    height: 18px;
    padding: 0;
    background: url('../images/new/button2_arrow_down.png') no-repeat ;
    background-size: 100% 100%;
}*/
/*modular*/
.button-style.disabled,
.button.plus.disabled, .button.minus.disabled,
.button-style.plus.disabled, .button-style.minus.disabled {
    /*opacity: 0.6;*/

    background: radial-gradient(114.29% 114.29% at 50% 0%, #888888 0%, #222222 100%);
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #949494 0%, #151515 100%);
}
/* END buttons */
.center-text {
    text-align: center;
}
.right-text {
    text-align: right;
}
.left-text {
    text-align: left;
}
.left-auto {
    margin-left: auto;
}
.left-right-auto {
    margin-left: auto;
    margin-right: auto;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.margin-left-20 {
    margin-left: 20px;
}
/* use this for quick columns where possible*/
.column-holder {
    display: flex;
}
.flex-column { /* defaults to equally wide columns always)*/
    flex: 1 1 0;
}
.col-auto { /* shrinks to max size, or actually is default */
    flex: 0 1 auto;
}
.col-30 { /* max 30px, but can shrink*/
    flex: 0 1 30px;
}
.col-50 { /* max 200px, but can shrink*/
    flex: 0 1 50px;
}
.col-60 { /* max 200px, but can shrink*/
    flex: 0 1 60px;
}
.col-75 { /* max 200px, but can shrink*/
    flex: 0 1 75px;
}
.col-80 { /* max 200px, but can shrink*/
    flex: 0 1 80px;
}
.col-100 { /* max 200px, but can shrink*/
    flex: 0 1 100px;
}
.col-150 { /* max 200px, but can shrink*/
    flex: 0 1 150px;
}
.col-170 { /* max 200px, but can shrink*/
    flex: 0 1 170px;
}
.col-180 { /* max 180px, but can shrink*/
    flex: 0 1 180px;
}
.col-200 { /* max 200px, but can shrink*/
    flex: 0 1 200px;
}
.col-220 { /* max 200px, but can shrink*/
    flex: 0 1 220px;
}
.col-240 { /* max 200px, but can shrink*/
    flex: 0 1 240px;
}
.col-260 { /* max 200px, but can shrink*/
    flex: 0 1 260px;
}
.col-300 { /* max 200px, but can shrink*/
    flex: 0 1 300px;
}
.col-320 { /* max 200px, but can shrink*/
    flex: 0 1 320px;
}
.col-340 { /* max 200px, but can shrink*/
    flex: 0 1 340px;
}
.col-360 { /* max 200px, but can shrink*/
    flex: 0 1 360px;
}
.col-380 { /* max 200px, but can shrink*/
    flex: 0 1 380px;
}
.col-400 { /* max 200px, but can shrink*/
    flex: 0 1 400px;
}
.col-450 { /* max 200px, but can shrink*/
    flex: 0 1 450px;
}
.col-480 { /* max 200px, but can shrink*/
    flex: 0 1 480px;
}
.col-500 { /* max 200px, but can shrink*/
    flex: 0 1 500px;
}
.col-550 { /* max 200px, but can shrink*/
    flex: 0 1 550px;
}
.col-600 { /* max 200px, but can shrink*/
    flex: 0 1 600px;
}
/* add additional special width classes here as needed*/
/* to move columns from another you can just add specific margin class */
/* scrollers */
/*modular*/
.scroll-holder {
    height: 330px;
    height: 100%;
}
/*modular*/
.scroller {
    height: 100%;
    /*overflow-y: auto;
    overflow-x: hidden;
    /*padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    /*box-sizing: content-box; /* So the width will be 100% + 17px */
    /*position: relative;*/
}

/* simple scrollbar */

/*modular*/
.ss-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    /*z-index: 1;*/
    float: left;
}

/*modular*/
.ss-content {
    height: 100%;
    width: calc(100% + 18px);
    /*width: 100%;*/
    padding: 0 0 0 0;
    position: relative;
    overflow-x: auto;
    overflow-y: scroll;
    box-sizing: border-box;
}
.ss-content > div {
    max-width: calc(100% - 18px);
}
/*modular*/
.ss-content.rtl {
    width: calc(100% + 18px);
    right: auto;
}
/*modular*/
.ss-scroll {
    position: relative;
    background: rgba(0, 0, 0, 0.1);
    /*width: 9px;*/
    width: 15px;
    border-radius: 4px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s linear;
}
/*modular*/
.ss-hidden {
    display: none;
}
/*modular*/
.ss-container:hover .ss-scroll,
.ss-container:active .ss-scroll {
    opacity: 1;
}
/*modular*/
.ss-grabbed {
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* custom csses classes */

/* slider */
.slide-container {
    width: 100%; /* Width of the outside container */
}
.slide-container .slider-value {
    text-align: left;
    font: 16px/20px var(--font-btn);
    text-transform: uppercase;
    color: white;
    margin-bottom: 8px;
}
/* The slider itself */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #d3d3d3;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    background: url('../images/starting_story/bar_slider_back.png');
}

.slider:hover {
    opacity: 1;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 0;
    background: url('../images/starting_story/bar_slider_front.png');
    background-size: 100% 100%;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    background: url('../images/starting_story/bar_slider_front.png');
    background-size: 100% 100%;
    cursor: pointer;
}
/* end slider */
/* select */
select {
    -webkit-appearance: none;
    appearance: none;
    color: white;
    line-height: 1;
    outline: 0;
    padding: 5px 27px 5px 5px;
    border-radius: 0;
    /*border: 1px solid #451800;
    background-color: #451800;
    background-image: linear-gradient(#bd561d, #bd561d),
        linear-gradient(-135deg, transparent 50%, #bd561d 50%),
        linear-gradient(-225deg, transparent 50%, #bd561d 50%),
        linear-gradient(#bd561d 42%, #451800 42%);*/

    border: 1px solid #41535C;
    background-color: #1F1F1F;
    background-image: linear-gradient(#4678C3, #4678C3),
        linear-gradient(-135deg, transparent 50%, #4678C3 50%),
        linear-gradient(-225deg, transparent 50%, #4678C3 50%),
        linear-gradient(#4678C3 42%, #1D3551 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 25px 24px, 24px 22px, 25px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;

    font-size: 14px;
    line-height: 20px;
    width: 64%;
}

select:hover {
    /*background-image: linear-gradient(#451800, #451800),
        linear-gradient(-135deg, transparent 50%, #451800 50%),
        linear-gradient(-225deg, transparent 50%, #451800 50%),
        linear-gradient(#451800 42%, #bd561d 42%);*/

    border: 1px solid #41535C;
    background-color: #1F1F1F;
    background-image: linear-gradient(#4678C3, #4678C3),
    linear-gradient(-135deg, transparent 50%, #4678C3 50%),
    linear-gradient(-225deg, transparent 50%, #4678C3 50%),
    linear-gradient(#4678C3 42%, #1D3551 42%);
}

select:active {
    /*background-image: linear-gradient(#451800, #451800),
        linear-gradient(-135deg, transparent 50%, #451800 50%),
        linear-gradient(-225deg, transparent 50%, #451800 50%),
        linear-gradient(#451800 42%, #bd561d 42%);*/
    /*color: orange;*/
    /*border-color: black;*/
    /*background-color: black;*/
}
select option {
    /*font-family: 'Arial';*/ /* TODO? */
}
/* end select
/* common */
/*modular*/
.transparent-bg {
    background: none !important;
}
#gameUI .content-holder .scroll-holder .number-change {
    display: inline-block;
    color: var(--clr-yellow-primary);
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
    margin-left: 5px;
    float: right;
    /*text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    text-shadow: 1px 1px 0 rgba(158, 147, 19, 0.26), -1px 1px 0 rgba(158, 147, 19, 0.26), 1px -1px 0 rgba(158, 147, 19, 0.26), -1px -1px 0 rgba(158, 147, 19, 0.26);*/

    /*text-shadow: 0.05em 0.05em 0 black, -0.05em 0.05em 0 black, 0.05em -0.05em 0 black, -0.05em -0.05em 0 black;*/
    /*text-shadow: 0.05em 0.05em 0 #312e00, -0.05em 0.05em 0 #312e00, 0.05em -0.05em 0 #312e00, -0.05em -0.05em 0 #312e00;*/
}
#gameUI .content-holder .number-change.up {
    color: var(--clr-green-primary);
    /*text-shadow: 0.05em 0.05em 0 #003818, -0.05em 0.05em 0 #003818, 0.05em -0.05em 0 #003818, -0.05em -0.05em 0 #003818;*/
}
#gameUI .content-holder .number-change.down {
    color: var(--clr-red-primary);
    /*text-shadow: 0.05em 0.05em 0 #431d12, -0.05em 0.05em 0 #431d12, 0.05em -0.05em 0 #431d12, -0.05em -0.05em 0 #431d12;*/
}
#gameUI .content-holder .number-change:before {
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    vertical-align: top;
    margin-right: 0px;
}
#gameUI .content-holder .number-change.up:before {
    content: '\25B2';
    color: var(--clr-green-primary);
}
#gameUI .content-holder .number-change.down:before {
    content: '\25BC';
    color: var(--clr-red-primary);
}

.color-good {
    color:  rgb(59, 255, 157) !important;
}
.color-warning {
    color:  rgb(255, 255, 59) !important;;
}
.color-low {
    color:  rgb(250, 125, 45) !important;;
}
.color-critical {
    color:  rgb(255, 59, 59) !important;;
}

.notification-icon {
    /*position: absolute;*/
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: 15px;
    height: 15px;

    /*background: rgb(250, 125, 45);
    border-radius: 50%;
    color: white;
    text-align: center;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;*/

    /*background: url('../images/new/warning_icon_updated.png');
    background-size: 100% 100%;*/

    background: url('../images/new_ui/game/navigation/category_images_darkened.png');
    background-size: 1000% auto;
    background-position-x: -700%;

    animation: scaleOutInSpec 1s ease-in-out 5;
}
.notification-icon.ignore-animation {
    animation: none;
}
.notification-icon.cits-idling {
    top: -2px;
}
.notification-icon.change-ter {
    position: absolute;
    top: -0px;
    right: -21px;
}
.notification-icon.afford-ratio {
    width: 12px;
    height: 12px;
    top: -1px;
    /*position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto 0;*/
}
/*.notification-icon.pop-capped {
    margin: 0;
    bottom: auto;
    top: 2px;
    right: -24px;
}
.notification-icon.cits-idling {
    right: -20px;
}
.notification-icon.right20 {
    right: 10px;
}*/
/* END common*/
/*modular*/
.scroller .ss-scroll {
    /*background: rgba(0, 125, 182, 0.67);
    background: rgba(255,255,255, 0.7);
    border-radius: 0;*/

    /*background: #3E3E3E;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 8px rgba(0, 0, 0, 0.75);
    border-radius: 4px;*/

    background: #41535C;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 4px rgba(0, 0, 0, 0.75);
}
/* END scrollers */

/* icons*/
/*modular*/
.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    /*background: url('../images/game_icons.png');*/

    /*background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;*/

    background: url('../images/resources_sprite_64_64.png');
    background-size: 400% 600%;
    vertical-align: middle;

    /*background-size: 800% auto;*/

    padding: 0 !important;
}
/*modular*/
.icon.fit-container {
    width: 100%;
    height: 100%;
}
.icon.extra {
    /*background: url('../images/extra_icons.png');
    background-size: 700% auto;*/
}
/*modular*/
.icon.massive,
.button-icon.massive {
    width: 128px;
    height: 128px;
}
.icon.large,
.button-icon.large {
    width: 64px;
    height: 64px;
}
.icon.bigger,
.button-icon.bigger {
    width: 50px;
    height: 50px;
}
/*modular*/
.icon.big,
.button-icon.big {
    width: 40px;
    height: 40px;
}
/*modular*/
.icon.small,
.button-icon.small {
    width: 30px;
    height: 30px;
}
/*modular*/
.icon.s-25-25 {
    width: 25px;
    height: 25px;
}
.icon.smaller,
.button-icon.smaller {
    width: 20px;
    height: 20px;
}
/*modular*/
.icon.tiny,
.button-icon.tiny {
    width: 15px;
    height: 15px;
}
.icon.world {
    background-position: -300% 0;
}
.icon.population,
.icon.citizens {
    /*background-position-x: -100%;*/
    background: url('../images/new_ui/game/button_icons.png');
    background-size: auto 100%;
    /*background-position: -300% -400%;*/
    background-position-x: -100%;
}
.icon.citizens {
    /*background-position-x: -33% !important;*/
    /*background-position-y: 81%;*/
}
.icon.happiness {
    /*background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;*/
    background-position-x: -400%;
}

/* extra icons */

.icon.plans {
    background-position-x: -900%;
}
.icon.flag_our {
    /*background-position-x: -1000%;*/
    background-position: 0 -500%;
}
.icon.flag_enemy {
    /*background-position-x: -1100%;*/
    background-position: -100% -500%;
}
.icon.power {
    background-position-x: -1200%;
}
.icon.triangle-right {
    background-position: -200% -500%;
}
/*.icon.attack {
    background-position-x: -3200%;
}*/
.icon.explore {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    /*background-position-x: -1400%;*/
    background-position-x: -3300%;
}

.icon.attack_active {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -3100%;
}
.icon.explore_active {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -3000%;
}
/* new but not ideally palced o nsrite */

/*.icon.social {
    background-position-x: -1800%;
}
.icon.economy {
    background-position-x: -1900%;
}*/
.icon.health {
    /*background-position-x: -2000%;*/
    background-position: 0 -400%;
}
.icon.productivity {
    /*background-position-x: -2100%;
    filter: brightness(300%);*/
    background-position: -200% -200%;
}
.icon.help {
    /*background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -2500%;*/
    background: url('../images/new_ui/game/icons/white_buttons_sprite.png');
    background-size: 800% auto;
}
.icon.timelapse {
    /*background-position-x: -2600%;*/
    background-position: -100% -400%;
}
.icon.time {
    /*background-position-x: -2700%;*/
    background-position: -100% -200%;
}
.icon.play {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -2800%;
}
.icon.pause {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -2900%;
}
.icon.timer{
    /*width: 10px;
    height: 14px;
    background: url('../images/hourglass_icon.png');*/
    /*width: 14px;
    height: 14px;*/
    background-position: -100% -200%;
}
.icon.timer.small {
    margin-top: -5px; /* for use on advancements*/
    width: 25px;
    height: 25px;
}
.icon.scroll {
    background-position-x: -3400%;
}
.icon.confirm {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -3500%;
}
.icon.control_rate {
    background-position-x: -3600%;
}
.icon.explored {
    background-position-x: -3700%;
}
/* special icon cases below */
.icon.produces {
    width: 8px;
    height: 13px;
    background: url('../images/new/arrows_up_down.png');
}
.icon.consumes {
    width: 8px;
    height: 13px;
    background: url('../images/new/arrows_up_down.png');
    background-position-x: -8px;
}
.icon.perk-points {
    /*background: url('../images/research/perk_points_128_128.png');*/
    /*background-position-x: 0;
    background-size: 100% 100%;*/
}

/* play page icons */
.icon.playpage {
    /*background: url('../images/main_menu/64_64_icons_playpage.png');*/
    background: url('../images/main_menu/64_64_playpage_icons_updated.png?v=2');
    vertical-align: middle;

    background-size: 1600% auto;
}
.icon.settings {
    background-position-x: 0%;
}
.icon.music-on {
    background-position-x: -100%;
}
.icon.music-off {
    background-position-x: -200%;
}
.icon.reddit {
    background-position-x: -300%;
}
.icon.changelog {
    background-position-x: -400%;
}
.icon.translate{
    background-position-x: -500%;
}
.icon.download {
    background-position-x: -600%;
}
.icon.delete {
    background-position-x: -700%;
}
.icon.play.playpage {
    background-position-x: -800%;
}
.icon.twitter {
    background-position-x: -900%;
}
.icon.patreon {
    background-position-x: -1000%;
}
.icon.unchecked {
    /*background-position-x: -1100%;*/
    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: 0;
}
.icon.checked {
    /*background-position-x: -1200%;*/

    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: -100%;
}
.icon.facebook {
    background-position-x: -1300%;
}
.icon.youtube {
    background-position-x: -1400%;
}
.icon.exit {
    background-position-x: -1500%;
}
/* language icons/flags */
.icon.language {
    background: url('../images/new/flag_sprites_br_added.png');
    background-size: auto 100%;
}
.icon.language[data-lang="en"] {
    background-position-x: 0;
}
.icon.language[data-lang="zh"] {
    background-position-x: -100%;
}
.icon.language[data-lang="de"] {
    background-position-x: -200%;
}
.icon.language[data-lang="it"] {
    background-position-x: -300%;
}
.icon.language[data-lang="nl"] {
    background-position-x: -400%;
}
.icon.language[data-lang="pl"] {
    background-position-x: -500%;
}
.icon.language[data-lang="sp"] {
    background-position-x: -600%;
}
.icon.language[data-lang="sp_latam"] {
    background-position-x: -600%;
}
.icon.language[data-lang="kr"] {
    background-position-x: -700%;
}
.icon.language[data-lang="pt"] {
    background-position-x: -800%;
}
.icon.language[data-lang="fr"] {
    background-position-x: -900%;
}
.icon.language[data-lang="ru"] {
    background-position-x: -1000%;
}
.icon.language[data-lang="tr"] {
    background-position-x: -1100%;
}
.icon.language[data-lang="br"] {
    background-position-x: -1200%;
}
.icon.more-details {
    background: url('../images/new/more_details_button_64_64.png');
    background-size: 100% 100%;
}
/* Main menu icons */
.left-menu .icon,
.bottom .view .icon {
    background: url('../images/sprite_menu_icons_128_128.png');
    vertical-align: middle;

    background-size: 600% auto;
    transform-origin: 0 100%;
}
.icon.objectives {
    background-position-x: 0%;
}
.left-menu .icon.world {
    background-position-x: -100%;
}
.icon.social {
    background-position-x: -200%;
}
.icon.attack {
    background-position-x: -300%;
}
.icon.economy {
    background-position-x: -400%;
}
.icon.view_objectives {
    background-position-x: -500%;
}
.icon.up-arrow {
    display: inline-block;
    width: 18px;
    height: 10px;
    background: url('../images/new_ui/game/up_arrow_green.png') center center no-repeat;
}
.icon.down-arrow {
    display: inline-block;
    width: 18px;
    height: 10px;
    background: url('../images/new_ui/game/down_arrow_red.png') center center no-repeat;
}
/* other icons for buildsings, jobs... */
[data-icon]:before {
    content: '';
    display: inline-block;
    /*background-image: url('../images/random_events_icons_1.png');*/
    background-image: url('../images/new_ui/game/icons/event_icons.png');
    background-size: 800% auto;
    width: 64px;
    height: 64px;
    vertical-align: middle;
}
[data-icon].expand-to-parent:before {
    width: 100%;
    height: 100%;
}
[data-icon="summer"]:before,
[data-icon="note_summer"]:before {
    /*background-position-x: 0;*/
    background-position-x: -500%;
}
[data-icon="winter"]:before,
[data-icon="note_winter"]:before {
    /*background-position-x: -100%;*/
    background-position-x: -600%;
}
[data-icon="fire"]:before {
    /*background-position-x: -200%;*/
    background-position-x: 0%;
}
[data-icon="riot"]:before {
    /*background-position-x: -300%;*/
    background-position-x: -100%;
}
[data-icon="market_crash"]:before {
    /*background-position-x: -400%;*/
    background-position-x: -200%;
}
[data-icon="earthquake"]:before {
    /*background-position-x: -500%;*/
    background-position-x: -300%;
}
[data-icon="extortion"]:before {
    /*background-position-x: -600%;*/
    background-position-x: -400%;
}
[data-icon="prestige"]:before {
    background-position-x: -700%;
}
[data-icon="animal_plague"]:before {
    background-position: 0 -100%;
}
[data-icon="drought"]:before {
    background-position: -100% -100%;
}
[data-icon="low_rainfall"]:before {
    background-position: -200% -100%;
}
[data-icon="locust_infestation"]:before {
    background-position: -300% -100%;
}
[data-icon="radiation_leak"]:before {
    background-position: -400% -100%;
}

/* simple backgrounds for divs */
[data-icon-bg] {

    /*width: 80px;
    height: 80px;*/
    /*background: url('../images/buildings_public_jobs_sprite.png');
    background-size:  900% 400%;*/
    /*background: url('../images/animations/building_animations.png');*/
    /*background: url('../images/animations/building_animations_new_opt.png');
    background-size:  500% 3200%;*/
    /*background-size:  900% auto;*/
    /*min-height: 64px;*/
    padding: 0 !important;

    /* 6 fram images */
    /* building animations */
    /*animation: moveXframe 1s steps(5) infinite;*/


    /*background: url('../images/new_ui/game/buildings/buildings_sprite_new.png');*/
    background: url('../images/new_ui/game/buildings/buildings_sprite_new_smaller.png');
    background-size:  600% 500%;
}

/* OLD BUILDING POS */
[data-icon-bg="pump_automated"] {
    /*background-position: 0 0;*/
    background-position-y: 0;
}
[data-icon-bg="cattle_farm"] {
    /*background-position: -100% 0;*/
    background-position-y: -100%;
}
[data-icon-bg="factory"] {
    /*background-position: -200% 0;*/
    background-position-y: -200%;
}
[data-icon-bg="farm"] {
    /*background-position: -300% 0;*/
    background-position-y: -300%;


    /*background: url('../images/animations/farm_anim_1_smaller.png');
    background-size:  3000% 100%;*/
    /*background: url('../images/animations/farm_sprites_short.png');
    background-size:  500% 100%;*/

    /* 29 images */
    /*animation: moveXframe 2s steps(30) infinite;*/

}
/* test for farm
@keyframes moveXframe {
    from {background-position-x: 0;}
    to {background-position-x: -3000%;}
}*/
@keyframes moveXframe {
    0% {background-position-x: 0;}
    100% {background-position-x: -500%;}
    /*100% {background-position-x: 0;}*/
}
[data-icon-bg="filtering_station"] {
    /*background-position: -400% 0;*/
    background-position-y: -400%;
}
[data-icon-bg="fire_station"] {
    /*background-position: -500% 0;*/
    background-position-y: -500%;
}
[data-icon-bg="planted_forest"] {
    /*background-position: -600% 0;*/
    background-position-y: -600%;
}
[data-icon-bg="pine_forest"] {
    /*background-position: -700% 0;*/
    background-position-y: -700%;
}
[data-icon-bg="genetic_forest"] {
    /*background-position: -800% 0;*/
    background-position-y: -800%;
}
[data-icon-bg="hospital"] {
    /*background-position: 0 -100%;*/
    background-position-y: -900%;
}
[data-icon-bg="house"] {
    /*background-position: -100% -100%;*/
    background-position-y: -1000%;
}
[data-icon-bg="house"][data-icon-subtype="1"] {
    /*background-position: -100% -100%;*/
    /*background-position-y: -1800%;*/

    /* old code/image*/
    /*background: url('../images/buildings/appartment1.png');
    background-position-y: 0;
    background-size: 100% 100%;*/
}
[data-icon-bg="house"][data-icon-subtype="2"] {
    /*background-position: -100% -100%;*/
    /*background-position-y: -500%;*/

    /* old code/image*/
    /*background: url('../images/buildings/appartment3.png');
    background-position-y: 0;
    background-size: 100% 100%;*/
}
[data-icon-bg="hydro_plant"] {
    /*background-position: -200% -100%;*/
    background-position-y: -1100%;
}
[data-icon-bg="pump_manual"] {
    /*background-position: -300% -100%;*/
    background-position-y: -1200%;
}
[data-icon-bg="genetic_farm"] { /* TO DO meat dryer*/
    /*background-position: -400% -100%;*/
    background-position-y: -1300%;
}
[data-icon-bg="military_acadamey"] { /* TODO not exist yet */
    /*background-position: -500% -100%;*/
    background-position-y: -1400%;
}
[data-icon-bg="mining_plant"] {
    /*background-position: -600% -100%;*/
    background-position-y: -1500%;
}
[data-icon-bg="mining_plant_2"] { /* TODO not existy et*/
    /*background-position: -700% -100%;*/
    background-position-y: -1600%;
}
[data-icon-bg="nuclear_plant"] {
    /*background-position: -800% -100%;*/
    background-position-y: -1700%;
}
[data-icon-bg="police_station"] {
    /*background-position: 0 -200%;*/
    background-position-y: -1800%;
}
[data-icon-bg="rain_collector"] {
    /*background-position: -100% -200%;*/
    background-position-y: -1900%;
}
[data-icon-bg="research_center"] {
    /*background-position: -200% -200%;*/
    background-position-y: -2000%;
}
[data-icon-bg="embassy"] {
    /*background-position: -200% -200%;*/
    background-position-y: -2000%;
}
[data-icon-bg="road"] { /* TODO update image still? */
    /*background-position: -300% -200%;*/
    background-position-y: -2100%;
}
[data-icon-bg="school"] {
    /*background-position: -400% -200%;*/
    background-position-y: -2200%;
}
[data-icon-bg="solar_panels"] {
    /*background-position: -500% -200%;*/
    background-position-y: -2300%;
}
[data-icon-bg="thermal_plant"] {
    /*background-position: -600% -200%;*/
    background-position-y: -2400%;
}
[data-icon-bg="war_factory"] {
    /*background-position: -700% -200%;*/
    background-position-y: -2500%;
}
[data-icon-bg="researcher"] {
    /*background-position: -800% -200%;*/
    background-position-y: -2600%;
}
[data-icon-bg="doctor"] {
    /*background-position: 0 -300%;*/
    background-position-y: -2700%;
}
[data-icon-bg="teacher"] {
    /*background-position: -100% -300%;*/
    background-position-y: -2800%;
}
[data-icon-bg="policeman"] {
    /*background-position: -200% -300%;*/
    background-position-y: -2900%;
}
[data-icon-bg="fireman"] {
    /*background-position: -300% -300%;*/
    background-position-y: -3000%;
}
[data-icon-bg="builder"] {
    /*background-position: -400% -300%;*/
    background-position-y: -3100%;
}
[data-icon-bg="diplomat"] {
     background-position-y: -2000%;
}

[data-icon-bg="farm"] .dhusd {
    /*background: url('../images/new/farm.png') right bottom no-repeat;*/
    min-height: 64px;
    background-position: -300% 0;
}
[data-icon-bg="worker"]  .dhusd{
    /*background: url('../images/new/andro_venti.png') right bottom no-repeat;*/
    min-height: 64px;
    background-size: auto 100%;
}
[data-icon-bg="military_colony"] {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -3800%;
    animation: none;
}
[data-icon-bg="economic_colony"] {
    background: url('../images/game_icons_all.png?v3');
    background-size: 4000% auto;
    background-position-x: -3900%;
    animation: none;
}
[data-icon-bg="perk_points"] {
    background: url('../images/research/perk_points_128_128.png');
    background-position-x: 0;
    background-size: 100% 100%;
    animation: none;
}



/* NEW POS */
[data-icon-bg="house"][data-icon-subtype="1"] {
    background-position: 0 0;
}
[data-icon-bg="house"][data-icon-subtype="2"] {
    background-position: -100% 0;
}
[data-icon-bg="pump_automated"] {
    background-position: -200% 0;
}
[data-icon-bg="embassy"] {
    background-position: -300% 0;
}
[data-icon-bg="factory"] {
    background-position: -400% 0;
}
[data-icon-bg="farm"] {
    background-position: -500% 0;
}
[data-icon-bg="cattle_farm"] {
    background-position: 0 -100%;
}
[data-icon-bg="genetic_farm"] {
    background-position: -100% -100%;
}
[data-icon-bg="filtering_station"] {
    background-position: -200% -100%;
}
[data-icon-bg="fire_station"] {
    background-position: -300% -100%;
}
[data-icon-bg="planted_forest"] {
    background-position: -400% -100%;
}
[data-icon-bg="genetic_forest"] {
    background-position: -500% -100%;
}
[data-icon-bg="pine_forest"] {
    background-position: 0 -200%;
}
[data-icon-bg="hospital"] {
    background-position: -100% -200%;
}
[data-icon-bg="house"] {
    background-position: -200% -200%;
}
[data-icon-bg="hydro_plant"] {
    background-position: -300% -200%;
}
[data-icon-bg="pump_manual"] {
    background-position: -400% -200%;
}
[data-icon-bg="mining_plant"] {
    background-position: -500% -200%;
}
[data-icon-bg="mining_plant"][data-icon-subtype="1"] {
    background-position: 0 -300%;
}
[data-icon-bg="mining_plant"][data-icon-subtype="2"] {
    background-position: -100% -300%;
}
[data-icon-bg="nuclear_plant"] {
    background-position: -200% -300%;
}
[data-icon-bg="police_station"] {
    background-position: -300% -300%;
}
[data-icon-bg="rain_collector"] {
    background-position: -400% -300%;
}
[data-icon-bg="research_center"] {
    background-position: -500% -300%;
}
[data-icon-bg="road"] {
    background-position: 0 -400%;
}
[data-icon-bg="school"] {
    background-position: -100% -400%;
}
[data-icon-bg="solar_panels"] {
    background-position: -200% -400%;
}
[data-icon-bg="thermal_plant"] {
    background-position: -300% -400%;
}
[data-icon-bg="war_factory"] {
    background-position: -400% -400%;
}
[data-icon-bg="future_building"] {
    background-position: -500% -400%;
}
    /* product icons */

[data-icon-bg="clothing"] {
    background: url('../images/new_ui/game/economy/products_icons.png') no-repeat center, #000000;
    background-size: 500% auto;
    /*background-position-x: -300%;*/
    background-position-x: 75%;
}
[data-icon-bg="tv"] {
    background: url('../images/new_ui/game/economy/products_icons.png') no-repeat center, #000000;
    background-size: 500% auto;
    background-position-x: 0;
}
[data-icon-bg="computer"] {
    background: url('../images/new_ui/game/economy/products_icons.png') no-repeat center, #000000;
    background-size: 500% auto;
    /*background-position-x: -200%;*/
    background-position-x: 50%;
}
[data-icon-bg="phone"] {
    background: url('../images/new_ui/game/economy/products_icons.png') no-repeat center, #000000;
    background-size: 500% auto;
    /*background-position-x: -100%;*/
    background-position-x: 25%;
}
[data-icon-bg="car"] {
    background: url('../images/new_ui/game/economy/products_icons.png') no-repeat center, #000000;
    background-size: 500% auto;
    /*background-position-x: -400%;*/
    background-position-x: 100%;
}
    /* product icons*/
/* END NEW POS */
#dynamicDOM .confirmation-prompt-holder {
    position: absolute;
    top:0px;
    left: 0px;
    right: 0;
    background: rgba(0,0,0,0.6);

    width: 100%;
    height: 100%;
    z-index: 2;
}
#dynamicDOM .confirmation-prompt-holder .popup-content{
    position: absolute;
    left: 0;
    right: 0;
    top: 53%;
    width: 30%;
    max-height: max-content;
    /*height: 80%;*/
    min-width: 250px;
    margin: 0 auto;
    padding: 20px;
    /*background: rgba(0, 125, 182, 0.9);
    background: rgba(28, 215, 235, 0.60);*/
    /*background: rgba(255, 255, 255, 0.9);*/
    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;
    color: white;
    font: 14px/16px var(--font-reg);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.45), -3px -3px 3px rgba(0, 0, 0, 0.45);
}
#dynamicDOM .confirmation-prompt-holder .popup-content .button-style{
    margin-left: 25px;
}
#dynamicDOM .confirmation-prompt-holder .popup-content .title{
    text-align: center;
}
#dynamicDOM .confirmation-prompt-holder .popup-content .buttons-holder{
    text-align: center;
    /*width: 120px;*/
    width: 150px;
    margin: 0 auto;
    margin-top: 20px;
}
#dynamicDOM .confirmation-prompt-holder .popup-content .close {
    position: absolute;
    top: 5px;
    right: 10px;

    font-size: 16px;
    line-height: 18px;
    font-weight: 700;

    color: white;
}
#dynamicDOM .confirmation-prompt-holder .popup-content .close:hover {
    color: white;
}




#dynamicDOM .mini-popup-holder {
    position: absolute;
    top:0px;
    left: 0px;
    right: 0;
    /*background: rgba(0,0,0,0.5);*/

    width: 100%;
    height: 100%;
    z-index: 2;
}
#dynamicDOM .mini-popup-holder:last-child {
    background: rgba(0,0,0,0.5);
}
#dynamicDOM .mini-popup-holder .popup-content{
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    width: 20%;
    max-height: max-content;
    /*height: 80%;*/
    min-width: 250px;
    max-width: 90%;
    margin: 0 auto;
    padding: 30px 20px 20px 20px;
    /*background: rgba(0, 125, 182, 0.9);
    background: rgba(28, 215, 235, 0.60);*/

    background: url('../images/new_ui/game/dark_bg_2.png'), #1F1F1F;

    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.45), -3px -3px 3px rgba(0, 0, 0, 0.45);

    color: white;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    z-index: 2;
}
#dynamicDOM .mini-popup-holder[data-type="tutorial"] .popup-content {
    min-width: clamp(200px, 90%, 450px);
}
#dynamicDOM .mini-popup-holder .popup-content.titled-header {
    padding-top: 50px;
}
#dynamicDOM .mini-popup-holder .popup-content.titled-header .header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 5px 20px;

    /*background: #0c5e67;*/
    margin-bottom: 20px;
    /*border: 1px solid white;*/
    color: #ffffff;;
    font: 16px/20px '';

    text-align: center;
}
#dynamicDOM .mini-popup-holder .popup-content .header .close {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 20px;
}
#dynamicDOM .mini-popup-holder .popup-content .button-style.close {
    margin-top: 20px;
}
#dynamicDOM .mini-popup-holder .popup-content .inner-holder {
    padding: 10px;
    /*background: rgba(255, 255, 255, 0.7);*/
    /*color: black;*/
    text-align: center;
    /*border: 2px solid black;*/
}
#dynamicDOM .mini-popup-holder .popup-content .title {
    text-transform: uppercase;
    font: 16px/18px var(--font-title);
}
#dynamicDOM .mini-popup-holder .popup-content .subtitle {
    text-transform: uppercase;
    margin: 0;
    color: white;
    font: 16px/18px var(--font-title);
}
#dynamicDOM .mini-popup-holder .popup-content .flex-column.special-height {
    position: relative;
    padding-bottom: 40px;
}
#dynamicDOM .mini-popup-holder .popup-content .desc1 {
    margin: 10px 0;
}
#dynamicDOM .mini-popup-holder .popup-content .desc2 {
    position: absolute;
    bottom: 2px;
    left: 0;
    font: 12px/14px var(--font-reg);
}
#dynamicDOM .mini-popup-holder .popup-content .plan-image {
    width: 122px;
    height: 62px;
    transform: rotate(180deg); /*rotated to stay consistent with enemy direction*/
}
/* end extra icons*/
/* end icons*/
/* popup holders */
/*modular*/
#dynamicDOM .popup-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /*background: rgba(0,0,0,0.5);*/

    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;

    z-index: 2; /* TODO is this fine or it should bechnaged?*/
}
#dynamicDOM .popup-holder[data-type="tanks_needed"] .popup-content-holder{
    max-width: 400px;
}
#dynamicDOM .popup-holder[data-type="tanks_needed"] .popup-content-holder .popup-content{
    padding: 25px;
}
#dynamicDOM .popup-holder.fadein-holder {
    opacity: 0;
    pointer-events: none;
}
/*modular*/
#dynamicDOM .popup-holder:last-child {
    background: rgba(0,0,0,0.5);
}
/*modular*/
#dynamicDOM .popup-holder .popup-content-holder {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    width: 70%;
    /*max-height: max-content;*/
    /*height: 80%;*/
    max-height: 80%;

    min-width: 350px;
    max-width: 1000px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    pointer-events: auto;
}

#dynamicDOM .popup-holder[data-type="about"] .popup-content-holder {
    height: calc(90% - 40px);
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder{
    bottom: 0;
    top: 0;
    margin: auto;
    max-height: clamp(200px, 500px, calc(95vh - 20px))
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder .note{
    color: white;
    font-size: 12px;
    line-height: 16px;
    margin-top: 25px;
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder .setting{
    color: white;
    text-align: center;
    /*padding: 15px;*/
    margin-top: 10px;
    /*font-size: 16px;
    line-height: 16px;*/
    /*font-weight: 700;*/
    /*border: 2px solid black;
    background: linear-gradient(to right, rgba(69, 24, 0, 1) , rgba(69, 24, 0, 1) 20%, rgba(163, 81, 33, 1) 40%, rgba(163, 81, 33, 1) 60%, rgba(69, 24, 0, 1) 80%, rgba(69, 24, 0, 1) 100%);*/

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

    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font: 22px/27px var(--font-btn);

    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="language"] .popup-content-holder .setting.off{
    /*background: white;*/
    /*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%);
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder .setting:hover{
    border: 2px solid orange;
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder .setting::before{
    display: none !important;
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder .setting > span {
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
    font-family: inter;
}
#dynamicDOM .popup-holder[data-type="language"] .popup-content-holder a{
    color: white;
}
/*modular*/
#dynamicDOM .popup-holder .popup-content-holder > .header {
    position: relative;
    /*padding: 5px 20px;*/
    color: white;

    /*background: #0c5e67;
    border: 1px solid white;*/

    /*background: rgba(28, 215, 235, 0.7);*/
    text-align: left;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    /*height: 20px;*/
    /*min-height: 20px;*/
}
#dynamicDOM .popup-holder .popup-content-holder > .header .title {
    padding-left: 20px;
}
/*modular*/
#dynamicDOM .popup-holder .header .close:not(.button-timed) {
    position: absolute;
    right: 20px;
    top: 5px;
    font-size: 20px;

    width: 15px;
    height: 15px;
    /*background: white;*/
}
/*modular*/
#dynamicDOM .popup-holder .header .close:not(.button-timed):hover {
    color: black;
}
/*modular*/
#dynamicDOM .popup-holder .popup-content {
    /*margin: 20px;;*/
    height: calc(100% - 70px);
    color: white;
    margin: 0 4px;

    background: url('../images/new/popup_bg.png') bottom center no-repeat/*, rgba(28,215,235,0.44)*/;
    /*background-repeat: repeat-x;*/
    background-size: 100% 100%;
    /* TODO carefull - double check everything! */
    /*overflow-y: auto;*/
    /*max-height: 750px;*/
    /*max-height: clamp(200px, 750px, calc(80vh - 20px));*/
    /*max-height: clamp(200px, 775px, calc(95vh - 20px));*/

    max-height: clamp(200px, 850px, calc(80vh - 100px))
}
#dynamicDOM .popup-holder:not(.no-scrolling) .popup-content {

    display: flex;
    flex: 1 1 auto;
}
#dynamicDOM .popup-holder:not(.no-scrolling) .popup-content .scroll-holder {
    display: flex;
    flex: 1 1 auto;
    height: auto;
}
#dynamicDOM .popup-holder:not(.no-scrolling) .popup-content .scroll-holder .scroller {
    width: 100%;
    /*display: flex;
    flex: 1 1 auto;*/
}
#dynamicDOM .popup-holder[data-type="welcome"] .popup-content-holder,
#dynamicDOM .popup-holder[data-type="game_over"] .popup-content-holder,
#dynamicDOM .popup-holder[data-type="about"] .popup-content-holder,
#dynamicDOM .popup-holder[data-type="main_objective"] .popup-content-holder,
#dynamicDOM .popup-holder[data-type="final_objective"] .popup-content-holder,
#dynamicDOM .popup-holder[data-type="steam_note"] .popup-content-holder {
    max-height: 600px;
}
#dynamicDOM .popup-holder[data-type="steam_note"] .popup-content-holder {
    /*width: 520px;*/
    width: 820px;
    top: 0;
    bottom: 0;
    margin: auto;
    /*max-height: 850px;*/
    max-height: clamp(250px, 690px, calc(100vh - 50px));
    max-width: 95%;
}
#dynamicDOM .popup-holder[data-type="steam_note"][data-subtype="main_objective"] .popup-content-holder {
    max-height: clamp(250px, 750px, calc(100vh - 50px));
}
#dynamicDOM .popup-holder[data-type="steam_note"][data-subtype="final_objective"] .popup-content-holder {
    max-height: clamp(250px, 850px, calc(100vh - 50px));
}
#dynamicDOM .popup-holder[data-type="welcome"] .popup-content-holder {
    max-height: 520px;
}
#dynamicDOM .popup-holder[data-type="welcome"] .popup-content,
#dynamicDOM .popup-holder[data-type="game_over"] .popup-content,
#dynamicDOM .popup-holder[data-type="about"] .popup-content,
#dynamicDOM .popup-holder[data-type="settings"] .popup-content,
#dynamicDOM .popup-holder[data-type="main_objective"] .popup-content ,
#dynamicDOM .popup-holder[data-type="final_objective"] .popup-content,
#dynamicDOM .popup-holder[data-type="steam_note"] .popup-content,
#dynamicDOM .popup-holder[data-type="language"] .popup-content {
    padding: 20px;
    height: calc(100% - 110px);
}
#dynamicDOM .popup-holder ul {
    /*background: rgba(255,255,255,0.84);*/
    color: black;
    padding: 10px 25px;
    font-size: 14px;
    line-height: 19px;
}

/* FULLSCREEN POPUP */
#dynamicDOM .popup-holder.fullscreen {
    /*background: rgba(0,0,0,0.9);*/
    background: rgba(0,0,0,0.99);
    z-index:2;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 800px;
    height: auto;

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

    display: grid;
    align-items: center;

    /* this allows us to set everything really easily based on em, and for different resolutions*/
    font-size: 20px;
    line-height: 30px;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content {
    display: block;
    height: auto;
    width: auto;
    padding: 20px;
    margin: 0;
    /*background: rgba(255, 255, 255, 0.1);*/
    background: none;
    max-height: none;
    min-height: 80%;
    text-align: center;
    /*box-shadow: 0px 0px 5px rgba(255,255,255,0.3);*/
}
#dynamicDOM .popup-holder.fullscreen[data-type="new_objective"] .popup-content-holder .popup-content .subtitle,
#dynamicDOM .popup-holder.fullscreen[data-type="objective_completed"] .popup-content-holder .popup-content .subtitle {
    width: 80%;
    margin: 0 auto;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .title {
    font: 3em/1.15em var(--font-title);
    text-transform: uppercase;
    margin-bottom: 50px;
}
#dynamicDOM .popup-holder.fullscreen[data-type="event_details"] .popup-content-holder .popup-content .title {
    font: 2em/1.25em var(--font-title);
    overflow: hidden; /* prevents animation of subtitle to cause scrol bar */
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .title.slideFromRight {
    animation: slideRightToLeft 0.7s ease-in-out;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .title-status {
    font: 0.5em/1em var(--font-title);
    color: #00864b;
    /*animation: animatedShadowGlow 3s ease-in-out 5;*/
    animation: scaleBrightnessFlicker 2s ease-in-out 1;
}
#dynamicDOM .popup-holder.fullscreen[data-type="timelapse_warning"] .popup-content-holder .popup-content .title-status {
    color: rgb(255, 255, 59);
}
@keyframes animatedShadowGlow{
    0%      { box-shadow: inset 0 0 0 rgba(255, 255, 0, 0);}
    16%     { box-shadow: inset 0 0 5px rgba(255, 255, 0, 1);}
    33%     { box-shadow: inset 0 0 0 rgba(255, 255, 0, 0);}
    50%     { box-shadow: inset 0 0 5px rgba(255, 255, 0, 1);}
    67%     { box-shadow: inset 0 0 0 rgba(255, 255, 0, 0);}
    83%     { box-shadow: inset 0 0 5px rgba(255, 255, 0, 1);}
    100%    { box-shadow: inset 0 0 0px rgba(255, 255, 0, 0);}
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .subtitle {
    font: 1em/1.3em var(--font-reg);
    margin-bottom: 20px;
    text-align: left;

    min-height: 8em; /* ensures place for subtitle is taken into account */
}
#dynamicDOM .popup-holder.fullscreen[data-type="event_details"] .popup-content-holder .popup-content .subtitle {
    font: 0.9em/1.3em var(--font-reg);
    min-height: 6em;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content img {
    max-width: 100%;
    margin-bottom: 20px;
}
#dynamicDOM .popup-holder.fullscreen /*.popup-content-holder .popup-content*/ .image {
    width: 200px;
    height: 200px;

    margin: 10px auto;

    max-width: 100%;

    /*background: url('../images/onboarding/objective_images.png');*/
    /*background: url('../images/onboarding/tutorials_sprite.png?v2');*/
    background: url('../images/new_ui/game/onboarding/tutorials_sprite.png');
    background-size: 1000% auto;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .image[data-type="tutorial"] {
    background: url('../images/new_ui/game/onboarding/tutorial_images.png');
    background-size: 201% auto;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .image[data-icon] {
    border: 2px solid #00864b;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .image[data-icon]:before {
    width: 100%;
    height: 100%;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .image[data-type="missions"] {
    background: url('../images/onboarding/missions_sprite_updated.png');
    background-size: 1900% auto;
}
.popup-content-holder .popup-content .image[data-subtype="0"] {
    background-position-x: 0;
}
.popup-content-holder .popup-content .image[data-subtype="1"] {
    background-position-x: -100% !important;
}
.popup-content-holder .popup-content .image[data-subtype="2"] {
    background-position-x: -200% !important;
}
.popup-content-holder .popup-content .image[data-subtype="3"] {
    background-position-x: -300% !important;
}
.popup-content-holder .popup-content .image[data-subtype="4"] {
    background-position-x: -400% !important;
}
.popup-content-holder .popup-content .image[data-subtype="5"] {
    background-position-x: -500% !important;
}
.popup-content-holder .popup-content .image[data-subtype="6"] {
    background-position-x: -600% !important;
}
.popup-content-holder .popup-content .image[data-subtype="7"] {
    background-position-x: -700% !important;
}
.popup-content-holder .popup-content .image[data-subtype="8"] {
    background-position-x: -800% !important;
}
.popup-content-holder .popup-content .image[data-subtype="9"] {
    background-position-x: -900% !important;
}
.popup-content-holder .popup-content .image[data-subtype="10"] {
    background-position-x: -1000% !important;
}
.popup-content-holder .popup-content .image[data-subtype="11"] {
    background-position-x: -1100% !important;
}
.popup-content-holder .popup-content .image[data-subtype="12"] {
    background-position-x: -1200% !important;
}
.popup-content-holder .popup-content .image[data-subtype="13"] {
    background-position-x: -1300% !important;
}
.popup-content-holder .popup-content .image[data-subtype="14"] {
    background-position-x: -1400% !important;
}
.popup-content-holder .popup-content .image[data-subtype="15"] {
    background-position-x: -1500% !important;
}
.popup-content-holder .popup-content .image[data-subtype="16"] {
    background-position-x: -1600% !important;
}
.popup-content-holder .popup-content .image[data-subtype="17"] {
    background-position-x: -1700% !important;
}
.popup-content-holder .popup-content .image[data-subtype="18"] {
    background-position-x: -1800% !important;
}
.popup-content-holder .popup-content .image[data-subtype="19"] {
    background-position-x: -1900% !important;
}

#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .image[data-type="water_toxicity"] {
    background: url('../images/new_ui/game/navigation/category_images_darkened.png');
    background-size: 1000% auto;
    background-position-x: -800%;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .points-holder {
    padding: 10px;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .point {
    font: 1em/1em var(--font-reg);
    transform: translateX(0px);
    opacity: 0;
    transition: transform, opacity;
}
#dynamicDOM .popup-holder.fullscreen[data-type="event_details"] .popup-content-holder .popup-content .point {
    font: 0.9em/1.5em var(--font-reg);
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .point:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height:16px;

    background: url('../images/research/arrow_on_event_popups.png');
    margin-right: 10px;

}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .point.shown {
    animation: slideLeftToRight 0.7s ease-in-out;
    will-change: transform;
    opacity: 1;
}
@keyframes slideLeftToRight{
    0%      { transform: translateX(-200px); opacity: 0}
    70%     { transform: translateX(20px); opacity: 0.5}
    90%     { transform: translateX(-10px); opacity: 0.9}
    100%    { transform: translateX(0px); opacity: 1;}
}
@keyframes slideRightToLeft{
    0%      { transform: translateX(200px); opacity: 0}
    70%     { transform: translateX(-20px); opacity: 0.5}
    90%     { transform: translateX(10px); opacity: 0.9}
    100%    { transform: translateX(0px); opacity: 1;}
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
#dynamicDOM .popup-holder.fullscreen .popup-content-holder .popup-content .button-timed {
    font: 20px/25px var(--font-btn);
    box-shadow: 0px 0px 5px rgba(255,255,255,0.3);
    display: flex;
    flex: 0 1 auto;

    margin: 0 20px;
}
/* REELS TEST START */
#dynamicDOM .popup-holder.fullscreen .reel-instructions {
    text-align: center;
    color: #f15a24;
    text-transform: uppercase;
    font-weight: bold;
}
#dynamicDOM .popup-holder.fullscreen .reel-info-holder {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
#dynamicDOM .popup-holder.fullscreen .reel-info-holder .reel-info {
    flex: 0 1 150px;
    text-align: center;
    color: white;
    word-wrap: anywhere;
    font: 0.7em/1.1em var(--font-reg);
    opacity: 0;
    min-height: 2.2em;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder {
    display: flex;
    justify-content: center;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .reel-info {
    flex: 0 1 150px;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .reel {
    position: relative;
    flex: 0 1 150px;
    height: 150px;

    background: white;
    /*border: 2px solid black;*/
    border: 1px solid #00864b;

    overflow: hidden;

}
#dynamicDOM .popup-holder.fullscreen .reels-holder .reel.selected {
    top: -1px;
    border: 2px solid #f15a24;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .reel:not(.selected):hover {
    /*top: -1px;*/
    outline: 2px solid #f15a24;
    outline-offset: -1px;
    transform: scale(1.01);
    z-index: 1;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot-holder {
    position: absolute;

    width: 150px;
    bottom: 0;
    left: 0;

    animation-name: spinReel;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    will-change: transform !important;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot {
    height: 150px;
    /*margin-top: 5px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    font: 0.7em/1.1em var(--font-reg);

    /*background: url('../images/new/sprite_continent_conquered_rewardbox_no_space.png');*/
    background: url('../images/new/sprite_continent_conquered_rewardbox_no_space2.png');
    background-size: auto 100%;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot[data-bg="0"] {
    background-position-x: 0;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot[data-bg="1"] {
    background-position-x: -100%;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot[data-bg="2"] {
    background-position-x: -200%;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot[data-bg="3"] {
    background-position-x: -300%;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot[data-bg="4"] {
    background-position-x: -400%;
}
#dynamicDOM .popup-holder.fullscreen .reels-holder .slot[data-bg="5"] {
    background-position-x: -500%;
}
#dynamicDOM .popup-holder.fullscreen .slot-desc {
    text-align: center;
    margin: 10px 0;
    color: white;
}
@keyframes spinReel {
    0%      {transform: translateY(0);}
    80%    {transform: translateY(calc(100% - 295px));} /* hint at the top reel a bit */
    /*100%    {transform: translateY(calc(100% - 310px));} !* we want reel to stop at previous to last *!*/
    100%    {transform: translateY(calc(100% - 300px));} /* we want reel to stop at previous to last */
}
/* END REELS TEST */
/* ROLL CREDITS START*/
#dynamicDOM .popup-holder.fullscreen[data-type="roll_credits"] .popup-content-holder .popup-content .subtitle {
    min-height: 4em;
    margin-bottom: 0;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder {
    position: relative;
    width: 100%;
    margin-top: 20px;
    height: 500px;
    overflow: hidden;
    max-height: 60vh;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .roller-div {
    /*padding-top: 100%;*/ /* there's empty space at the top so text starts from the bottom up, this way animation is super simple*/
    transition: transform linear 30s;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .cat-holder {
    margin-bottom: 2em;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .entry-title {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.5em;
    font-weight: bold;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .entry {
    font-size: 1em;
    line-height: 1.1em;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .entry a {
    font-size: 0.8em;
    line-height: 0.9em;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .entry.margin-below {
    margin-bottom: 0.5em;
}
#dynamicDOM .popup-holder.fullscreen .roll-credits-holder .post-credits {
    font-size: 2em;
    margin-top: 40%;
    animation: flickerVisibility 20s linear infinite;
}
@keyframes flickerVisibility {
    0%      { opacity: 0;}
    7%      { opacity: 1;}
    8%      { opacity: 0;}
    24%     { opacity: 0;}
    25%     { opacity: 1;}
    26%     { opacity: 0;}
    47%     { opacity: 0;}
    48%     { opacity: 1;}
    49%     { opacity: 0;}
    79%     { opacity: 0;}
    80%     { opacity: 1;}
    81%     { opacity: 0;}
    100%    { opacity: 0;}
}
/*END ROLL CREDITS */
/* END FULL SCREEN POPUPS */
#dynamicDOM .quick-tutorial {
    position: absolute;
    /*bottom: 140px;*/
    bottom: 120px;
    left: 0;
    /*background: rgba(0,0,0,0.9);*/
    /*background: #232323;*/

    /*background: url('../images/new_ui/popups/body_bg1.png'), #151515;*//**/
    background: #151515;
    width: 300px;
    color: white;
    text-align: center;

    padding: 20px 10px;
    animation: fadeInWidthHeight 750ms ease-in-out;
    transform-origin: 0 100%;
    max-height: calc(100% - 120px);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.45);

    border: 1px solid var(--clr-border-primary);
    border-left: 0;
}
#dynamicDOM .quick-tutorial.wider {
    width: 500px;
}
#dynamicDOM .quick-tutorial .header {
    font: 700 20px/25px var(--font-reg);
    margin-bottom: 10px;
    color: #00864b;
}
#dynamicDOM .quick-tutorial .close {
    position: absolute;
    padding: 5px 10px;
    color: white;
    top: 5px;
    right: 10px;
}
#dynamicDOM .quick-tutorial .image {
    width: 200px;
    height: 200px;

    margin: 20px auto;

    max-width: 100%;

    /*background: url('../images/onboarding/objective_images.png');*/
    background: url('../images/new_ui/game/onboarding/tutorials_sprite.png');
    background-size: 1000% 100%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="start_exploring"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="start_exploring"] {
    background-position-x: 0;
}
#dynamicDOM .quick-tutorial .image[data-subtype="assign_explorers"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="assign_explorers"] {
    background-position-x: -100%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="assign_food"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="assign_food"] {
    background-position-x: -300%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="assign_water"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="assign_water"] {
    background-position-x: -400%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="build_house"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="build_house"] {
    background-position-x: -500%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="check_objectives"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="check_objectives"] {
    background-position-x: -200%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="buy_settings"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="buy_settings"] {
    background-position-x: -600%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="timelapse"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="timelapse"] {
    background-position-x: -700%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="buy_settings_timelapse"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="buy_settings_timelapse"] {
    background-position-x: -800%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="open_game_guide"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="open_game_guide"] {
    background-position-x: -900%;
}
#dynamicDOM .quick-tutorial .image[data-subtype="manage_plans"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="manage_plans"] {
    width: 500px;
    height: 267px;
    background: url('../images/onboarding/gifs/manage_plans_gif.gif') no-repeat;
    background-size: 100% auto;
}
#dynamicDOM .quick-tutorial .image[data-subtype="conquer_territory"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="conquer_territory"] {
    width: 500px;
    height: 267px;
    background: url('../images/onboarding/gifs/combat_gif.gif') no-repeat;
    background-size: 100% auto;
}
#dynamicDOM .quick-tutorial .image[data-subtype="starting_perks"],
#dynamicDOM .popup-holder.fullscreen .image[data-subtype="starting_perks"] {
    width: 500px;
    height: 267px;
    background: url('../images/onboarding/gifs/choose_starting_perks_gif.gif') no-repeat;
    background-size: 100% auto;
}
#dynamicDOM .quick-tutorial .image[data-type="tutorial"] {
    background: url('../images/onboarding/tutorial_images.png');
    background-size: 200% auto;
}
#dynamicDOM .quick-tutorial .sub-title {
    font: 15px/20px var(--font-title);
}
#dynamicDOM .quick-tutorial .desc {
    font: 14px/18px var(--font-reg);
}
/*
#dynamicDOM .popup-holder[data-type="event_details"] .button-timed,
#dynamicDOM .popup-holder[data-type="event_details"] .button-timed {
    display: inline-block;
    width: 76px;
    height: 25px;
    padding: 22px 30px 0px 10px;
    text-align: center;
    color: white;
    background: url('../images/new/accept_event_button.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: -15px;
}
#dynamicDOM .popup-holder[data-type="event_details"] .button-timed[data-action-type="decline_bribe"] {
    display: inline-block;
    width: 76px;
    height: 25px;
    padding: 7px 30px 17px 10px;
    text-align: center;
    color: white;
    margin-left: 30px;

    background: url('../images/new/decline_event_button.png') no-repeat;
    background-size: 100% 100%;
}*/
.slideLeftAndRemoveContent {
    /*transition: transform, opacity;
    will-change: transform;*/
    animation: slideToLeftHide 0.5s ease-in-out;
    opacity: 1;
}
@keyframes slideToLeftHide {
    0%      { transform: translateX(0px); opacity: 1}
    /*70%     { transform: translateX(20px); opacity: 0.9}
    90%     { transform: translateX(-10px); opacity: 0.5}*/
    50%    { transform: translateX(-500px); opacity: 0;} /* ensures half of the tiem animation is already hidden, as a new popup will shwo immediately after it*/
    100%    { transform: translateX(-500px); opacity: 0;}
}
/* END FULLSCREEN POPUP */
    /* END popup holder*/

    /* START QUICK POPUP HOLDER */
/*modular*/
#dynamicDOM .quick-popup-holder {
    position: absolute;
    min-width: 250px;
    max-width: calc(100% - 40px);
    /*background: rgba(0, 125, 182, 0.9);*/
    /*background: url('../images/new/popup_bg.png') bottom center no-repeat;*/

    background: url('../images/new_ui/popups/body_bg1.png'), #151515;
    background-size: 100% 100%;
    /*box-shadow: 0px 5.808px 11.616px rgba(100, 100, 100, 0.35);*/
    border: 2px solid #404040;

    max-height: 90%;
}
/*modular*/
#dynamicDOM .quick-popup-holder .popup-content {
    color: white;
    padding: 20px;
    max-height: clamp(200px, 80vh, 800px);
}
#dynamicDOM .quick-popup-holder:not(.no-scrolling) .popup-content {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}
#dynamicDOM .quick-popup-holder .scroll-holder {
    display: flex;
    flex: 1 1 auto;
    height: auto;
}
/*modular*/
#dynamicDOM .quick-popup-holder .header {
    position: relative;
    background: #0c5e67;
    padding: 5px 20px;
    color: white;
    /*border: 1px solid white;*/
    font: 14px/18px var(--font-title);
    text-transform: uppercase;
    background: url('../images/new_ui/popups/header_bg1.png');
    border-bottom: 2px solid #404040;
    filter: drop-shadow(0px 5.808px 5.808px rgba(0, 0, 0, 0.4));
}
/*modular*/
#dynamicDOM .quick-popup-holder .header .close {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 28px;
    height: 28px;
    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-size: 70% 70%;
    /* border-radius: 0px 10px 0px 0px; */
}
/*modular*/
#dynamicDOM .quick-popup-holder .header .close:hover {
    color: black;
}
#dynamicDOM .quick-popup-holder .header.transparent-header {
    background: none;
    border: none;
}
    /* END QUICK POPUP HOLDER */
/* popup tooltip */
/*modular*/
#popup-tooltip {
    position: absolute;
    display: none;

    background: white;
    min-width: 100px;
    max-width: 250px;
    /*padding: 10px;*/


    font: 12px/14px var(--font-reg);
    color: #ffffff;
    /*box-shadow: 0 -1px 2px rgba(0,0,0, 0.5), 0 1px 2px rgba(0,0,0, 0.5);
    border: 1px solid #000000;*/

    background: url('../images/new_ui/popups/body_bg1.png'), #1F1F1F;
    border: 1px solid #41535C;
    z-index: 3;

    transition: opacity 0.5s ease-in-out;

    pointer-events: none; /* prevents moving over a tooltip and not firing events */
}
#popup-tooltip.generic {
    max-width: 400px;
}
#popup-tooltip .tooltip-content{
    padding: 5px;
}
#popup-tooltip.no-padding-content .tooltip-content{
    padding: 0;
}
#popup-tooltip.no-padding-content .desc{
    padding: 2px 5px;
    text-align: center;
}
#popup-tooltip.no-padding-content .desc > div {
    color: inherit;
}
#popup-tooltip.no-padding-content .right-text {
    display: inline-block;
    margin-left: 5px;
}
#popup-tooltip.no-padding-content .smaller-text-desc {
    font: 11px/13px var(--font-reg);
}
#popup-tooltip.no-padding-content .smaller-text-desc .icon {
    width: 15px;
    height: 15px;
}
/*modular*/
#popup-tooltip.shown {
    display: block;
}

#popup-tooltip.fadein-holder {
    transition: none;
    opacity: 0;
    pointer-events: none;
}
/*modular*/
#popup-tooltip .header {
    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));
    /*font: 20px/35px var(--font-title);*/
    font: 20px/32px var(--font-title);
    padding-left: 10px;
    border-bottom: 1px solid #41535C;
}
#popup-tooltip .name-section {
    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));
    /*font: 20px/35px var(--font-title);*/
    font: 10px/20px var(--font-reg);
    text-transform: uppercase;
    padding: 0 5px;
    border-bottom: 1px solid #41535C;
}
#popup-tooltip .name-section:not(:first-child) {
    border-top: 1px solid #41535C;
}
#popup-tooltip .name-section > .icon {
    float: right;
    margin-left: 5px;
    margin-top: 5px;
}
/*border-radius: 8px 8px 0 0;*/
/*border-bottom: 1px solid #404040;*/
#popup-tooltip .name {
    font: 700 12px/14px var(--font-reg);
    margin-bottom: 5px;
}
/*modular*/
#popup-tooltip .desc {
    margin-bottom: 5px;
    font: 12px/14px var(--font-reg);
}
#popup-tooltip .green-desc {
    /*color: green;*/
    color: var(--clr-green-primary);
    display: inline-block;
}
#popup-tooltip .extra-desc {
    color: green;
    color: #B6B6B6;
    margin-top: 10px;
}
#popup-tooltip .extra-desc ul {
    padding-left: 0;
    list-style-type: none;
}
#popup-tooltip .extra-desc ul span {

    display: inline-block;
    float: right;
    text-align: left;
    min-width: 100px;
}
#popup-tooltip .desc-red {
    color: var(--clr-red-primary);
    margin-top: 10px;
}
#popup-tooltip .specialization {
    margin-bottom: 5px;
    font: 700 11px/13px var(--font-reg);
    color: #f7931e;
}
#popup-tooltip .desc > div {
    color: #f7931e;
    margin-bottom: 5px;
    font: 11px/13px var(--font-reg);
}
#popup-tooltip .current {
}
#popup-tooltip .increase {
    color: #8cc63f;
}
#popup-tooltip .buy-info {
    color: grey;
}
#popup-tooltip .hint {
    margin-top: 10px;
    font-size: 9px;
}
#popup-tooltip .demo-locked {
    margin: 10px 0;
    color: var(--clr-red-primary);
    font: 700 12px/14px var(--font-reg);
}
#popup-tooltip .red-text {
    color: var(--clr-red-primary) !important;
}
#popup-tooltip .reg-text {
    color: white !important;
}
#popup-tooltip.shown .time-warp .data-item > div{
    display: inline-block;
}
#popup-tooltip.shown .time-warp .data-item > .gain-title{
    margin-left: 4px;
}
#popup-tooltip .time-warp .name {
    margin-top: 5px;
    margin-bottom: 0;
}
#popup-tooltip .time-warp .desc > div{
    font: 700 12px/16px var(--font-reg);
}
#popup-tooltip .time-warp .note {
    font: 700 10px/13px var(--font-reg);
    /*font-style: italic;*/
}
#popup-tooltip .research-requires {
    margin-top: 10px;
}
/*#popup-tooltip*/ .req-locked {
    /*color: red;*/
    line-height: 15px;
}
/*#popup-tooltip*/ .req-locked:before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    /*background: url('../images/check_icon_no.png');*/
    background: url('../images/new_ui/game/icons/completion_icons.png');
    background-size: 200% 100%;
    background-position-x: 0;
    margin-right: 5px;
    vertical-align: top;
}
/*#popup-tooltip*/ .req-unlocked {
    /*color: green;*/
    line-height: 15px;
}
/*#popup-tooltip*/ .req-unlocked:before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    /*background: url('../images/check_icon_yes.png');*/
   background: url('../images/new_ui/game/icons/completion_icons.png');
   background-size: 200% 100%;
   background-position-x: -100%;
    margin-right: 5px;
    vertical-align: top;
}
#popup-tooltip[data-type="build_costs"] {
    font-feature-settings: 'tnum';
}
/* END popuptooltip */

/* AT THE VERY END - progress bar css - takes up a lot of space */
/*modular*/
.progress-bar {
    position: relative;
    /*box-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;*/
    background: white;
}
.progress-bar.regular {
    height: 5px;
}
.progress-bar.vertical-progress-bar {
    transform-origin: 0% 50%;
    transform: rotate(90deg);
}
/*modular*/
.progress-bar:before {
    content: '';
    color: white;
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 0;
    /*background-color: #0199e2;*/
    background: url('../images/new/exploring_area_bar_fill.png') 0 -1px;
    background: #5D8D4B;

    will-change: transform;
    transition: transform 10ms;
    transform-origin: 0 0;
}
/*modular*/
.progress-bar:after {
    content: attr(data-after);
    position: absolute;
    top: 0;
    left: 0;

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

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

/* circle progress */
/* test*/
.test-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
}
.test-progress2 {
    position: absolute;
    top: 60%;
    left: 50%;
    z-index: 999;
}
.test-progress3 {
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: 999;
}
/*end test */
div[data-anim~="base"] {
    will-change: transform;
}
.arc-wrapper {
    width: 30px;
    height: 30px;
    position: absolute;
    /*clip: rect(0px, 30px, 30px, 15px);*/
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
}
.arc-wrapper.parent-size {
    width: auto;
    height: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.arc-wrapper.inverted {
    transform: scaleX(-1);
}
.arc {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 15px solid #f7931e;
    border-radius: 100%;
    /*clip: rect(0px, 15px, 30px, 0px);*/
    /*transform-origin: 15px 15px;*/
    clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
    transform-origin: 50% 50%;
    /*transition: transform 0.5s;*/
}
.arc[data-anim~=right] {
    border-color: #f7931e;
}
.arc.brown-overlay {
    border-color: rgba(117, 68, 45, 1);
}
/*.arc-wrapper.size-50 {
    width: 50px;
    height: 50px;
    clip: rect(0px, 50px, 50px, 25px);
}
.arc-wrapper.size-50 .arc {
    border-width: 25px;
    clip: rect(0px, 25px, 50px, 0px);
    transform-origin: 25px 25px;
}*/
.arc-wrapper[data-progress^="0.5"],
.arc-wrapper[data-progress^="0.6"],
.arc-wrapper[data-progress^="0.7"],
.arc-wrapper[data-progress^="0.8"],
.arc-wrapper[data-progress^="0.9"],
.arc-wrapper[data-progress^="1"]{
    /*clip: rect(auto, auto, auto, auto);*/
    clip-path: none;
}
.arc-wrapper[data-progress="0"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.0"] .arc[data-anim~=right]{
    transform: rotate(0deg);
}
.arc-wrapper[data-progress^="0.01"] .arc[data-anim~=right] {
    transform: rotate(3deg);
}
.arc-wrapper[data-progress^="0.02"] .arc[data-anim~=right] {
    transform: rotate(7deg);
}
.arc-wrapper[data-progress^="0.03"] .arc[data-anim~=right] {
    transform: rotate(10deg);
}
.arc-wrapper[data-progress^="0.04"] .arc[data-anim~=right] {
    transform: rotate(14deg);
}
.arc-wrapper[data-progress^="0.05"] .arc[data-anim~=right] {
    transform: rotate(18deg);
}
.arc-wrapper[data-progress^="0.06"] .arc[data-anim~=right] {
    transform: rotate(21deg);
}
.arc-wrapper[data-progress^="0.07"] .arc[data-anim~=right] {
    transform: rotate(25deg);
}
.arc-wrapper[data-progress^="0.08"] .arc[data-anim~=right] {
    transform: rotate(28deg);
}
.arc-wrapper[data-progress^="0.09"] .arc[data-anim~=right] {
    transform: rotate(32deg);
}
.arc-wrapper[data-progress^="0.1"] .arc[data-anim~=right] {
    transform: rotate(36deg);
}
.arc-wrapper[data-progress^="0.11"] .arc[data-anim~=right] {
    transform: rotate(39deg);
}
.arc-wrapper[data-progress^="0.12"] .arc[data-anim~=right] {
    transform: rotate(43deg);
}
.arc-wrapper[data-progress^="0.13"] .arc[data-anim~=right] {
    transform: rotate(46deg);
}
.arc-wrapper[data-progress^="0.14"] .arc[data-anim~=right] {
    transform: rotate(50deg);
}
.arc-wrapper[data-progress^="0.15"] .arc[data-anim~=right] {
    transform: rotate(54deg);
}
.arc-wrapper[data-progress^="0.16"] .arc[data-anim~=right] {
    transform: rotate(57deg);
}
.arc-wrapper[data-progress^="0.17"] .arc[data-anim~=right] {
    transform: rotate(61deg);
}
.arc-wrapper[data-progress^="0.18"] .arc[data-anim~=right] {
    transform: rotate(54deg);
}
.arc-wrapper[data-progress^="0.19"] .arc[data-anim~=right] {
    transform: rotate(68deg);
}
.arc-wrapper[data-progress^="0.2"] .arc[data-anim~=right] {
    transform: rotate(72deg);
}
.arc-wrapper[data-progress^="0.21"] .arc[data-anim~=right] {
    transform: rotate(75deg);
}
.arc-wrapper[data-progress^="0.22"] .arc[data-anim~=right] {
    transform: rotate(79deg);
}
.arc-wrapper[data-progress^="0.23"] .arc[data-anim~=right] {
    transform: rotate(82deg);
}
.arc-wrapper[data-progress^="0.24"] .arc[data-anim~=right] {
    transform: rotate(86deg);
}
.arc-wrapper[data-progress^="0.25"] .arc[data-anim~=right] {
    transform: rotate(90deg);
}
.arc-wrapper[data-progress^="0.26"] .arc[data-anim~=right] {
    transform: rotate(93deg);
}
.arc-wrapper[data-progress^="0.27"] .arc[data-anim~=right] {
    transform: rotate(97deg);
}
.arc-wrapper[data-progress^="0.28"] .arc[data-anim~=right] {
    transform: rotate(100deg);
}
.arc-wrapper[data-progress^="0.29"] .arc[data-anim~=right] {
    transform: rotate(104deg);
}
.arc-wrapper[data-progress^="0.3"] .arc[data-anim~=right] {
    transform: rotate(108deg);
}
.arc-wrapper[data-progress^="0.31"] .arc[data-anim~=right] {
    transform: rotate(111deg);
}
.arc-wrapper[data-progress^="0.32"] .arc[data-anim~=right] {
    transform: rotate(115deg);
}
.arc-wrapper[data-progress^="0.33"] .arc[data-anim~=right] {
    transform: rotate(118deg);
}
.arc-wrapper[data-progress^="0.34"] .arc[data-anim~=right] {
    transform: rotate(122deg);
}
.arc-wrapper[data-progress^="0.35"] .arc[data-anim~=right] {
    transform: rotate(126deg);
}
.arc-wrapper[data-progress^="0.36"] .arc[data-anim~=right] {
    transform: rotate(129deg);
}
.arc-wrapper[data-progress^="0.37"] .arc[data-anim~=right] {
    transform: rotate(133deg);
}
.arc-wrapper[data-progress^="0.38"] .arc[data-anim~=right] {
    transform: rotate(136deg);
}
.arc-wrapper[data-progress^="0.39"] .arc[data-anim~=right] {
    transform: rotate(140deg);
}
.arc-wrapper[data-progress^="0.4"] .arc[data-anim~=right] {
    transform: rotate(144deg);
}
.arc-wrapper[data-progress^="0.41"] .arc[data-anim~=right] {
    transform: rotate(147deg);
}
.arc-wrapper[data-progress^="0.42"] .arc[data-anim~=right] {
    transform: rotate(151deg);
}
.arc-wrapper[data-progress^="0.43"] .arc[data-anim~=right] {
    transform: rotate(154deg);
}
.arc-wrapper[data-progress^="0.44"] .arc[data-anim~=right] {
    transform: rotate(158deg);
}
.arc-wrapper[data-progress^="0.45"] .arc[data-anim~=right] {
    transform: rotate(162deg);
}
.arc-wrapper[data-progress^="0.46"] .arc[data-anim~=right] {
    transform: rotate(165deg);
}
.arc-wrapper[data-progress^="0.47"] .arc[data-anim~=right] {
    transform: rotate(169deg);
}
.arc-wrapper[data-progress^="0.48"] .arc[data-anim~=right] {
    transform: rotate(172deg);
}
.arc-wrapper[data-progress^="0.49"] .arc[data-anim~=right] {
    transform: rotate(176deg);
}
.arc-wrapper[data-progress^="0.5"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.6"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.7"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.8"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.9"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="1"] .arc[data-anim~=right] {
    transform: rotate(180deg);
}

.arc-wrapper[data-progress^="0.45"] .arc[data-anim~=left] {
    transform: rotate(162deg);
}
.arc-wrapper[data-progress^="0.46"] .arc[data-anim~=left] {
    transform: rotate(165deg);
}
.arc-wrapper[data-progress^="0.47"] .arc[data-anim~=left] {
    transform: rotate(169deg);
}
.arc-wrapper[data-progress^="0.48"] .arc[data-anim~=left] {
    transform: rotate(172deg);
}
.arc-wrapper[data-progress^="0.49"] .arc[data-anim~=left] {
    transform: rotate(176deg);
}
.arc-wrapper[data-progress^="0.5"] .arc[data-anim~=left] {
    transform: rotate(180deg);
}
.arc-wrapper[data-progress^="0.51"] .arc[data-anim~=left] {
    transform: rotate(183deg);
}
.arc-wrapper[data-progress^="0.52"] .arc[data-anim~=left] {
    transform: rotate(187deg);
}
.arc-wrapper[data-progress^="0.53"] .arc[data-anim~=left] {
    transform: rotate(190deg);
}
.arc-wrapper[data-progress^="0.54"] .arc[data-anim~=left] {
    transform: rotate(194deg);
}
.arc-wrapper[data-progress^="0.55"] .arc[data-anim~=left] {
    transform: rotate(198deg);
}
.arc-wrapper[data-progress^="0.56"] .arc[data-anim~=left] {
    transform: rotate(201deg);
}
.arc-wrapper[data-progress^="0.57"] .arc[data-anim~=left] {
    transform: rotate(205deg);
}
.arc-wrapper[data-progress^="0.58"] .arc[data-anim~=left] {
    transform: rotate(208deg);
}
.arc-wrapper[data-progress^="0.59"] .arc[data-anim~=left] {
    transform: rotate(212deg);
}
.arc-wrapper[data-progress^="0.6"] .arc[data-anim~=left] {
    transform: rotate(216deg);
}
.arc-wrapper[data-progress^="0.61"] .arc[data-anim~=left] {
    transform: rotate(219deg);
}
.arc-wrapper[data-progress^="0.62"] .arc[data-anim~=left] {
    transform: rotate(223deg);
}
.arc-wrapper[data-progress^="0.63"] .arc[data-anim~=left] {
    transform: rotate(226deg);
}
.arc-wrapper[data-progress^="0.64"] .arc[data-anim~=left] {
    transform: rotate(230deg);
}
.arc-wrapper[data-progress^="0.65"] .arc[data-anim~=left] {
    transform: rotate(234deg);
}
.arc-wrapper[data-progress^="0.66"] .arc[data-anim~=left] {
    transform: rotate(237deg);
}
.arc-wrapper[data-progress^="0.67"] .arc[data-anim~=left] {
    transform: rotate(241deg);
}
.arc-wrapper[data-progress^="0.68"] .arc[data-anim~=left] {
    transform: rotate(244deg);
}
.arc-wrapper[data-progress^="0.69"] .arc[data-anim~=left] {
    transform: rotate(248deg);
}
.arc-wrapper[data-progress^="0.7"] .arc[data-anim~=left] {
    transform: rotate(252deg);
}
.arc-wrapper[data-progress^="0.71"] .arc[data-anim~=left] {
    transform: rotate(255deg);
}
.arc-wrapper[data-progress^="0.72"] .arc[data-anim~=left] {
    transform: rotate(259deg);
}
.arc-wrapper[data-progress^="0.73"] .arc[data-anim~=left] {
    transform: rotate(262deg);
}
.arc-wrapper[data-progress^="0.74"] .arc[data-anim~=left] {
    transform: rotate(266deg);
}
.arc-wrapper[data-progress^="0.75"] .arc[data-anim~=left] {
    transform: rotate(270deg);
}
.arc-wrapper[data-progress^="0.76"] .arc[data-anim~=left] {
    transform: rotate(273deg);
}
.arc-wrapper[data-progress^="0.77"] .arc[data-anim~=left] {
    transform: rotate(277deg);
}
.arc-wrapper[data-progress^="0.78"] .arc[data-anim~=left] {
    transform: rotate(280deg);
}
.arc-wrapper[data-progress^="0.79"] .arc[data-anim~=left] {
    transform: rotate(284deg);
}
.arc-wrapper[data-progress^="0.8"] .arc[data-anim~=left] {
    transform: rotate(288deg);
}
.arc-wrapper[data-progress^="0.81"] .arc[data-anim~=left] {
    transform: rotate(291deg);
}
.arc-wrapper[data-progress^="0.82"] .arc[data-anim~=left] {
    transform: rotate(295deg);
}
.arc-wrapper[data-progress^="0.83"] .arc[data-anim~=left] {
    transform: rotate(298deg);
}
.arc-wrapper[data-progress^="0.84"] .arc[data-anim~=left] {
    transform: rotate(302deg);
}
.arc-wrapper[data-progress^="0.85"] .arc[data-anim~=left] {
    transform: rotate(306deg);
}
.arc-wrapper[data-progress^="0.86"] .arc[data-anim~=left] {
    transform: rotate(309deg);
}
.arc-wrapper[data-progress^="0.87"] .arc[data-anim~=left] {
    transform: rotate(313deg);
}
.arc-wrapper[data-progress^="0.88"] .arc[data-anim~=left] {
    transform: rotate(316deg);
}
.arc-wrapper[data-progress^="0.89"] .arc[data-anim~=left] {
    transform: rotate(320deg);
}
.arc-wrapper[data-progress^="0.9"] .arc[data-anim~=left] {
    transform: rotate(324deg);
}
.arc-wrapper[data-progress^="0.91"] .arc[data-anim~=left] {
    transform: rotate(327deg);
}
.arc-wrapper[data-progress^="0.92"] .arc[data-anim~=left] {
    transform: rotate(331deg);
}
.arc-wrapper[data-progress^="0.93"] .arc[data-anim~=left] {
    transform: rotate(334deg);
}
.arc-wrapper[data-progress^="0.94"] .arc[data-anim~=left] {
    transform: rotate(338deg);
}
.arc-wrapper[data-progress^="0.95"] .arc[data-anim~=left] {
    transform: rotate(342deg);
}
.arc-wrapper[data-progress^="0.96"] .arc[data-anim~=left] {
    transform: rotate(345deg);
}
.arc-wrapper[data-progress^="0.97"] .arc[data-anim~=left] {
    transform: rotate(349deg);
}
.arc-wrapper[data-progress^="0.98"] .arc[data-anim~=left] {
    transform: rotate(352deg);
}
.arc-wrapper[data-progress^="0.99"] .arc[data-anim~=left] {
    transform: rotate(356deg);
}
.arc-wrapper[data-progress^="1"] .arc[data-anim~=left] {
    transform: rotate(360deg);
}
/* loader class */
#gameContent  .loader-holder {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    pointer-events: none;
}
/* loader class */
#gameContent .loader-holder.cover-screen {
    /*background: url('../images/new/bg_new.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%;
    pointer-events: auto;
}
.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
.loader {
    position: absolute;
    /*z-index: 9999;*/
    top: calc(50% - 5em);
    /*right: 0;
    bottom: 0;*/
    left: calc(50% - 6em);
    margin: auto;
    font-size: 10px;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
.loader-holder .loader-text {
    width: 300px;
    position: absolute;
    top: calc(50% + 5em);
    left: calc(50% - 150px);
    color: white;
    font: 18px/18px var(--font-reg);
    text-align: center;
}
#dynamicDOM .tutorial-arrow {
    position: absolute;
    top: 0;
    left: 0;
    /* we use translate for better performance to move the arrow */
    transform-origin: center center;
    pointer-events: none;
}
#dynamicDOM .tutorial-arrow > div { /* needs a second div so flicker and rotation can be separate transforms*/
    width: 34px;
    height: 75px;
    /*background: url('../images/new/tutorial_arrow.png');*/
    background: url('../images/new/tutorial_arrow_on_research.png');
    background-size: 100% 100%;
    animation: scaleFlicker 2s infinite;
    transform-origin: center center;
}
/*#dynamicDOM .tutorial-arrow > div:before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    background: url('../images/new/hand_drag.png');
    background-size: 100% 100%;

    width: 27px;
    height: 27px;

    animation: dragHand 1s infinite ease-in;
}*/
@keyframes dragHand {
    0% {transform: translateY(0) scaleY(1);}
    60% {transform: translateY(20px) scaleY(0.85);}
    100% {transform: translateY(20px) scaleY(0.85);}
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* COLS TEST */

.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
    break-inside: avoid;
}