@font-face {
	font-family: "Vazir";
	src: url(../Font/Vazir.eot);
	src: url(../Font/Vazir.eot?#iefix) format("embedded-opentype"), url(../Font/Vazir.woff) format("woff"), url(../Font/Vazir.ttf) format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Vazir";
	src: url(../Font/Vazir-Bold.eot);
	src: url(../Font/Vazir-Bold.eot?#iefix) format("embedded-opentype"), url(../Font/Vazir-Bold.woff) format("woff"), url(../Font/Vazir-Bold.ttf) format("truetype");
	font-weight: bold;
	font-style: normal;
}

body,
form {
	background: url(bg.jpg) no-repeat fixed center center;
	background-size: cover;
	font-family: Vazir;
	font-size: 10pt;
	text-align: center;
}

/*#region Glass Effect */

.glass {
	display: block;
	overflow: hidden;
	border: 1px solid #ffffff85;
	position: relative;
	background: inherit;
}

	.glass:before {
		content: '';
		width: 110%;
		height: 110%;
		background: inherit;
		position: absolute;
		left: -5%;
		right: 0;
		top: -5%;
		bottom: 0;
		box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 20%);
		filter: blur(5px);
		transition: all ease-in-out .3s;
	}

	.glass .nth-glass {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

/*#endregion */

container {
	display: inline-block;
	margin: 9% auto 0;
	background: inherit;
}


/* Checkbox */
.chk {
	display: inline-block;
	position: relative;
	cursor: pointer;
	user-select: none;
	margin: 0 0 0 0;
}

	.chk input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	.chk label {
		margin: 0px 26px 0 8px;
		display: flow-root;
		font-size: 11pt;
		cursor: pointer;
		font-weight: 100;
	}

.checkmark {
	position: absolute;
	top: 0;
	right: 0;
	height: 18px;
	width: 18px;
	border: 1px solid #fff;
	border-radius: 5px;
	transition: all ease .3s;
}

.chk:hover input ~ .checkmark {
	background-color: rgba(255, 255, 255, 0.301);
}

.chk input:checked ~ .checkmark {
	background-image: var(--grdSuccess);
}

.chk .checkmark:after {
	content: "";
	position: absolute;
	left: 7px;
	top: 2px;
	width: 3px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(0deg) scale(0);
	display: block;
	transition: all ease .3s;
}

.chk input:checked ~ .checkmark:after {
	transform: rotate(45deg) scale(1);
}


/*#region Login */

login {
	width: 300px;
	height: 450px;
	margin-bottom: 20px;
	border-radius: 7px 100px 30px 15px;
	float: left;
}

	login img:nth-child(1) {
		width: 60%;
		margin: 20px auto 10px;
		display: block;
	}


	login img:nth-child(2) {
		width: 75%;
		margin: 0px auto 6px;
	}

input-box {
	display: block;
	width: 86%;
	margin: 0 auto;
}

login icon {
	background: no-repeat center center;
	background-size: contain;
	width: 24px;
	height: 24px;
	display: inline-block;
	float: right;
	margin-top: 11px;
}

#user-ico {
	background-image: url(user.png);
}

#lock-ico {
	background-image: url(lock.png);
}

input-box input {
	border: none;
	padding: 5px 10px 5px;
	margin: 8px 8px 8px 0;
	width: calc(100% - 56px);
	border-radius: 25px;
	font-family: Vazir;
	text-align: center;
	outline: none !important;
	color: #212121;
}

login [type='submit'] {
	width: 100px;
	margin: 8px 0 8px 7%;
	float: left;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-family: Vazir;
	border: 1px solid #fff;
	border-radius: 25px;
	padding: 3px 10px 6px;
	background: none;
	cursor: pointer;
	transition: all ease .3s;
	outline: none;
}

	login #btnEnter:hover {
		background-color: #fff;
		color: #212121;
	}

login #pnlRemember {
	display: inline-block;
	width: 155px;
	text-align: right;
	margin-top: 12px;
	margin-right: 20px;
}

	login #pnlRemember label {
		color: white;
		font-family: Vazir;
	}

login #cbRememberMe {
	vertical-align: middle;
}

/*#endregion */

requests {
	display: flow-root;
	background: inherit;
	float: left;
	margin-left: 30px;
}

	requests bottom {
		display: flow-root;
		background: inherit;
	}

	requests top {
		width: 420px;
		height: 400px;
		display: block;
		background: inherit;
	}

		requests top a {
			float: left;
			width: calc(50% - 10px);
			height: calc(50% - 10px);
		}

			requests top a:hover::before {
				filter: blur(1px);
			}

			requests top a:nth-child(1) {
				margin: 0 8px 8px 0;
				border-radius: 90px 0 0;
			}

			requests top a:nth-child(2) {
				margin: 0 0 8px 8px;
				border-radius: 0 7px 0 0;
			}

			requests top a:nth-child(3) {
				margin: 8px 8px 0 0;
			}

			requests top a:nth-child(4) {
				margin: 8px 0 0 8px;
				border-radius: 0 0 30px 0;
			}

	requests img {
		width: 52%;
		margin: 15% auto 16px;
		display: block;
	}

	requests top p {
		text-align: center;
		color: #fff;
		font-family: Vazir;
	}

	requests input {
		height: 26px;
		display: block;
		border: none;
		background: white;
		width: calc(70% - 20px);
		float: left;
		margin-top: 12px;
		font-family: Vazir;
		padding: 6px 10px;
		border-radius: 0 0 0 30px;
		outline: none;
		text-align: right;
	}

	requests bottom a {
		display: block;
		float: right;
		width: calc(30% - 10px);
		text-align: center;
		color: #fff;
		text-decoration: none;
		font-family: Vazir;
		background: none;
		height: 38px;
		margin-top: 12px;
		border: none !important;
		border-radius: 0 24px 24px 0;
		margin-left: 8px;
		transition: all ease .3s;
	}

	requests bottom #btnTracking {
		display: block;
		float: right;
		width: 100%;
		text-align: center;
		color: #fff;
		text-decoration: none;
		font-family: Vazir;
		background: none;
		height: 38px;
		margin-top: 0;
		border: 1px solid #fffc;
		border-radius: 0 25px 25px 0;
		cursor: pointer;
		transition: all ease .3s;
	}

		requests bottom #btnTracking:hover {
			background-color: #fff;
			color: #212121;
		}

/* Message */

.Overlay {
	position: fixed;
	z-index: 5550;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: #eeeeee;
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.Message {
	direction: rtl;
	border: solid 1px #bbbbbb;
	text-align: right;
	position: fixed;
	z-index: 5555;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	background-color: White;
	color: gray;
}

.MessageTitle {
	background: #efefef;
	border: solid 1px #bbbbbb;
	border-radius: 5px;
	text-align: right;
	padding: 5px 10px;
	margin: -1px;
}

	.MessageTitle img {
		cursor: pointer;
		padding-left: 5px;
		vertical-align: middle;
		width: 16px;
	}

.MessageText {
	padding: 10px;
}

	.MessageText img {
		vertical-align: middle;
		padding: 5px;
	}

.lnkRemember {
	color: white;
	display: flow-root;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 8px 8px;
}

@media screen and (max-width: 800px), (orientation: portrait) {
	login {
		margin: 56px auto 32px;
		float: unset;
	}

	requests {
		float: unset;
		margin: 0;
	}

		requests top {
			width: 306px;
			height: 306px;
		}

		requests img {
			width: 40%;
		}

		requests bottom a {
			width: calc(40% - 10px);
		}

		requests input {
			width: calc(60% - 20px);
		}
}