@font-face {
	font-family: IRANSans;
	src: url('../fonts/Yekan.eot');
	src: url('../fonts/Yekan.eot?#iefix') format("embedded-opentype"),
	 url('../fonts/Yekan.woff') format("woff"),
	 url('../fonts/Yekan.ttf') format("truetype"),
	 url('../fonts/Yekan.svg#BYekan') format("svg");
	font-weight: normal;
	font-style: normal
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: IRANSans;
}

.boxend {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 50%; 
	text-align: left;
	background-color: rgba(255, 255, 255, 0.0);
	padding: 10px;
}


img {
	max-width: 100%;
	height: auto;
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #b6d3ff;
	
}

.container {
	max-width: 1280px;
}

.login__form {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
	min-height: 80vh;
}
#clickableSvg:hover {
	fill:blueviolet;
}
.inline-elements {
	display: flex;
	align-items: center; 
	direction:rtl;
}
.inline-elements input,
.inline-elements img,
.inline-elements svg {
	margin-right: 10px; 
}
.login__form__img {
	position: relative;
}

	.login__form__img h1 {
		position: absolute;
		z-index: 1;
		color: white;
		text-align: center;
		width: 90%;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0 10px;
		box-sizing: border-box;
		word-wrap: break-word;
		white-space: pre-wrap;
		overflow-wrap: break-word;
		hyphens: auto;
		margin-bottom: 2rem;
	}
	.login__form__img div {
		direction: rtl;
		position: absolute;
		z-index: 1;
		color: blue;
		background-color: rgba(250, 250, 210, 0.7);
		text-align: justify;
		width: 90%;
		max-width: 90%;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0 10px;
		box-sizing: border-box;
		/*word-wrap: break-word;
		white-space: pre-wrap;
		overflow-wrap: break-word;
		hyphens: auto;*/
		margin-bottom: 1rem;
		border-radius: 10px;
		box-shadow: 0 14px 18px rgba(0, 0, 0, 0.4);
	}
	.login__form__img img {
		width: 100%;
		height: 30vh;
		object-fit: cover;
		position: relative;
		z-index: 0;
	}
.login__form__right {
	padding: 1rem;
}

	

.form input,
.inline-elements input,
.form button {
	width: 100%;
	margin-bottom: 1rem;
	border: 2px solid #cdd9ea;
	padding: 0.6rem;
	border-radius: 5px;
	outline: none;
	direction: rtl;
}

	.form input:focus,
	.inline-elements input:focus {
		border: 2px solid rgb(62, 125, 251);
		box-shadow: 0 0 0px 2px rgba(62, 125, 251, 0.2);
	}

.form label,
.inline-elements label
{
	color: #989b9f;
	font-size: 0.8rem;
}

.form button {
	background-color: rgb(62, 125, 251);
	border: none;
	color: #fff;
	font-size: 1rem;
	margin-top: 1rem;
	padding: 0.7rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

	.form button:hover {
		background-color: rgb(23, 81, 197);
	}

	@media screen and (min-width: 768px) {
		.login__form {
			display: flex;
			flex-direction: row;
			background-color: #fff;
			border-radius: 20px;
			overflow: hidden;
		}

		.login__form__right {
			padding: 5rem;
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.login__form__img {
			width: 50%;
		}

			.login__form__img img {
				height: 90vh;
				width: 100%;
				display: block;
			}
	}