@font-face{
	src: url(src/fonts/RobotoCondensed-Bold.ttf);
	font-family: Roboto Condensed;
	font-weight: 700;
}
@font-face{
	src: url(src/fonts/RobotoCondensed-Light.ttf);
	font-family: Roboto Condensed;
	font-weight: 300;
}

/*
#F2F2F2
#8C8C8C
#595959
#262626
#0D0D0D
*/


html, body {
	margin: 0;
	overflow: hidden;
	background-color:#282828;
	cursor: auto;
	
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
p{
	padding:0;
	margin:0;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
}
::-webkit-scrollbar { 
    width: 0;
    height: 0;
}

.title_container{
	display:block;
	position:absolute;
	z-index:2;
	left:15px;
	top:10px;
}
.main_title{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 60px;
	margin:0;
	color:#282828;
	z-index:2;
	line-height: 80%;
	
}
.moto{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 30px;
	margin:0;
	color:#282828;
	z-index:2;

}
.start_screen{
	background-color:#282828;
	display:block;
	width:100%;
	height:100%;
	z-index:55;
	position: absolute;
	text-align:center;
	overflow-y:auto;
}

.tit_1{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 60px;
	margin:0;
	color:#F2F2F2;
	text-align:center;
	z-index:12;
	margin:auto;
	margin-top:20px;
	display:block;
}
.tit_2{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 30px;
	font-weight:300;
	margin:0;
	color:#F2F2F2;
	text-align:center;
	z-index:12;
	margin:auto;
	display:block;
}
.sign_but{
	margin:auto;
	margin-top:20px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	padding:5px;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 22px;
	z-index:12;
	display:none;
}
.singin_note{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	margin:0;
	color:#F2F2F2;
	text-align:center;
	font-weight: 300;
	z-index:12;
	margin:auto;
	display:block;
	margin-top:10px;
}
.plot_id_cont{
	display:none;
	margin-bottom:80px;
}
.tit_3{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	margin:0;
	color:#F2F2F2;
	text-align:center;
	font-weight: 300;
	z-index:12;
	margin:auto;
	margin-top:40px;
	display:block;
}
.id_but{
	margin:auto;
	margin-top:20px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 30px;
	z-index:12;
	display:none;
}
.player_plots_container{
	margin:auto;
	width:50%;
}
.all_plots_buttons{
	margin:5px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	padding:5px;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F5F5F5;
	font-size: 18px;
	z-index:12;
	display:inline;
}

#main_canvas{
	position:absolute;
	display:block;
	height:100%;
	width:75%;
	left:0px;
}
.side_menu{
	position:absolute;
	display:block;
	height:100%;
	width:25%;
	right:0px;
	background-color:#282828;
	z-index:2;
}

.side_notes{
	z-index:2;
	width:500px;
	bottom:0px;
	left:0px;
	position:absolute;
	padding:20px;
}
.side_note_txt{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 16px;
	margin:0;
	color:white;
	left:10px;
	z-index:2;
}

.right_side_notes{
	z-index:2;
	width:500px;
	bottom:0px;
	right:25%;
	position:absolute;
	padding:20px;
	text-align:right;
}
.right_side_note_txt{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 16px;
	margin:0;
	color:white;
	left:10px;
	z-index:2;

}

.right_side_top_notes{
	z-index:2;
	width:500px;
	top:0px;
	right:25%;
	position:absolute;
	padding:10px;
	text-align:right;
}




.flying_text{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 16px;
	margin:0;
	color:white;
	z-index:2;
	position:absolute;
	display:none;
}



.loading_screen{
	width:100%;
	height:100%;
	position:absolute;
	z-index:22;
	background-color:#282828;
	text-align: center;
	display:block;
}
.loading_screen_center{
	width:50%;
	height:200px;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index:23;
	text-align: center;
}
.loading_screen_message{
	font-family: OCR A Std, monospace;
	font-size: 50px;
	margin:auto;
	color:white;
}

.loading_screen_description{
	font-family: OCR A Std, monospace;
	font-weight: 300;
	font-size: 24px;
	margin:auto;
	color:white;
}

.buinding_options{
	width:100%;
	height:100%;
	text-align:center;
	margin-top:10px;
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}



