@font-face {
	font-family: 'Dark-Sans';
	src: url('../font/Dark-Sans.eot') format('embedded-opentype');
}

@font-face {
	font-family: 'Dark-Sans';
	src: url('../font/Dark-Sans.ttf') format('truetype');
}

@font-face {
	font-family: 'Dark-Sans';
	src: url('../font/Dark-Sans.woff') format('woff');
}


:root {
	--fontcolor: #686978;
	--main: #f6594e;
	--bg: #2C3E50;
	--colorlight: #fff;
	--bold: #c81e1e;
	--shape:30%
	/*--shape:50%*/
}



* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	vertical-align: baseline;
	list-style: none;
}

body {
	direction: rtl;
	font-family: Dark-Sans;
	font-size: 12px;
	line-height: 30px;
	color: var(--fontcolor);
}

.container-fluid {
	margin: 0;
	padding: 0;
}

.msform {
	text-align: center;
	position: relative;
	display: grid;
	grid-template-columns: 35% auto;
}

	.msform fieldset {
		background: white;
		border: 0 none;
		border-radius: 0.5rem;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding-bottom: 20px;
		position: relative;
	}

.more-dec {
	padding: 1rem 1rem;
	background: #f6f6f6;
	border-radius: 15px;
	margin: 1rem 0;
}

	.more-dec img.top-image {
		width: auto;
		max-height: 160px;
		margin-bottom: 1rem;
	}

	.more-dec .notic img {
		background: #8d8d8d;
		border-radius: var(--shape);
		padding: 2px;
		width: 15px;
		height: 15px;
	}

.grid-main {
	display: grid;
	grid-template-columns: 60% 40%;
	padding: 0 0% 0 2%;
}

.form-card {
	text-align: right;
	padding: 1rem 6%;
}

.msform fieldset:not(:first-of-type) {
	display: none
}

.msform input,
.msform select,
.msform textarea {
	border: 1px solid #ccc;
	border-radius: 8px;
	margin: 5px auto;
	width: 100%;
	color: var(--fontcolor);
	background-color: #fff;
	font-size: 0.8rem;
	padding: 6px 30px;
	color:var(--bg)
}

.form-group {
	position: relative;
	margin-bottom: 0.5rem;
}

.form-control-placeholder {
	position: relative;
	top: 10px;
	padding: 0;
	margin: 0 18px;
	background: #ffffff;
	Z-INDEX: 9;
	font-size: 0.8rem;
	line-height: 25px;
}




.input-box {
	position: relative;
}

	.input-box .title-input span {
		width: 26px;
	}
label.title-input img {
	margin: 0 5px;
	width: 20px;
	transition: all 300ms;
}


	.input-box input {
		padding: 5px 35px 5px 5px;
	}
.input-box:hover img {
	width: 25px;
}

.captcha-img {
	margin: 10px auto;
	text-align: center;
}

	.captcha-img img {
		border: 5px solid #f7f7f7;
		border-radius: 5px;
		text-align: center;
	}

.msform input:focus,
.msform textarea:focus {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border: 1px solid var(--bold);
	outline-width: 0
}

.msform .action-button {
	width: auto;
	min-width: 50%;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 6px;
	cursor: pointer;
	padding: 10px 18px;
	margin: 10px 6% 0 0 ;
	float: right;
	letter-spacing: 2px;
	background: linear-gradient( 145deg,#6eb1d3,#1288c3);
	box-shadow: 0 2px 10px rgb(142 209 243 / 35%);
}

	.msform .action-button:hover,
	.msform .action-button:focus {
		background: linear-gradient( 145deg,#1080b9,#5ca6cc);
		border: none;
	}

.msform .action-button-previous {
	width: 40%;
	font-weight: bold;
	color: var(--fontcolor);
	border: 0 none;
	border-radius: 6px;
	cursor: pointer;
	padding: 10px 5px;
	letter-spacing: 2px;
	margin: 10px 0px 0px 0px;
	background: linear-gradient( 145deg,#f5f5f5,#e8e9e9);
}


	.msform .action-button-previous:hover,
	.msform .action-button-previous:focus {
		border: none;
	}

.description .notic img {
	background: var(--main);
	border-radius: var(--shape);
	padding: 3px;
	width: 20px;
	height: 20px;
}

.description .bold {
	font-weight: bold;
	margin: 0 2px;
}

.fs-title {
	font-size: 1rem;
	color: var(--bold);
	margin-bottom: 15px;
	font-weight: 600;
}

.purple-text {
	color: var(--bold);
	font-weight: normal
}

h2.steps {
	font-size: 0.8rem;
	color: var(--bg);
	margin-bottom: 0px;
	font-weight: normal;
}

.fieldlabels {
	color: var(--fontcolor);
	text-align: left
}

#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	color: lightgrey;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	padding: 20px 20px;
	height: auto;
	min-height: 100vh;
}

	#progressbar .active {
		color: var(--colorlight);
	}

	#progressbar li {
		list-style-type: none;
		font-size: 15px;
		width: 100%;
		height: 150px;
		float: left;
		position: relative;
		font-weight: 400;
		display: grid;
		grid-template-columns: 100px auto;
	}

