/* START TOP UI*/
.ui-holder.top .hamburger {
	margin-right: 10px;
	width: 60px;
	height: 60px;
	background: url('../images/ui/hamburger.png');
	background-size: 100% 100%;
}
.ui-holder .resources {
	display: flex;
	padding-top: 5px;
	padding-left: 10px;
}
.ui-holder .resources .resource-box {
	width: 16ch;
	margin-right: 20px;
}
.ui-holder .resources .resource-box .amount {
	margin-left: 10px;
	color: var(--clr-pri);
	font-size: 20px;
	line-height: 30px;
}
.ui-holder .current-wave {
	margin-left: 10px;
	font-size: 30px;
	line-height: 35px;
	font-weight: bold;
}
.ui-holder .next-wave-in {
	margin-left: 0px;
	font-size: 15px;
	line-height: 20px;
	font-weight: normal;
}
.ui-holder .current-score {
	font-size: 30px;
	line-height: 35px;
	font-weight: bold;
	text-align: center;
}
.ui-holder .total-score {
	font-size: 15px;
	line-height: 20px;
	font-weight: normal;
}
.ui-holder .current-bonus-damage {
	position: absolute;
	width:  max-content;
	top: 80px;
	left: 0;
	right: 0;
	margin: 0 auto;

	font: 700 25px/30px var(--font-reg);
	color: yellow;

	text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
}
.ui-holder .current-bonus-damage:not(.hidden) {
	animation: scaleInOutTiny 1s infinite ease-in-out;
}
/* END TOP UI*/

/* START RIGHT UI*/
.ui-holder .towers {
	margin-right: 10px;
}
.ui-holder .tower-box {
	margin-bottom: 10px;
	padding: 3px;
	border: 2px solid black;
	cursor: pointer;
}
.ui-holder .tower-box.disabled {
	opacity: 0.5;
}
.ui-holder .tower-box.active {
	background: yellow;
	/*pointer-events: none;*/
}
.ui-holder .tower-box .costs {
	text-align: center;
	margin-top: 5px;
}
.ui-holder .tower-box .costs .icon {
	margin-left: 5px;
}
/* END RIGHT UI*/

/* START BOTTOM UI*/
.ui-holder.bottom {
	padding: 0 10px 5px 10px;
}
.ui-holder .next-waves-holder {
	font-size: 25px;
	line-height: 30px;
	align-items: center;
}
.ui-holder .send-next-wave {
	margin: 0 20px;
}
.ui-holder .next-waves-holder .next-wave {
	margin-left: 10px;
}
.ui-holder .next-wave .icon {
	text-align: center;
	margin-right: 5px;
	font-size: 18px;
}
.ui-holder .game-speed {
	font-size: 25px;
	line-height: 25px;
	margin-right: 10px;
}
.ui-holder .play-pause {
	font-size: 20px;
}
.ui-holder .game-speed:not(.active):not(.play-pause) {
	cursor: pointer;
	opacity: 0.5;
}
/* END BOTTOM UI*/

/* START POPUPS*/
#dynamicDOM .popup-holder.full-viewport {
	background: rgba(0,0,0,0.9);
}
#dynamicDOM .popup-holder.full-viewport .popup-content-holder {

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

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

	box-shadow: none;
}
#dynamicDOM .popup-holder.full-viewport .popup-content-holder .header {
	background: none;
}
#dynamicDOM .popup-holder.full-viewport .popup-content {
	background: none;
	color: var(--clr-sec);
}

#dynamicDOM .popup-holder.full-viewport[data-type="main_menu"] .popup-content {
	background: var(--bg-pri);
	color: var(--clr-pri)
}