.build_menu_title{
	margin:auto;
	margin-bottom:20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F5F5F5;
	font-size: 30px;
	z-index:12;
	display:block;
	
}
.top_menu_but_cont{
	width:95%;
	margin:auto;
	margin-bottom:30px;
}
.top_menu_separator{
	margin:auto;
	width:18%;
	display:inline-block;
	text-align:center;
	cursor:pointer;
}
.top_menu_but{
	margin:auto;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F5F5F5;
	font-size: 30px;
	z-index:12;
	display:block;
}
.menu_icons{
	width:30px;
	height:30px;
	margin:auto;
}

.in_container_title{
	margin:auto;
	margin-bottom:20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	color:#F5F5F5;
	font-size: 20px;
	z-index:12;
	display:block;
}
#nft_cont_title{
	width:90%;
}

.buildings_cont{
	margin-bottom:20px;
}
#ground_buildings_cont{
	display:none;
}

.build_but_cont{
	margin:auto;
	margin-bottom:10px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	padding:5px;
	padding-top:2px;
	padding-bottom:2px;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	z-index:12;
	width: fit-content; 
	
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}



.build_but_title{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F5F5F5;
	font-size: 18px;
	z-index:11;
	display:block;
	margin:0px;
}
.build_but_price{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F5F5F5;
	font-size: 14px;
	z-index:11;
	display:block;
	margin:0px;
}

#confirm_build{
	display:none;
}
#confirm_nft{
	display:none;
}
#remove_nft_cont{
	display:none;
}

.confirm_buts{
	margin:auto;
	margin-bottom:10px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 18px;
	z-index:12;
	display:block;

}

.average_button{
	margin:auto;
	margin-bottom:10px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 18px;
	z-index:12;
	display:block;
}

.nft_collection_but{
	margin:5px;
	margin-left:2px;
	margin-right:2px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 18px;
	z-index:12;
	display:inline-block;

}

.nft_image{
	width:100px;
	display:inline-block;
	margin:5px;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
}

#opensea_cont{
	display:none;
}
.nft_collection_cont{
	margin:auto;
	width:95%;
	display:none;
	margin-bottom:20px;
}
#nft_token_cont{
	margin:auto;
	width:95%;
	display:none;
}

#nft_search_input{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	margin:auto;
	color:#282828;
	background-color:#F5F5F5;
	width:90%;
	font-size: 20px;
	outline: none;
	box-shadow : none;  
	-webkit-appearance: none; 
	border:none;
	z-index:12;
	display:block;
}

input {
  border: none; /* Removes the default border */
}

input:focus {
  outline: none /* Removes the border when the input is clicked */
}

select {
  border: none; /* Removes the default border */
}

select:focus {
  outline: none /* Removes the border when the input is clicked */
}


#plot_id_input{
	padding:0px;
	margin-top:10px;
	width:100px;
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#282828;
	font-size: 20px;
}

.plot_input_but{
	margin:auto;
	margin-top:5px;
	cursor:pointer;
	text-decoration: none;
	background-color:#323232;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 24px;
	z-index:12;
	display:block;
	width:100px;
}

#plots_in_ownership_title{
	margin-bottom:5px;
}
#plot_start_title{
	display:none;
}

#build_info_callback_tab{
	display:none;
}

#build_info_callback_tab_text{
	margin:auto;
	width:90%;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F5F5F5;
	font-size: 20px;
	z-index:11;
	display:block;
	
}

.input_inline_cont{
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	width:90%;
}

.input_inline_tag{
	padding:0px;
	margin:auto;

	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F5F5F5;
	font-size: 18px;
	display:inline;
}

.market_inputs{
	padding:0px;
	margin:auto;

	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#282828;
	font-size: 20px;
	display:inline;
}

.market_info_tag{
	width:90%;
	margin:auto;
	margin-bottom:20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	color:#F5F5F5;
	font-size: 20px;
	z-index:12;
	display:none;
}

.sub_cont_title{
	margin:0px;
	margin-bottom:10px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F5F5F5;
	font-size: 22px;
	z-index:11;
	display:block;
}
.sub_cont{
	margin:0px;
	margin-bottom:20px;
}
.sub_cont_divider{
	margin:auto;
	margin-bottom:20px;
	padding:0px;
	width:50%;
	height:1px;
	background-color:#595959;
}
.sub_cont_footer{
	margin:0px;
	height:100px;
}

.market_submenu_cont{
	display:none;
}

.end_screen{
	width:100%;
	height:100%;
	position:absolute;
	z-index:55;
	background-color:#282828;
	padding:20px;
	display:none;
}
.end_screen_txt{
	margin:auto;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 30px;
	z-index:66;
	display:block;
}


.confirm_cont_text{
	width:90%;
	margin:auto;
	margin-bottom:20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	color:#F5F5F5;
	font-size: 20px;
	z-index:12;
	display:none;
}


