body{
	/*position: relative;*/
}
/*Login Panel*/
#fr{
	display: flex;
	-moz-display: flex;
	-ms-display: flex;
	-o-display: flex;
	-webkit-display: flex;

	justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-justify-content: center;

	align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	-webkit-align-items: center;

	position: relative;
	-moz-position: relative;
	-ms-position: relative;
	-o-position: relative;
	-webkit-position: relative;
}

#root{
	/*padding: 20px;*/
}


#username{
	width: 200px;
	text-align: center;
	border-radius: 15px;
	box-shadow: 2px 2px 5px rgb(20,20,20,0.40);
	-moz-box-shadow: 2px 2px 5px rgb(20,20,20,0.40);
	-ms-box-shadow: 2px 2px 5px rgb(20,20,20,0.40);
	-o-box-shadow: 2px 2px 5px rgb(20,20,20,0.40);
	-webkit-box-shadow: 2px 2px 5px rgb(20,20,20,0.40);

	border: none;
	
	padding: 20px;
	margin:10px;
	color: #000;
	background: #fff;
	outline: none;
	z-index: 10;
}
input{
	flex: 1 1 auto;
	-moz-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	-o-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;

	padding: 10px;
	z-index: 5;
}

#pattern{
	/*background: #dbdbdb;*/
	/*background-image: linear-gradient(to right top, #4b367c, #493370, #463165, #422e5a, #3e2c4f);*/
	float: right;
	right: 0;
	border-radius: 20px;
	margin:auto;
	width: 250px; height: 250px;
	padding: 20px;
	display: flex;
	-moz-display: flex;
	-ms-display: flex;
	-o-display: flex;
	-webkit-display: flex;

	flex-flow: wrap row;
	-moz-flex-flow: wrap row;
	-ms-flex-flow: wrap row;
	-o-flex-flow: wrap row;
	-webkit-flex-flow: wrap row;

	justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-justify-content: center;

	/*border: 1px solid #bbbbbb;*/
	box-shadow: 2px 2px 10px rgb(10,10,10, 0.50);
	-moz-box-shadow: 2px 2px 10px rgb(10,10,10, 0.50);
	-ms-box-shadow: 2px 2px 10px rgb(10,10,10, 0.50);
	-o-box-shadow: 2px 2px 10px rgb(10,10,10, 0.50);
	-webkit-box-shadow: 2px 2px 10px rgb(10,10,10, 0.50);

	touch-action: none;
}

.box-rounded{
	touch-action: none;
	-moz-touch-action: none;
	-ms-touch-action: none;
	-o-touch-action: none;
	-webkit-touch-action: none;

	flex-grow: 1;
	-moz-flex-grow: 1;
	-ms-flex-grow: 1;
	-o-flex-grow: 1;
	-webkit-flex-grow: 1;

	/*background: red;*/
	width: 55px; height: auto;
	padding: 10px;
	margin: 3px;
	display: flex;
	-moz-display: flex;
	-ms-display: flex;
	-o-display: flex;
	-webkit-display: flex;

	justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-justify-content: center;

	align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	-webkit-align-items: center;

	border-radius: 20px;
	transition: ease all 0.3s;
	-moz-transition: ease all 0.3s;
	-ms-transition: ease all 0.3s;
	-o-transition: ease all 0.3s;
	-webkit-transition: ease all 0.3s;
}

.box-rounded:hover{
	transition: ease all 0.3s;
	-moz-transition: ease all 0.3s;
	-ms-transition: ease all 0.3s;
	-o-transition: ease all 0.3s;
	-webkit-transition: ease all 0.3s;
}