#dynamicDOM .popup-holder.full-viewport[data-type="main_menu"] {
	background: #ffffff;
}
#dynamicDOM .popup-holder.full-viewport[data-type="main_menu"] .popup-content {
	background: url('../images/the_light.png') 50% 50% no-repeat, url('../images/floor_pattern_yellow.png');
	background-size: 30% auto, auto auto;
}
#dynamicDOM .popup-holder .middle-holder {
	height: 100%;
}
#dynamicDOM .popup-holder .lost-message {
	font: 700 30px/40px var(--font-reg);
	margin-bottom: 1%;
	color: var(--clr-sec);
}
#dynamicDOM .popup-holder .total-score {
	font: 700 30px/40px var(--font-reg);
	margin-bottom: 10%;
	color: yellow;
}
#dynamicDOM .popup-holder .rewards {
	text-align: center;
	margin: 30px 0;
	padding: 5px 20px;
	border: 1px solid var(--clr-sec);
}
#dynamicDOM .popup-holder .reward-header {
	font: 700 25px/30px var(--font-reg);
	margin-bottom: 10px;
}
#dynamicDOM .popup-holder .reward {
	font: 700 25px/30px var(--font-reg);
	color: yellow;
}
#dynamicDOM .popup-holder .middle-holder p {
	font: 20px/25px var(--font-reg);
	margin: 0 0 10px 0;
	text-align: center;
	max-width: 50ch;
}
#dynamicDOM .popup-holder .next-gains {
	margin-top: 20px;
}
#dynamicDOM .popup-holder .next-gain-hint {
	color: yellow;
}
#dynamicDOM .popup-holder.full-viewport .btn {
	margin-top: 30px;
	font: 700 30px/35px var(--font-reg);
}
	/* END POPUPS */
/* QUICK POPUPS */
.quick-popup-holder .upgrade-box > div > div:first-child {
	margin-bottom: 5px;
}
.quick-popup-holder .upgrade-box .buy-box {
	margin-left: 20px;
	text-align: center;
}
/* END QUICK POPUPS */

/* TEST UGLY ANIMS */

#animations-attach-point .animation {
	/*z-index: 1;*/
	pointer-events: none;
}
#animations-attach-point .animation.over-ui {
	z-index: 2;
}
#animations-attach-point .animation.origin-left {
	transform-origin: 0 center;
}
#animations-attach-point .animation.anim-2s {
	animation-duration: 2s;
}
/*modular*/
.scale_in_out_text {
	position: absolute;

	left: 250px;
	top: 250px;

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

	text-align: center;

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

	/*background: url('../images/radial_white_blur.png') no-repeat;*/
	transition: background-color 0.6s ease-in-out, opacity 0.6s ease-in-out;
	animation: radialBlur 0.6s ease-out /*infinite*/;
	/*background: url('../images/overlay/clouds_radial_blur.png') no-repeat, #000000;
	background-size: 100% 100%;*/
}
.anim_radialBlur.ms-100 {
	transition-duration: 100ms;
	animation-duration: 100ms;
}
.anim_radialBlur.ms-10 {
	transition-duration: 10ms;
	animation-duration: 10ms;
}
@keyframes scaleIn{
	0%      { opacity: 1.0; transform:  scale(1.0); }
	100%    { opacity: 0.0; transform:  scale(2.2); }
}
@keyframes scaleInOut {
	0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
	100%    { opacity: 0.0; transform: translate(0, -50px) scale(1.5); }
}
@keyframes scaleInOutDown {
	0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
	100%    { opacity: 0.0; transform: translate(0, 50px) scale(1.5); }
}
@keyframes scaleInOutSpec {
	0%      { opacity: 1.0; transform: scale(1.0) }
	50%    { opacity: 1.0; transform: scale(1.1); }
	100%    { opacity: 1.0; transform: scale(1.0); }
}
@keyframes scaleOutInSpec {
	0%      { opacity: 1.0; transform: scale(1.0) }
	50%    { opacity: 1.0; transform: scale(0.8); }
	100%    { opacity: 1.0; transform: scale(1.0); }
}
@keyframes scaleInOutSpecIdleCitizens {
	0%      { opacity: 1.0; transform: scale(1.0) }
	50%    { opacity: 1.0; transform: scale(1.4); }
	100%    { opacity: 1.0; transform: scale(1.0); }
}
/*modular*/
@keyframes scaleInOutSmall {
	0%      { opacity: 1.0; transform: translate(0, 0) scale(1.0); }
	100%    { opacity: 0.0; transform: translate(0, -10px) scale(1.1); }
}

@keyframes scaleInOutTiny {
	0%      { transform: scale(1.0); }
	50%    { transform: scale(1.02); }
	100%    { transform: scale(1.0); }
}

/* for send next wave*/
.tutorial-anim {
	animation: tutorialAnim 1s infinite ease-in-out;
	transform-origin: 50% 100%;
}
@keyframes tutorialAnim {
	0%      { transform: scale(1.0); }
	50%    { transform: scale(1.05); }
	100%    { transform: scale(1.0); }
}