.highlighter{
	position:absolute;
	/*
	width:40px;
	height:40px;
	border: 2px solid #ffffff;
	border-radius: 21px;
	*/
	border: 1px solid #ffffff;
	display:none;
	z-index:1;
}

#bob_swap_but{
	margin-top:20px;
}

.unit_name_input{
	padding:0px;
	margin:auto;
	margin-bottom:10px;
	width:70%;
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F2F2F2;
	background-color:#8C8C8C; 
	font-size: 20px;
	display:block;
}

.unit_color_tag_selector{
	padding:0px;
	margin:auto;
	margin-bottom:10px;
	width:70%;
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F2F2F2;
	background-color:#8C8C8C; 
	font-size: 20px;
	display:block;
}

#nft_box_options{
	margin-top:20px;
}
#bp_box_options{
	margin-top:20px;
}

.checkboxes{
	width: 20px;
	height: 20px;
	accent-color: #595959;
}

.checkboxes_inner_cont{
	text-align:right;
	width:90%;
	margin-bottom:20px;
}

.checkboxes_label{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 20px;
	margin:0;
	color:#f2f2f2;

	font-weight: 300;
	z-index:12;
	margin:auto;
}
.nft_box_settings_note{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	margin:0;
	color:#f2f2f2;
	font-weight: 300;
	z-index:12;
	margin:auto;
	margin-top:5px;
}

.slider_selector_cont{
	
}

#nft_box_color_adjuster_cont{
	margin-top:10px;
	display:none;
}
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 60%; /* Full-width */
  height: 20px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  margin-left:5px;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
/*
.sliders{
	-webkit-appearance: none;
	width: 60%;
	height: 10px;
	border-radius: 5px;  
	background: #f2f2f2;
	outline: none;
	opacity: .7; 
	-webkit-transition: .2s;
	transition: opacity .2s;
}
.sliders::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
}
*/
/* ............................. HINT CONTainer*/

.hint_container{
	position:absolute;
	display:block;
	width:400px;
	max-height:300px;
	right:0px;
	/*background-color:#f2f2f2;*/
	background-color:#282828;
	/*background-color:#EDD400;*/
	z-index:2;
	opacity:.8;
	border-radius: 5px;
	display:none;
	padding:5px;
	padding-left:10px;
}
.hint_text{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 18px;
	margin:0;
	/*color:#020000;*/
	color:#f2f2f2;
	right:10px;
	z-index:2;
	display:block;
}


/*......................... TEXT*/

.text_add_options_small_cont{
	margin:auto;
	margin-bottom:10px;
	width:90%;
}
.selector_input{
	padding:0px;
	margin:0;
	margin-left:5px;
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F2F2F2;
	background-color:#595959; 
	font-size: 18px;
	display:inline-block;
	
}

.color_picker{
	-webkit-appearance: none;
	border: none;
	width:100px;
	height:20px;
	padding:0px;
}
.color_picker::-webkit-color-swatch-wrapper {
	padding: 0;
}
.color_picker::-webkit-color-swatch {
	border: none;
}
#add_txt_rough_slider{
	display:inline-block;
	width:50%;
}
.text_add_final_buts_cont{
	margin-top:20px;
}

#add_txt_error_txt{
	font-size: 18px;
	color:#EC6B56;
	display:none;
}
.text_18{
	font-size: 18px;
	color:#F2F2F2;
}
.text_16{
	font-size: 16px;
	color:#F2F2F2;
}
.text_add_footer{
	height:80px;
	width:100%;
}

/*......................... PAINT*/

.single_paint_color_cont{
	margin:auto;
	margin-bottom:10px;
	text-align:left;
	width:90%;
	display:block;
	
	
	border: 1px solid #595959;
	border-radius: 10px;
	
	cursor:pointer;
}

.single_paint_color_box{
	width:60px;
	height:60px;
	margin-right:5px;
	background-color:#00ff00;
	display:inline-block;
	vertical-align:top;
	
	border-radius: 10px;
}

.single_bleach_color_cont{
	margin:auto;
	margin-bottom:10px;
	text-align:left;
	width:80%;
	display:block;
	
	padding:5px;
	border: 1px solid #595959;
	border-radius: 10px;
	
	cursor:pointer;
}

.single_paint_color_descr{
	display:inline-block;
	vertical-align:top;
	
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* This is where the magic happens. */
}

#paints_error_txt{
	font-size: 18px;
	color:#EC6B56;
}