/* CSS Document */
@media only screen and (max-device-width: 480px) 
{
	.createRoom
	{
		margin : 18px;
		font-size: 72px;
		padding: 12px;
		width: 90%;
		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:72px;
		margin: 18px;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
		width: 90%;
		background-color:#15EDA0;
		color:#06414B;
		border-radius: 12px;
		padding: 12px;
	}
	.footer
	{
		position:absolute;
		bottom:0;
		width:100%;
		height:40px;
		background-color: #C7C7C7;
	}
	.sideFooter
	{
		padding: 12px;
		font-size: 24px;
		float:left;
	}
	.sideFooter2
	{
		padding: 12px;
		font-size: 24px;
		float:right;
	}

	.joinRoom:hover
	{
		transition:0.5s;
		background-color: #3FD95F;
	}
	.createRoom:hover
	{
		transition:0.5s;
		background-color: #1D5EAC;
	}
	.logo
	{
		width: 90vw;
		height:72vw;
	}
	
	.copy
	{
		width: 15px;
		height: 15px;
	}
	/* The popup form - hidden by default */
	.createRoomForm-popup {
		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;
	}

	/* Add styles to the form container */
	.form-container {
		width: 80vw;
		font-size:70px;
		height:80vh;
		border: 3px solid #f1f1f1;
		padding: 10px;
		background-color: white;
	}

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

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

	#bodyID
	{
		opacity: 1;
	}

	/* 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%;
		font-size: 50px;
		border-radius: 12px;
		padding:8px;
	}
	.copy_img
	{
		border: thin #000000;
		float: right;
		width: 40px;
		height: 40px;
	}
	
	input {
	  border: 0;
	  outline: 0;
	  background: transparent;
	  border-bottom: 1px solid #686868;
	}
	
	.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;
	}
}