
@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{
	background-color:#282828;
	/*
	background: repeating-linear-gradient(
	  -45deg,
	  #595959,
	  #595959 1px,
	  #282828 1px,
	  #282828 15px
	);
	*/
}

body{
	margin: 0px;
	padding:0px;
	cursor: auto;
	width:100%;
	
	/*
	-webkit-user-select: none;     
	-moz-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
	*/
}
p{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
}
input{
	outline: none;
	box-shadow : none;  
	-webkit-appearance: none; 
	border:none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
select {
  border: none; /* Removes the default border */
}
select:focus {
  outline: none /* Removes the border when the input is clicked */
}

.footer{
	width:100%;
	height:100px;
}

.header{
	width:100%;
	text-align:left;
	margin-top:10px;
	margin-bottom:20px;
}

.pool_logo{
	height:25px;
	width:25px;
	margin-left:10px;
}

.main_title{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: 30px;
	margin:0;
	margin-left:5px;
	color:#F2F2F2;
	z-index:2;
	display:inline-block;
}
.main_title_small{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 18px;
	margin:0;
	margin-left:10px;
	color:#8C8C8C;
	z-index:2;
	display:inline-block;
}
.moto_link{
	color:#add8e6;
	text-decoration:none;
}
.simple_link{
	text-decoration:none;
}
/*................................................POOL LINKS*/
.pool_links_field{
	width:90%;
	text-align:center;
	margin:auto;
	margin-bottom:20px;
}
.pool_link_cont{
	display:inline-block;
	margin:auto;
	text-align:center;
	width:30%;
	min-width:100px;
}
.pool_link_but{
	margin:auto;
	font-size: 22px;
	color:#8C8C8C;
	font-weight: 700;
	width:fit-content;
	cursor:pointer;
}
/*................................................DATA FIELD*/

.data_field{
	width:90%;
	text-align:right;
	margin:auto;
	display:none;
}
.inline_data_cont{
	display:inline-block;
	margin-right:5px;
	margin-left:5px;
	width:fit-content;
	min-width:100px;
}
.simple_inline{
	display:inline-block;
}

/*.................................................CENTR*/

.swap_cont{
	width:400px;
	margin:auto;
	margin-bottom:30px;
	padding:10px;
	padding-bottom:5px;
	border-radius:5px;
	border: 1px solid #8C8C8C;
	text-align:center;
	display:none;
}
#history_cont{
	width:fit-content;

	margin:auto;
	margin-top:0px;
	padding:10px;
	padding-left:20px;
	border-radius:5px;
	border: 1px solid #8C8C8C;
	text-align:left;
	display:none;
}
.history_event_action{
	display:inline-block;
	width:80px;
}
.history_event_short{
	display:inline-block;
	width:80px;
}
.history_event_wallet{
	display:inline-block;
	width:200px;
	text-align:right;
}
.history_event_time{
	display:inline-block;
	width:80px;
	text-align:right;
}

.history_text{
	font-size: 16px;
	margin:0;
	color:#F2F2F2;
}
.history_text_yellow{
	font-size: 16px;
	margin:0;
	color:#FDDA0D;
}
.history_break{
	width:100%;
	height:1px;
	background-color:#323232;
}