/*	#progressbar #account:before {
		font-family: FontAwesome;
		content: "\f13e"
	}

	#progressbar #personal:before {
		font-family: FontAwesome;
		content: "\f007"
	}

	#progressbar #payment:before {
		font-family: FontAwesome;
		content: "\f030"
	}

	#progressbar #confirm:before {
		font-family: FontAwesome;
		content: "\f00c"
	}*/

		#progressbar li .stepNUM {
			width: 100px;
			height: 100px;
			line-height: 45px;
			display: block;
			font-size: 20px;
			color: #ffffff;
			border-radius: var(--shape);
			margin: 0 auto 10px auto;
			padding: 0;
			border: 1px dashed #858585;
		}

			#progressbar li .stepNUM span {
				background: var(--main);
				width: 45px;
				height: 45px;
				border-radius: var(--shape);
				position: absolute;
				top: -5px;
				right: -10px;
				border: 3px solid var(--bg);
			}

			#progressbar li .stepNUM .stepNUM-in {
				background: var(--main);
				width: 88px;
				height: 88px;
				display: flex;
				border-radius: var(--shape);
				padding: 3px 20px;
				margin: 5px;
				text-align: center;
			}

	#progressbar li {
		opacity: 1;
		filter: grayscale(70%);
		transition:all 1s;
	}

		#progressbar li:hover .stepNUM span,
		#progressbar li.active .stepNUM span {
			width: 50px;
			height: 50px;
		}
			#progressbar li.active {
			opacity: 1;
			filter: grayscale(0%);
		}

		#progressbar li .dec-step {
			width: 100%;
			margin-top: 10px;
			padding: 5px 15px;
		}

			#progressbar li .dec-step p {
				text-align: justify;
				font-size: 0.7rem;
				line-height: 20px;
			}

			#progressbar li .dec-step strong {
				text-align: right;
				width: 100%;
				float: right;
			}

		#progressbar li:after {
			content: '';
			width: 2px;
			height: 50px;
			background: #7a7c7e;
			position: absolute;
			right: 50px;
			top: 100px;
			z-index: 2;
			transition:all 1s;
		}
		#progressbar li.active:after {
			background:var(--main);
		}
			#progressbar li:last-child:after {
			content: none;
		}


.resend-box {
	margin: 0px;
}

.resend.end-time img {
	padding: 5px;
	border: 1px solid #ededed;
	border-radius: var(--shape);
	transition: all 1s;
	width: 30px;
	height: 30px;
}

.resend span {
	color: var(--fontcolor);
	transition: all 1s;
}

	.resend span.timer {
		font-size: 1rem;
		font-weight: bold;
		margin: 0 3px;
		color: var(--main);
	}

.resend.end-time:hover img {
	transform: rotate(45deg);
}

.resend.end-time:hover span {
	transform: rotate(45deg);
	color: var(--fontcolor);
	font-weight: bold;
	text-decoration: none;
}

a.resend.end-time:hover {
	text-decoration: none;
}

.progress {
	height: 10px;
	border-radius: 0 !important;
}

.progress-bar {
	background-color: var(--bold)
}

.top-part {
	padding: 1rem 2rem;
}

	.top-part .logo-main {
		width: auto;
		height: 80px;
		transition:all 0.5s
	}

	.top-part .logo-main:hover {
		filter:grayscale(50%)
	}

	.top-part .title-main {
		font-size: 1rem;
		color: var(--bold);
		right: 10px;
		font-weight: 600;
		position: relative;
	}

.fit-image {
	width: 100%;
	object-fit: cover
}

.more-dec .heading-1 {
	color: #2c3e50;
	font-size: 0.8rem;
	text-align: center;
	font-weight: bold;
	opacity: 0.7;
	margin-top: 1rem;
}

.more-dec .heading-3 {
	color: #2c3e50;
	font-size: 1rem;
	text-align: center;
	font-weight: bold;
	margin-top: 1rem;
}

.more-dec p {
	font-size: 0.7rem;
	line-height: 25px;
	margin-bottom: 0.2rem;
	text-align: right;
	transition:all 01s;
}

