*:focus, *:active, *:hover {
	outline: none;
}



body{
	margin: 0px;
	padding: 10px;
	background-color: #ffffff;
	text-align: center;
	display: flex;

	flex-direction: column;

	justify-content: center;

	align-content: center;

	align-items: center;
}


#app-main-window{

	width: 100%;

	height:100%;
	max-width: 600px;;

	border-radius: 10px;
	
	background-color: #ffffff;
  	
	
	padding: 0px;

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: flex-start;
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

}


#converter-container{

	width: 100%;
	border:#d3d3d3 2px solid;
	border-radius: 10px;
	background-color: #f0f4f8;
	margin-top: 20px;
	margin-bottom: 20px;
	
	
	padding: 20px;
	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;

	justify-content: space-around;

	align-content: flex-start;

	align-items: flex-start;
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

.converter-box{

	width: 40%;
	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: flex-start;

	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	flex-wrap: nowrap;
}

.converter-head{
	font-size: 2em;
	text-align: left;
	width: 100%;
	color:#000000;
	margin-left: -2%;
	
	
}

.converter-from{
	color: #8f065d;
}


.converter-to{
	color: #05770b;
}


.converter-input-box{
	width: 100%;
	margin-top: 5px;
	border: rgba(0,0,0,0) 2px solid;
}

.converter-base-box{
	width: 95%;
	max-width: 100%;
	flex-grow: 0;
	margin-top: 10px;
	border: #bcbcbc 2px solid;
	border-radius: 3px;
	font-size: 1.0em;
	display: flex;
	flex-direction: column;

	justify-content: flex-start;

	align-content: flex-start;

	align-items: flex-start;
	text-align: left;
	padding: 0px 10px 8px 10px;
	background-color: #ffffff;
	margin-left: -2%;
	
}



.converter-input{
	width: 100%;
	height: 50px;
	min-height: 50px;
	line-height: 50px;
	border:0px;
	border-bottom: #bcbcbc 2px solid;
	font-size: 1.2em;
	padding-left: 5px;
	position: relative;
}

.converter-input:focus, converter-input:active{

	border-bottom: #1e90ff 2px solid;

}


.converter-base-head{
	font-size: 1em;
	text-align: left;
	width: 100%;
	font-style: italic;
	color:#999999;
	line-height: 30px;
	padding-left: 5px;
	
}


.converter-base-number{
	font-size: 1em;
	text-align: left;
	width: 100%;
	color:#666666;
	line-height: 30px;
	min-height: 30px;
	padding-left: 5px;
	cursor: pointer;
	margin-bottom: 2px;
	border-radius: 3px;
}

.converter-base-number-active{
	font-size: 1em;
	text-align: left;
	width: 100%;
	min-height: 30px;
	line-height: 30px;
	padding-left: 5px;
	margin-bottom: 2px;
	background-color: #dadaea;
	border-radius: 3px;
	color: #000000;
	
}


.converter-base-number:hover{
	background-color: #eaeafa;
	color: #000000;
}


#hint-box{
	position: sticky;
	height: 100px;
	width: 100%;
	max-width: 600px; 
	z-index: 100;
	background-color: #fae583;
	padding: 0px 20px 0px 20px;
	border-left:rgba(0,0,0,0) 2px solid;
	border-right:rgba(0,0,0,0) 2px solid;
	border-top:#fba908 2px solid;
}

#hint-head{
	font-size: 1em;
	width: 100%;
	color:#000000;
	line-height: 30px;
	
}

.hint-text{
	font-size: 1em;
	width: 100%;
	color:#000000;
	line-height: 30px;
	padding-right: 20px;
	
}

.converter-base-number-m{	font-size: 1em;line-height: 20px;min-height: 20px; padding-bottom: 4px; width: 95%}
	
.converter-base-number-m span{	font-size: .8em;line-height: 15px;min-height: 15px;  width: 95%}



@media only screen and (max-width:600px) {

	
#app-main-window{max-width: 350px;}


#converter-container{border:#d3d3d3 1px solid;padding: 5px 5px 10px 5px; margin-left: -2%;}

.converter-input{font-size:  1.0em;}


.converter-base-number{	font-size: 1em;line-height: 20px;min-height: 20px; padding-bottom: 4px; width: 95%}
	
.converter-base-number span{	font-size: .8em;line-height: 15px;min-height: 15px;  width: 95%}


.converter-base-number-active{	font-size: 1em;line-height: 20px;min-height: 20px; padding-bottom: 4px;  width: 95%}
	
.converter-base-number-active span{	font-size: .8em;line-height: 15px;min-height: 15px;  width: 95%}

.converter-box{	width: 42%;}

.converter-head{font-size: 1.5em; }

.converter-base-box{width: 95%;max-width: 95%;padding: 0px 5px 8px 5px; margin-left: -2%;}

.converter-base-head{font-size: 0.8em;width: 95%}

	
#hint-box{
	position: sticky;
	width: 90%;
	margin-left: -2%;

}

}