.login-signup { 
	margin: 20px auto 16px auto; 
	max-width: 80%; 
	padding: 12px; 
	text-align: center;
}

.login-signup h2 {
	border: 0;
	font-size: 2em;
	margin: 0 0 6px 0;
	padding: 0;
	
}

.login-signup h3 {
	color: var(--main-color1);
	border: 0;
	font-size: medium;
}

/* Grid & Columns */
.login-signup-grid {
	display: flex;
}
.login-signup-column {
	width: 100%; 
	display: flex; 
	flex-direction: column; 
	justify-content: space-between;
	align-items: center;
}

.login-signup p {
	line-height: 2em; 
}

.login-signup .showpass-btn {
	display: none;
}

/* Quick Login Form */
.login-signup-column form {
	margin: auto auto 0 auto; 
	width: 100%; 
}
.login-signup-fieldset {
	margin: 0 auto;
	max-width: 250px;
}
.login-signup-fieldset label {
	font-size: 1.2em;
	padding: 0
}
.login-signup-fieldset .inputbox { 
	border-color: #DFE4E6;
	border-radius: 4px;
	margin: 0 0 8px 0;
	padding: 8px 0;
	text-indent: 6px;
	width: 100%;
}
.login-signup-autologin {
	display: block;
	margin: auto auto 8px auto;
	width: fit-content;
}
.login-signup-autologin input[type="checkbox"] {
	margin: 0 0 0 4px;
	vertical-align: bottom;
}

/* Login/Register Buttons */
.login-signup-button {
	width: 100%;
	max-width: 200px;
	border-radius: 4px;
	padding: 8px 0;
}

.login-signup-button .icon::before { 
	padding: 0 4px 0 0;
}

/* Responsive Media Queries 800px */
@media (max-width: 800px) {
	.login-signup { 
		max-width: 94%; 
	}
}

/* Responsive Media Queries 700px */
@media (max-width: 700px) {
	/* Main Panel */
	.login-signup {
		max-width: 100%;
	}

	/* Grid & Columns */
	.login-signup-grid { 
		display: block 
	}
	.login-signup-column {
		display: block;
		margin-bottom: 14px;
		padding-bottom: 14px;
	}

	.signup-column {
		border-top: 1px solid slategray;
		border-bottom: 1px solid slategray;
	}
	.login-column {
		border-bottom: 1px solid slategray;
	}
}