/* -------------------------------------------------
                        login
-------------------------------------------------- */

/* .login-flex {
	margin-top: 30px;
	margin-bottom: 30px;
} */

.control-label{
	font-size: 14pt !important;
	color: #000 !important;
}
.control-group .notification {
    color: #ff0000 !important;
    font-size: 14px !important;
    margin-top: 4px;
    display: none;
    font-weight: bold;
}

.login-head p {
	margin: 30px 0px;
	width: 100%;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
}

.login-grid {
	display: grid;
	grid-template-columns: 1fr 50px 1fr;
	grid-gap: 10px;
	align-items: center;
	box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.login-form,
.google-login {
	padding: 20px 20px;
	display: block;
}

.login-or-bg {
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: #00000079;
	width: 3px;
	margin-left: 50%;
}

.login-or {
	z-index: 0;
	position: absolute;
	display: flex;
	height: 50px;
	width: 50px;
	background-color: #d26d1b;
	border-radius: 100%;
	justify-content: center;
	align-items: center;
}

.login-or p {
	font-size: 17px;
	color: #ffffff;
}

.login-form label {
	font-size: 17px;
}

.input-login {
	width: 100%;
}

.login-form input {
	box-sizing: border-box;
	display: block;
	font-size: 17px;
	width: 100%;
	padding: 10px 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	border-radius: 30px;
	border: 2px solid #0000002a;
}

.login-form input:focus {
	border: 2px solid #613613;
}

.login-form button {
	font-size: 17px;
	width: 100%;
	padding: 10px 0px;
	margin-bottom: 10px;
	margin-top: 10px;
	border-radius: 10px;
	outline: none;
	border: none;
	color: #ffffff;
	background-color: #9d571e;
	margin-top: 30px;
}

.login-form .regisbtn {
	display: flex;
	margin-top: 20px;
	text-align: center;
	width: 100%;
	font-size: 17px;
	justify-content: center;
	align-content: center;
}

.login-form .regisbtn a {
	text-decoration: none;
	color: #000000;
}

.login-form .regisbtn a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #aa3a3a;
}

.login-form .regisbtn a:active {
	text-decoration: none;
	color: #ff0000;
}

.google-login .fb-btn {
	text-decoration: none;
	display: flex;
	font-size: 17px;
	width: 100%;
	padding: 15px 0px;
	margin: 30px 0px;
	border-radius: 10px;
	outline: none;
	border: none;
	color: #ffffff;
	background-color: #3b5998;
	justify-content: center;
	align-content: center;
}

.google-login .gg-btn {
	text-decoration: none;
	display: flex;
	font-size: 17px;
	width: 100%;
	padding: 15px 0px;
	margin: 30px 0px;
	border-radius: 10px;
	outline: none;
	border: none;
	color: #ffffff;
	background-color: #d34836;
	justify-content: center;
	align-content: center;
}

.google-login i {
	margin-right: 10px;
}


/* -------------------------------------------------
                        login
-------------------------------------------------- */


/* -------------------------------------------------
                        register
-------------------------------------------------- */

.register-flex {
	margin: 20px 0px;
}

.register-form {
	padding: 20px;
	box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.regis-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}

.form-re label {
	box-sizing: border-box;
	font-size: 17px;
}

.register-form input,
.register-form select {
	box-sizing: border-box;
	display: block;
	font-size: 17px;
	width: 100%;
	padding: 10px 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	border-radius: 30px;
	border: 2px solid #0000002a;
}

.register-form input:focus {
	border: 2px solid #613613;
}

.username {
	display: grid;
	grid-template-columns: 105px 1fr 1fr;
	grid-gap: 10px;
}

.regis-btn {
	display: flex;
	width: 100%;
	justify-content: center;
}

.register-form button {
	margin: 20px 0px;
	color: #ffffff;
	box-sizing: border-box;
	padding: 10px 30px;
	font-size: 17px;
	border-radius: 10px;
	border: 2px solid #0000002a;
	background-color: #9d571e;
}

.register-form .regisbtn {
	display: flex;
	margin-top: 20px;
	text-align: center;
	width: 100%;
	font-size: 17px;
	justify-content: center;
	align-content: center;
}

.register-form .regisbtn a {
	text-decoration: none;
	color: #000000;
}

.register-form .regisbtn a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #aa3a3a;
}

.register-form .regisbtn a:active {
	text-decoration: none;
	color: #ff0000;
}


/* -------------------------------------------------
                        register
-------------------------------------------------- */

@media screen and (max-width: 768px) {
	.login-grid,
	.register-form {
		margin: 0px 5px;
	}
}

@media screen and (max-width: 572px) {
	.login-grid {
		grid-template-columns: 1fr;
	}
	.login-flex {
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.login-or-bg {
		z-index: 1;
		height: 3px;
		background-color: #00000079;
		width: 100%;
		margin: 0px;
		margin-top: 30px;
	}
	.regis-grid {
		grid-template-columns: 1fr;
	}
	.username {
		grid-template-columns: 1fr;
	}
}