@font-face {
	font-family  : OnboardingFont;
	src 			: url("Baloo-cyrillic.ttf") format("truetype");
	font-weight	: normal;
}

body {
	padding: 0;
	margin: 0
}

#unity-container {
	position: absolute;
}

#unity-canvas {
}

#unity-warning {
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translate(-50%);
	background: white;
	padding: 10px;
	display: none
}

#app-container{
	background-image: url(../images/bg_2560_1050.jpg?8);
	background-position: center top;
	background-repeat: no-repeat;
	height 		: 100vh;
	position 	: relative;
	top 		: 0px;
	overflow 	: hidden;
}

#unity-container{
	height: fit-content;
	margin: 0 auto;
	position: relative;
	width: fit-content;
}

#loadscreen-container{
	background: url(../images/load_screen_bg.jpg?8) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	position : absolute;
	top 	 : 0px;
	left 	 : 50%;
	transform: translate(-50%, 0);
}

.loader {
	height: 20px;
	width: 250px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.loader-dot {
	animation-name: loader;
	animation-timing-function: ease-in-out;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	background-color: black;
	position: absolute;
	border: 2px solid white;
}
.loader-dot:first-child {
	background-color: #8cc759;
	animation-delay: 0.5s;
}
.loader-dot:nth-child(2) {
	background-color: #8c6daf;
	animation-delay: 0.4s;
}
.loader-dot:nth-child(3) {
	background-color: #ef5d74;
	animation-delay: 0.3s;
}
.loader-dot:nth-child(4) {
	background-color: #f9a74b;
	animation-delay: 0.2s;
}
.loader-dot:nth-child(5) {
	background-color: #60beeb;
	animation-delay: 0.1s;
}
.loader-dot:nth-child(6) {
	background-color: #fbef5a;
	animation-delay: 0s;
}

#loader-text {
	position: absolute;
	top: 200%;
	left: 0;
	right: 0;
	width: 4rem;
	margin: auto;
	color : white;
	font-weight: bold;
}
#loader-text .loader-indicator:after {
	content: "";
	animation-name: loading-text;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

@keyframes loader {
	15% {
		transform: translateX(0);
	}
	45% {
		transform: translateX(230px);
	}
	65% {
		transform: translateX(230px);
	}
	95% {
		transform: translateX(0);
	}
}
@keyframes loading-text {
	0% {
		content: "";
	}
	25% {
		content: ".";
	}
	50% {
		content: "..";
	}
	75% {
		content: "...";
	}
}


#onboarding-container{
	position : absolute;
	top 	 : 0px;
	left 	 : 50%;
	transform: translate(-50%, 0);

	font-family             : OnboardingFont;
}

.onboarding-page
{
	position : absolute;
	top 	 : 0px;
	left 	 : 50%;
	transform: translate(-50%, 0);
	width: 100%;
	height: 100%;
}