.more-dec p:hover img {
	background:var(--main)
}


.alert > .start-icon {
	margin-right: 0;
	text-align: center;
	font-size: 16px;
}

.alert > .start-icon {
	margin: 5px;
}

.greencross {
	font-size: 18px;
	color: #2df249;
	text-shadow: none;
}

.alert-simple.alert-success {
	border: 1px solid rgba(36, 241, 6, 0.46);
	background-color: rgba(7, 149, 66, 0.12156862745098039);
	box-shadow: 0px 0px 2px #259c08;
	color: #14c211;
	transition: 0.5s;
	cursor: pointer;
}

.alert-success:hover {
	background-color: rgba(7, 149, 66, 0.35);
	transition: 0.5s;
}

.alert-simple.alert-info {
	border: 1px solid rgba(6, 44, 241, 0.46);
	background-color: rgba(7, 73, 149, 0.12156862745098039);
	box-shadow: 0px 0px 2px #0396ff;
	color: #0396ff;
	transition: 0.5s;
	cursor: pointer;
}

.alert-info:hover {
	background-color: rgba(7, 73, 149, 0.35);
	transition: 0.5s;
}



.alert-simple.alert-danger {
	border: 1px solid rgba(241, 6, 6, 0.81);
	background-color: rgba(220, 17, 1, 0.16);
	box-shadow: 0px 0px 2px #ff0303;
	color: #ff0303;
	transition: 0.5s;
	cursor: pointer;
}

.alert-danger:hover {
	background-color: rgba(220, 17, 1, 0.33);
	transition: 0.5s;
}

.danger {
	font-size: 18px;
	color: #ff0303;
	text-shadow: none;
}



.alert:before {
	content: '';
	position: absolute;
	width: 0;
	height: 50px;
	border-left: 2px solid;
	border-right: 1px solid;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
	right: -1px;
	top: 50%;
	transform: translate(0,-50%);
	height: 30px;
}

.fa-times {
	-webkit-animation: blink-1 2s infinite both;
	animation: blink-1 2s infinite both;
}
.mobile-show {

display:none;}
/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
	0%, 50%, 100% {
		opacity: 1;
	}

	25%, 75% {
		opacity: 0;
	}
}

@keyframes blink-1 {
	0%, 50%, 100% {
		opacity: 1;
	}

	25%, 75% {
		opacity: 0;
	}
}

@media (max-width: 992px) {
	.grid-main {
		display: flex;
		grid-template-columns: 100% 100%;
		padding: 0 0% 0 2%;
		flex-direction: column;
		max-width: 550px;
		margin: 0px auto;
	}
	.msform {
		grid-template-columns: 45% auto;
	}
}



@media (max-width: 768px) {
	body {
		font-size: 14px;
	}
	.mobile-show {
		display: block;
	}
		.mobile-show .dec-step {
			background: #f3f3f3;
			font-size: 0.8rem;
			text-align: right;
			padding: 8px 10px;
			margin: 0px 16px;
			border-radius: 8px;
		}
			.mobile-show .dec-step img {
				background: var(--main);
				border-radius: var(--shape);
				padding: 1px;
				margin: 0 5px;
				opacity: 0.9;
			}
	.top-part {
		padding: 0.5rem 1em;
		text-align: center;
	}
		.top-part .logo-main {
			height: 65px;
			margin-bottom: 0.5rem;
		}
		.msform {
		text-align: center;
		position: relative;
		display: flex;
		grid-template-columns: auto;
		flex-direction: column;
	}

	#progressbar li .stepNUM {
		width: 60px;
		height: 60px;
	}

		#progressbar li .stepNUM .stepNUM-in {
			width: 50px;
			height: 50px;
			display: flex;
			margin: 3px;
		}
	#progressbar li:hover .stepNUM span, #progressbar li.active .stepNUM span {
		width: 30px;
		height: 30px;
	}

	#progressbar {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		padding: 1rem 0;
		max-height: 90px;
		min-height: 90px;
		margin: 0;
	}
		#progressbar .dec-step{
			display: none;
		}
	#progressbar li {
		display: flex;
		flex-direction: column;
	}

		#progressbar li .stepNUM span {
			width: 30px;
			height: 30px;
			top: -5%;
			right: 26%;
			line-height: 30px;
		}
		#progressbar li:after {
			content: '';
			width: 60%;
			height: 2px;
			position: absolute;
			right: 70%;
			top: 19%;
			z-index: 2;
		}
}

@media (max-width: 576px) {
	#progressbar .dec-step,
	#progressbar li:after {
		display: none;
	}
}