/* Create two equal columns that floats next to each other */
.task-login #layout-content {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Arial, sans-serif;
	display: inline-block;
	justify-content: center;
	align-items: center;

	opacity: 1;
	/* The image used */
	background: transparent linear-gradient(124deg, #3D529F 0%, #706AB7 20%, #BF6FB7 40%, #E07C7F 62%, #EFD04F 80%, #EFD04F 100%) 0% 0% no-repeat padding-box;

}

.container1 {
	display: inline;
	flex-direction: column;
	align-items: center;
	width: 100%;
	/*max-width: 800px;*/
	margin: 0px auto;
}

.image-section {
	width: 60%;
	background-color: transparent;
	/* Transparent background */
	float: left;
	align-items: center;
	padding: 20px;
}

.image-section img {
	max-width: 80%;
	height: auto !important;
	margin: 10%;
}

.login-section {
	width: 40%;
	padding: 40px 20px;
	float: right;
	align-items: center;
	background: transparent linear-gradient(160deg, #C2D8F0 0%, #8C9AE3 28%, #324397 60%, #5F72CC 82%, #2D2D9A 100%) 0% 0% no-repeat padding-box;
	opacity: 1;
	height: 100%;
}

#login-form {
	margin: 0 auto;
	top: unset;
	width: 95%;
	max-width: 420px;
	position: relative;
}

#login-form .title {
	display: block !important;
	font-size: 18px;
	color: #000000;
	padding: 5px 15px;
}

.task-login #logo {
	display: inline-block;
	position: relative;
	top: unset;
	max-height: 160px;
	margin: 40px;
	left: 0 !important;
}

.login-section .input-group.input-group-lg {
	background: #ECECEC 0% 0% no-repeat padding-box;
	box-shadow: inset 0px 3px 6px #00000029, 6px 6px 12px #00000029;
	border-radius: 49px;
	opacity: 1;
}

.login-section .form-control {
	border: none !important;
	background: none !important;
	color: #ABABAB !important;
	font-size: 24px;
	text-align: left;
}

.login-section .input.input-group {
	margin-bottom: 35px;
}

.login-section .input-group-text.icon {
	border: none !important;
	background: none;
	color: black;
}

.login-section .form-control,
.form-control:focus {
	box-shadow: none !important;
	color: #3d5891 !important;
}

.login-section button {
	width: 60%;
	padding: 5px;
	/* UI Properties */

	background: transparent linear-gradient(259deg, #C270B1 0%, #6B82D6 100%) 0% 0% no-repeat padding-box!important;
	opacity: 1;
	border: none;
	color: #FFFFFF !important;
	font-size: 30px;
	cursor: pointer;
	border-radius: 50px;
	text-align: center;
	margin-top: 25px;
	font-weight: bold;
	max-width: 255px;
}

.login-section .input-group .icon.user::before {
	background: url(../images/Account.svg);
	background-size: 20px 20px;
	height: 20px;
	width: 20px;
	display: block;
	content: ' ';
}

.login-section .input-group .icon.pass::before {
	background: url(../images/Password.svg);
	background-size: 20px 20px;
	height: 20px;
	width: 20px;
	display: block;
	content: ' ';
}

.login-section .input-group-text.icon {
	padding: 10px 5px 10px 25px !important;
}

.login-section button:hover {
	opacity: .9;
	transition: 0.7s;
}

.login-section .custom-file-label:focus:not(.is-invalid),
.login-section .form-control:focus:not(.is-invalid) {
	color: #3d5891 !important;
}

#login-footer {
	display: none !important;
}

.mobile-arabic-section {
	display: none;
}

@media (min-width: 768px) {
	.container {
		flex-direction: row;
	}

	.image-section {
		width: 60%;
	}

	.login-section {
		width: 40%;
	}
}

@media (max-width: 767px) {
	.task-login #layout-content {
		background: transparent linear-gradient(180deg, #E5E5E5 0%, #F5F5F5 100%) 0% 0% no-repeat padding-box;
		box-shadow: 24px 24px 99px #4747475C;
		opacity: 1;

	}

	.container1 {
		width: 100%;
		margin: 0 auto;
	}

	.image-section {
		display: none;
		/* Hide the image section on mobile */
	}

	.login-section {
		width: 100%;
		padding: 0px 20px;
		background: transparent linear-gradient(160deg, #C2D8F0 0%, #8C9AE3 28%, #324397 60%, #5F72CC 82%, #2D2D9A 100%) 0% 0% no-repeat padding-box;
	
		opacity: 1;
	}

	.task-login #logo {
		max-height: 100px;
		margin: 20px auto 30px;
	}

	.container {
		margin: 0px;
	}

	.login-section .input.input-group {
		margin-bottom: 25px;
	}

	.login-section .form-control {

		font-size: 18px;
	}

	.login-section button {

		font-size: 24px;
	}

	.mobile-arabic-section {
		display: block;
		margin: 40px auto 20px;
	}

	.mobile-arabic-section img {
		max-width: 140px;
	}
}