#onboarding-start{
	background: url("../images/ob_start.jpg?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


#onboarding-p1{
	background: url("../images/ob_bg.jpg?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#onboarding-p2{
	background: url("../images/ob_bg.jpg?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#onboarding-finish{
	background: url("../images/ob_finish.jpg?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


.onboarding-text-header
{
	position : absolute;
	top 	 : 2%;
	left 	 : 50%;
	transform: translate(-50%, 0);
	width: min(55vh, 95vw);
	height: 25vh;

	color                   : white;
	font-weight				: normal;
	font-size               : 4vh;

	text-align              : center;
	text-decoration         : none;

	text-shadow: -1.5px -1.5px 0 #100f5d, 1.5px -1.5px 0 #100f5d, -1.5px 2.5px 0 #100f5d, 1.5px 2.5px 0 #100f5d;
	letter-spacing: .05em;
	line-height: 110%;
}

.onboarding-text
{
	color                   : white;
	font-weight				: normal;
	font-size               : 3.3vh;

	text-align              : center;
	text-decoration         : none;

	text-shadow: -1.5px -1.5px 0 #0a1f74, 1.5px -1.5px 0 #0a1f74, -1.5px 1.5px 0 #0a1f74, 1.5px 1.5px 0 #0a1f74;
	letter-spacing: .05em;
	line-height:	110%;
}

.onboarding-color-bucks
{
	color					: #ffd800;
}

.onboarding-color-ruby
{
	color					: #ff4edc;
}

.onboarding-page-image1
{
	position : absolute;
	top 	 : 11%;
	left 	 : 50%;
	transform: translate(-50%, 0);
	width: 37vh;
	height: 25vh;
}

.onboarding-page-text1
{
	position : absolute;
	top 	 : calc(11% + 26vh);
	left 	 : 50%;
	transform: translate(-50%, 0);
	width: min(50vh, 95vw);
	height: 25vh;
}

.onboarding-page-image2
{
	position : absolute;
	top 	 : 48%;
	left 	 : 50%;
	transform: translate(-50%, 0);
	width: 37vh;
	height: 25vh;
}

.onboarding-page-text2
{
	position : absolute;
	top 	 : calc(48% + 25vh);
	left 	 : 50%;
	transform: translate(-50%, 0);
	width: min(55vh, 95vw);
	height: 25vh;
}

#onboarding-p1-i1{
	background: url("../images/ob_icon_1_1.png?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


#onboarding-p1-i2{
	background: url("../images/ob_icon_1_2.png?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


#onboarding-p2-i1{
	background: url("../images/ob_icon_2_1.png?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


#onboarding-p2-i2{
	background: url("../images/ob_icon_2_2.png?8") center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#onboarding-container.hidden,
#onboarding-start.hidden,
#onboarding-p1.hidden,
#onboarding-p2.hidden,
#onboarding-finish.hidden,
#tads-popup-redirect_btn1.hidden,
#tads-containers.hidden,
#tads-popup-redirect_btn2.hidden
{
	display: none;
}

.btns-panel{
	overflow        : hidden;
	position        : relative;
	left            : 6%;
	top             : 87%;
	width           : 88%;
	height          : 10%;
}

.btns-panel .btn{
	float : left;

	color                   : white;
	font-weight				: normal;
	font-size               : 6.0vh;
	background-position 	: 0px 0px;
	background-repeat       : no-repeat;
	text-align              : center;
	text-decoration         : none;
	height                  : 100%;
	width                   : 100%;

	text-shadow: -1.5px -1.5px 0 #077e1d, 1.5px -1.5px 0 #077e1d, -1.5px 2.0px 0 #077e1d, 1.8px 2.0px 0 #077e1d;
	letter-spacing: .04em;

	line-height				: 155%;

}

.DISABLEbtns-panel .DISABLEbtn:hover{
//background-position : 0px -82px;
	background-position : 0px 100%;
}

.btns-panel .btn-continue{
	background : url("../images/btn_play.png?8") no-repeat center top;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

.close-btn-cross{
	background-image: url("../images/btn_close.png?8");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 5vh;
	height: 5vh;
}

.close-btn-cross:hover{
	filter: contrast(80%);
}

.close-btn-cross:active{
	filter: contrast(100%);
}

.reload-game-btn{
	background-image: url("../images/btn_continue.png?10");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 83%;
	left: 50%;
	width: 35vh;
	height: 10vh;
}

.reload-game-btn:hover{
	filter: contrast(80%);
}

.reload-game-btn:active{
	filter: contrast(100%);
}

#another-device-popup,
#load-res-exception-popup{
	background-image: url("../images/popup_two_device.png?10");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50vh;
	height: 65vh;
	font-family: OnboardingFont;
}

#another-device-popup.hidden,
#load-res-exception-popup.hidden{
	display : none;
}

#another-device-popup .close-btn-cross,
#load-res-exception-popup .close-btn-cross{
	top: 10%;
	left: 97%;
}

.another-device-popup-header-text, 
.load-res-exception-popup-header-text {
	position: absolute;
	top: 3.4%;
	left: 50%;
	transform: translate(-50%, 0);
	color: #f6f1c9;
	font-weight: normal;
	font-size: 5vh;
	text-align: center;
	text-decoration: none;
	text-shadow: -1px -1px 1px #100f5d, 1px -1px 2px #100f5d, -1px 2px 3px #100f5d, 1px 2px 2px #100f5d;
	letter-spacing: .05em;
	line-height: 110%;
}

.another-device-popup-desk-text, 
.load-res-exception-popup-desk-text{
	color: white;
	top: 42%;
	left: 5%;
	font-weight: normal;
	font-size: 2.7vh;
	text-align: center;
	position: absolute;
	text-decoration: none;
	text-shadow: -1.5px -1.5px 0 #0a1f74, 1.5px -1.5px 0 #0a1f74, -1.5px 1.5px 0 #0a1f74, 1.5px 1.5px 0 #0a1f74;
	letter-spacing: .05em;
	line-height: 110%;
	width: 45vh;
}

.load-res-exception-popup-desk-text{
	top: 45%;
	font-size: 2vh;
}

.load-res-exception-popup-desk-text-res{
	display: block;
	width: 45vh;
	overflow-wrap: break-word
}

.load-res-exception-popup-desk-text-res > .res-id{
	color: red;
	display:contents;
}

.another-device-popup-btn-text, 
.load-res-exception-popup-btn-text  {
	color: white;
	top: 75%;
	left: 20%;
	font-weight: normal;
	font-size: 3.8vh;
	text-align: center;
	position: absolute;
	text-decoration: none;
	text-shadow: -1px -1px 1px #0a1f74, 1px -1px 1px #0a1f74, -1px 1px 3px #0a1f74, 1px 1px 3px #0a1f74;
	letter-spacing: .05em;
	line-height: 90%;
	user-select: none;
	pointer-events: none;
	width: 30vh;
	height: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.load-res-exception-popup-btn-text  {
	top: 79% !important;
}

#load-res-exception-popup .reload-game-btn {
	top: 87% !important;
}

#blackscreen{
	background: #000000cc;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

#blackscreen.hidden {
	display: none;
}

#tads-window {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #000000;
	opacity: 0.33;
}

#tads-popup {
	position: absolute;
	left: 5vw;
	top: 33%;
	opacity: 1;
	#height: 25%;
	width: 90vw;
	background: #FFFFFF;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
}

#tads-popup-title {
	display: flex;
	flex-direction: row;
}

#tads-popup-title-text {
	width: calc(100% - 25px);
	font-weight: bolder;
	font-family: system-ui;
	color: #707579;
}

