html,body {font-family:Arial, Helvetica, sans-serif; height:100%; margin:0; background-color:#444; }
div#origin {width:100%; box-sizing:border-box; position:absolute; top:0; left:0; right:0;}
div#origin button {background-color:#2196F3; background-color:transparent; border-radius:40px; height:100%; color:#EEE; padding:14px 20px; margin:8px 4px; border:1px solid #EEE; cursor:pointer; font-size:16px; float:right;}


/* General Form */
div.modal {display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%; overflow:auto;}
div.modal form.modal-content {max-width:600px; position:relative;}
div.modal form.modal-content.animate {-webkit-animation:animatezoom 0.6s; animation:animatezoom 0.6s;} /* Add Zoom Animation */
@-webkit-keyframes animatezoom {  
	from {-webkit-transform:scale(0.9)} to {-webkit-transform:scale(1)}
}
@keyframes animatezoom { 
	from {transform:scale(0.9)} to {transform:scale(1)} 
}
div.modal form.modal-content div.container button {background-color:#4CAF50; color:white; padding:14px 20px; margin:8px 0; border:none; cursor:pointer; width:100%; opacity:0.85;}
div.modal form.modal-content div.container button:hover {opacity:1;}


/*** Sign-up Form ***/
div#signupPage.modal {background-color:#474e5d; background-color:rgba(0,0,0,0.4); padding-top:50px;}
div#signupPage.modal * {box-sizing:border-box;}
div#signupPage.modal span.close {position:absolute; right:35px; top:15px; font-size:40px; /*font-weight:bold;*/ color:#f1f1f1;} /* The Close Button (x) */
div#signupPage.modal span.close:hover, 
div#signupPage.modal span.close:focus {color:#f44336; cursor:pointer;}
div#signupPage.modal form.modal-content {background-color:#fefefe; margin:5% auto 15%; border:1px solid #888; width:80%;} /* Width could be more or less, depending on screen size */
div#signupPage.modal form.modal-content div.container {padding:8px 16px; } /* Add padding to container elements */
div#signupPage.modal form.modal-content div.container hr {border:1px solid #f1f1f1; margin:0 -16px 25px;} /* Style the horizontal ruler */
div#signupPage.modal form.modal-content div.container input[type=text], 
div#signupPage.modal form.modal-content div.container input[type=password] {font-size:15px; width:100%; padding:15px; margin:5px 0 22px 0; display:inline-block; border:none; background:#f1f1f1;} /* Full-width input fields */
div#signupPage.modal form.modal-content div.container input[type=text]:focus, 
div#signupPage.modal form.modal-content div.container input[type=password]:focus {background-color:#ddd; outline:none;} /* Add a background color when the inputs get focus */
div#signupPage.modal form.modal-content div.container input[type=checkbox] {height:24px; width:24px; position:relative; top:4px;}
div#signupPage.modal form.modal-content div.container div.clearfix::after {content:""; clear:both; display:table;} /* Clear floats */
div#signupPage.modal form.modal-content div.container div.clearfix button {font-size:15px;}
div#signupPage.modal form.modal-content div.container div.clearfix button:hover {}
div#signupPage.modal form.modal-content div.container div.clearfix button.cancelbtn {padding:14px 20px; background-color:#f44336;} /* Extra styles for the cancel button */
div#signupPage.modal form.modal-content div.container div.clearfix button.cancelbtn, 
div#signupPage.modal form.modal-content div.container div.clearfix button.signupbtn {float:left; width:50%;} /* Float cancel and signup buttons and add an equal width */


/**** Login Form ****/
div#loginPage.modal {background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); padding-top:60px;}
div#loginPage.modal form.modal-content {background-color:#fefefe; margin:5% auto 15%; border:1px solid #888; width:80%;} /* Width could be more or less, depending on screen size */
div#loginPage.modal form.modal-content span.close {position:absolute; right:24px; top:0px; /*padding:12px 16px;*/ color:#f1f1f1; font-size:36px; /*font-weight:bold;*/ cursor:pointer;} /* The Close Button (x) */
div#loginPage.modal form.modal-content span.close:hover, 
div#loginPage.modal form.modal-content span.close:focus {color:red; cursor:pointer; /*background-color:#CCC;*/}
div#loginPage.modal form.modal-content div.imgcontainer {text-align:center; margin:24px 0 12px; position:relative; /*display:none;*/} /* Center the image and position the close button */
div#loginPage.modal form.modal-content div.imgcontainer img.avatar {width:40%; border-radius:50%;}
div#loginPage.modal form.modal-content div.container {padding:16px;}
div#loginPage.modal form.modal-content div.container input[type=text], 
div#loginPage.modal form.modal-content div.container input[type=password] {font-size:15px; width:100%; padding:12px 20px; margin:8px 0; display:inline-block; border:1px solid #ccc; box-sizing:border-box;} /* Full-width input fields */
div#loginPage.modal form.modal-content div.container button {font-size:15px;}
div#loginPage.modal form.modal-content div.container button:hover {}
div#loginPage.modal form.modal-content div.container button.cancelbtn {width:auto; padding:10px 18px; background-color:#f44336;} /* Extra styles for the cancel button */
div#loginPage.modal form.modal-content div.container span.psw {float:right; padding-top:16px;}
div#loginPage.modal form.modal-content div.container span.psw a {color:inherit;}
div#loginPage.modal form.modal-content div.container span.psw a:hover {color:rgb(76,175,80);}

/* Change styles on extra small screens */
@media screen and (max-width:575px) {
	/* Change styles for cancel button and signup button on extra small screens */
	div#signupPage.modal form.modal-content div.container div.clearfix button.cancelbtn, 
	div#signupPage.modal form.modal-content div.container div.clearfix button.signupbtn {width:100%; margin:0}
	/* Change styles for span and cancel button on extra small screens */
	div#loginPage.modal form.modal-content div.container button.cancelbtn {width:100%;}
	div#loginPage.modal form.modal-content div.container span.psw {display:block; float:none;}
}