/* CSS Document */
.createRoom
{
	margin : 12px;
	font-size: 32px;
	padding: 8px;
	width: 60%;
	background-color: #038CD8;
	border-radius: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	color: aliceblue;
}
.joinRoom
{
	font-size:32px;
	margin: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	width: 60%;
	background-color:#15EDA0;
	color:#06414B;
	border-radius: 12px;
	padding: 8px;
}

.joinRoom:hover
{
	transition:0.5s;
	background-color: #3FD95F;
}
.createRoom:hover
{
	transition:0.5s;
	background-color: #1D5EAC;
}

/* The popup form - hidden by default */
.createRoomForm-popup {
	transition:0.5s;
  	display: none;
  	position:absolute;
  	z-index: 100;
	top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
	padding-top: 50px;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	align-items: center;
	justify-content: center;
}

#bodyID
{
	opacity: 1;
}

/* Add styles to the form container */
.form-container {
  	width: 700px;
	border-radius: 25px;
	height:400px;
	border: 3px solid #f1f1f1;
  	padding: 10px;
  	background-color: white;
}

/* Full-width input fields */
.form-container label{
  	width: 90%;
	font-size: 48px;
  	padding: 15px;
  	margin: 5px 0 22px 0;
  	border: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 90%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.form-container input[type=text],input[type=password]
{
	margin:8px;
	width:90%;
	padding:8px;
}

.copy_img
{
	border: 5px #000000;
	float: right;
	width: 40px;
	height: 40px;
}

.copy_img:hover
{
	background-color: #AEAEAE;
}

input {
	  border: 0;
	  outline: 0;
	  background: transparent;
	  border-bottom: 1px solid #686868;
}

/*NEW*/
.loader {
	border: 16px solid #f3f3f3;
	z-index: 100;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	  -webkit-animation: spin 2s linear infinite; /* Safari */
	  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  	0% { -webkit-transform: rotate(0deg); }
  	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  	0% { transform: rotate(0deg); }
  	100% { transform: rotate(360deg); }
}

.loaderContainer {
  	display: none;
  	position:absolute;
  	z-index: 100;
	top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
	padding-top: 50px;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	align-items: center;
	justify-content: center;
}

.form-container2 {
  	width: 500px;
	border-radius: 25px;
	height:200px;
	border: 3px solid #f1f1f1;
  	padding: 10px;
	align-content: center;
  	background-color: white;
}

/* Full-width input fields */
.form-container2 label{
  	width: 90%;
	font-size: 48px;
  	padding: 15px;
  	margin: 5px 0 22px 0;
  	border: none;
}

/* Set a style for the submit/login button */
.form-container2 .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 90%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container2 .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container2 .btn:hover, .open-button:hover {
  opacity: 1;
}

.form-container2 input[type=text],input[type=password]
{
	margin:8px;
	width:90%;
	padding:8px;
}