#tads-popup-content {
	display: flex;
	flex-direction: column;
}

#tads-containerwrapper {
	width: 84vw;
	align-self: center;
}

.tads-container-spacer {
	height: 10px;
}

#tads-popup-redirect {
	background: dodgerblue;
	border: none;
	border-radius: 6px;
	align-self: center;
	color: white;
	padding: 10px;
	width: 84vw;
	font-size: larger;
	font-weight: bold;
}

#adsgram_tasks {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.adsgram_bro_tasks_hidden {
    height: 0% !important;
    width: 0% !important;
}

.adsgram_bro_task_reward {
    display: none !important;
}

#adsgram_tasks_blackscreen {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    opacity: 0.33;
}

.adsgram_bro_tasks_hidden #adsgram_tasks_blackscreen {
    display: none !important;
}

#adsgram_tasks_popup {
    display: block;
    width: fit-content;
    height: fit-content;
    position: relative;
    max-width: 498px;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 15px;
    transform: translate(-50%, -50%);
    background-color: #eeeeee;
    border-radius: 6px;
	border-top-color: #ffffff;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-color: #666;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	box-shadow: 0 5px 10px rgb(0,0,0,0.3);
}

.adsgram_bro_tasks_hidden #adsgram_tasks_popup {
    top: -2000px !important;
}

#adsgram_tasks_popup_content,
#adsgram_tasks_popup_text {
    display: block;
}

#adsgram_tasks_popup_content:after {
    content: "";
    display: block;
    background-color: #000000;
    height: 2px;
    opacity: 10%;
    margin: 10px -15px;
}

#adsgram_tasks_popup_text {
    margin-right: 47px;
}

#adsgram_tasks_popup_btn_close {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    width: fit-content;
    height: fit-content;
}

#adsgram_tasks_popup_title {
    display: block;
    font-weight: bolder;
    font-family: system-ui;
    font-size: 1.2em;
    color: #0088cc;
}

#adsgram_tasks_popup_desc {
    display: block;
    font-weight: bolder;
    font-family: system-ui;
    color: #707579;
}

.adsgram_tasks_task {
	--adsgram-task-font-size: 1em;
	--adsgram-task-icon-size: 30px;
	--adsgram-task-icon-title-gap: 10px;
	--adsgram-task-icon-border-radius: 6px;
	--adsgram-task-button-width: 120px;
    font-family: system-ui;
	font-weight: bolder;
	color: #707579;
}

.adsgram_tasks_task .adsgram_bro_task_button {
	background-color: #1e90ff;
	padding: 5px 0px 10px 0px;
	color: white;
	font-weight: bolder;
    font-family: system-ui;
	border-radius: 8px;
	border-top-color: #1e90ff;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-color: rgb(0,0,0,0.1);
	border-bottom-style: solid;
	border-bottom-width: 2px;
	height: fit-content;
	box-shadow: 0 5px 5px rgb(0,0,0,0.3);
	margin-left: 10px;
}

.adsgram_tasks_task .adsgram_bro_task_button_claim {
	background-color: #33cc33 !important;
	border-top-color: #33cc33 !important;
}

.adsgram_tasks_task .adsgram_bro_task_button_done {
	background-color: #33cc33 !important;
	border-top-color: #33cc33 !important;
}