.swap_title_cont{
	text-align:center;
	width:100%;
	margin:0px;
	margin-bottom:20px;
}
.swap_menu_cont{
	text-align:center;
	width:100%;
	margin:0px;
	margin-bottom:20px;
}
.swap_menu_b_cont{
	display:inline-block;
	margin:auto;
	text-align:center;
	width:30%;
}
.swap_menu_but{
	margin:auto;
	font-size: 20px;
	color:#8C8C8C;
	font-weight: 700;
	width:fit-content;
	cursor:pointer;
}
.cont_title{
	margin:0px;
	font-size: 20px;
	color:#8C8C8C;
	font-weight: 700;
}
.button_cont{
	margin-bottom:10px;
}
.inline_button{
	cursor:pointer;
	text-decoration: none;
	background-color:#007f74;
	padding:0px;
	padding-right:5px;
	padding-left:5px;
	border: none;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 18px;
	width:fit-content;
	margin:0px;
	display:inline-block;
	vertical-align:top;
}
.price_imapct_cont{
	vertical-align:top;
	display:inline-block;
	margin:0px;
	margin-left:5px;
}
.block_button{
	cursor:pointer;
	text-decoration: none;
	background-color:#007f74;
	padding:0px;
	padding-right:5px;
	padding-left:5px;
	border: none;
	border: 1px solid #8C8C8C;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#F2F2F2;
	font-size: 18px;
	width:fit-content;
	margin:0px;
	margin-bottom:20px;
}
.swap_button_cont{
	margin:0px;
	margin-bottom:20px;
}
.button_inputs_label{
	font-size: 18px;
	margin:0;
	margin-left:5px;
	color:#8C8C8C;
	display:inline-block;
	vertical-align:top;
}
.button_inputs_inline{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	margin:0px;
	margin-left:5px;
	color:#282828;
	background-color:#8C8C8C;
	width:100px;
	font-size: 16px;
	outline: none;
	box-shadow : none;  
	-webkit-appearance: none; 
	border:none;
	display:inline-block;
	vertical-align:top;
}
/*..........................................SWAP.*/
.main_menu_cont{
	display:none;
}
.swap_inputs_cont{
	margin-bottom:20px;
}
.from_cont{
	width:fit-content;
	margin:auto;
	text-align:left;
	margin-bottom:10px;
}
.lft_title_cont{
	margin:auto;
	width:48%;
	display:inline-block;
	text-align:left;
}
.right_title_cont{
	margin:auto;
	width:48%;
	display:inline-block;
	text-align:right;
}
.all_inputs{
	padding:0px;
	margin:auto;
	margin-right:5px;
	width:125px;
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#282828;
	font-size: 18px;
	display:inline-block;
	background-color:#8C8C8C;
}
.chain_selector{
	padding:0px;
	margin:auto;
	width:75px;
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color:#F2F2F2;
	background-color:#595959; 
	font-size: 18px;
	display:inline-block;
}
.output_chain{
	padding:0px;
	margin:auto;
	width:75px;
	border-radius: 2px;
	color:#F2F2F2;
	background-color:#595959; 
	font-size: 18px;
	display:inline-block;
	vertical-align:top;
}
.output_swap{
	padding:0px;
	margin:0px;
	margin-right:5px;
	width:125px;
	height:22px;
	border-radius: 2px;
	color:#F2F2F2;
	background-color:#595959; 
	font-size: 18px;
	display:inline-block;
	vertical-align:top;
}
.swap_error_cont{
	margin-top:10px;
	text-align:left;
	width:100%;
}
#swap_buffer{
	width:25px;
	display:inline-block;
	vertical-align:middle;
}
#swap_status_txt{
	display:inline-block;
	vertical-align:middle;
}
#strt_pool_cont{
	display:none;
}
#connect_cont{
	display:none;
}
#connect_but{
	margin-top:20px;
	margin-bottom:20px;
}
#personal_stake_data_cont{
	margin-bottom:0px;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 150px; /* 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 */
}
#remove_persentage_txt{
	vertical-align:top;
	width:50px;
}




/*.................................................CHART*/
.chart_field{
	width:90%;
	height:200px;
	margin:auto;
	margin-bottom:30px;
	border-radius:5px;
	border: 1px solid #8C8C8C;
	overflow:hidden;
	display:none;
}
.candle_cont{
	margin:0px;
	display:inline-block;
	width:5px;
	height:100%;
}
.candle{
	
	margin:0px;
	height:10px;
	background-color:green;
	margin-right:1px;

}

/*.....................................................*/
.text_ib{
	font-size: 16px;
	margin:0;
	color:#F2F2F2;
	display:inline-block;
}
.text_ib_yellow{
	font-size: 18px;
	margin:0;
	margin-left:5px;
	color:#FDDA0D;
	display:inline-block;
}
.text_ib_yellow_low_marg{
	font-size: 18px;
	margin:0;
	margin-left:2px;
	color:#FDDA0D;
	display:inline-block;
}
.text_b{
	font-size: 18px;
	margin:0;
	color:#F2F2F2;
}
.text_b_18{
	font-size: 18px;
	margin:0;
	color:#F2F2F2;
}
.text_b_18_yellow{
	font-size: 18px;
	margin:0;
	color:#FDDA0D;
}


/*.....................................................*/
.line_break_full{
	width:100%;
	height:1px;
	background-color:#8C8C8C;
	margin-bottom:10px;
}
.line_break_80{
	width:80%;
	height:1px;
	background-color:#8C8C8C;
	margin:auto;
	margin-bottom:10px;
}