.modal {
	width : 480px;
	background-color : rgba( 0, 0, 0, 0.35 );
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate( -50%, -60% );
	color : #FFF;
	text-align : center;
	font-family : Verdana;
	font-weight : bold;
	user-select : none;
	border : 5px solid #1F1F1F;
}
.usernameInput {
	width : 404px;
	height : 50px;
	background-color : rgba( 255, 255, 255, 0.1 );
	color : #FFF;
	text-align : center;
	font-weight : bold;
	font-size : 25px;
	outline : none;
	border : none;
	opacity : 0.75;
	/*transition-duration : 0.1s;*/
}
.usernameInput:focus {
	opacity : 1.0;
}
.button {
	width : 100%;
	/*border : 2px solid #FFF;*/
	vertical-align : middle;
	color : #FFF;
	font-weight : bold;
	font-size : 17px;
	padding-top : 9px;
	padding-bottom : 12px;
	margin-left : 20px;
	margin-right : 20px;
	transform : translate( -20px, 0px );
	transition-duration : 0.1s;
	cursor : pointer;
	user-select : none;
}

.cancel {
	background-color : rgba( 221, 51, 51, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.cancel:hover {
	background-color : rgba( 221, 51, 51, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.cancel:active {
	transform : translate( -20px, 0px ) scale( 0.94, 0.94 );
}

.create {
	background-color : rgba( 50, 140, 220, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.create:hover {
	background-color : rgba( 50, 140, 220, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.create:active {
	transform : translate( -20px, 0px ) scale( 0.94, 0.94 );
}

.button2 {
	width : 100%;
	border : 2px solid #FFF;
	vertical-align : middle;
	color : #FFF;
	font-weight : bold;
	font-size : 23px;
	padding-top : 7px;
	padding-bottom : 10px;
	margin-left : 60px;
	margin-right : 20px;
	transform : translate( -60px, 0px );
	transition-duration : 0.1s;
	cursor : pointer;
	user-select : none;
}

.cancel2 {
	background-color : rgba( 221, 51, 51, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.cancel2:hover {
	background-color : rgba( 221, 51, 51, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.cancel2:active {
	transform : translate( -60px, 0px ) scale( 0.94, 0.94 );
}

.create2 {
	background-color : rgba( 50, 140, 220, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.create2:hover {
	background-color : rgba( 50, 140, 220, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.create2:active {
	transform : translate( -60px, 0px ) scale( 0.94, 0.94 );
}

.tos {
	text-decoration : none;
	color : #AAF;
	opacity : 0.8;
}
.tos:hover {
	opacity : 1;
}

.overlay {
	position : absolute;
	width : 100%;
	height : 100%;
	z-index : 999;
	background-color : #000;
	opacity : 0.8;
}