/* 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;
  /* UI Properties */

	background: transparent linear-gradient(180deg, #5c6f7d 0%, #F5F5F5 100%) 0% 0% no-repeat padding-box;
	box-shadow: 24px 24px 99px #4747475C;
	opacity: 1;

}

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

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

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

.login-section {
    width: 30%;
    padding: 40px 20px;
    float: right;
    align-items: center; /* Center the form elements */
    background: transparent linear-gradient(180deg, #132F43 0%, #4B51563D 57%, #5C5C5C00 100%) 0% 0% no-repeat padding-box;
		border-radius: 55px;
		opacity: 1;
		margin-top: 50px;
}
#login-form {
	  margin: 0 auto;
	  top: unset;
	  width: 95%;
	  max-width: 420px;
	  position: relative;
}
.task-login #logo {
	  display: inline-block;
	  position: relative;
	  top: unset;
	  max-height: 120px;
	  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: 50px;
}
.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: #a3cd39 !important;
}
.login-section button {
		width: 60%;
	  padding: 5px;
	  background: #A3CD39 0% 0% no-repeat padding-box !important;
	  border: none;
	  color: white;
	  font-size: 40px;
	  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 {
    background: #83B700!important;
    transition: 0.7s;
}
html.dark-mode .login-section .form-control:focus:not(.is-invalid){
	color: #a3cd39 !important;
}
.login-section .custom-file-label:focus:not(.is-invalid), 
.login-section .form-control:focus:not(.is-invalid) 
{
		color: #a3cd39 !important;
}

#login-footer {
		display: none!important;
	}
.mobile-arabic-section{
	display: none;
}
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }

    .image-section {
        width: 65%;
    }
    .login-section {
        width: 35%;
    }
}

@media (max-width: 767px) {
		.container1 {
		  width: 100%;
		  margin: 0 auto;
		}
    .image-section {
       display: none; /* Hide the image section on mobile */
    }
    .login-section {
		  width: 100%;
		  padding: 0px 20px;
		}

		.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;
		}
}