@font-face {
	font-family: 'IranSans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/iransans_bold.eot');
	src: url('/assets/fonts/iransans_bold.eot?#iefix') format('embedded-opentype'),
		url('/assets/fonts/iransans_bold.woff') format('woff'),
		url('/assets/fonts/iransans_bold.woff2') format('woff2'),
		url('/assets/fonts/iransans_bold.ttf') format('truetype');
}

@font-face {
	font-family: 'IranSans';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('/assets/fonts/iransans_medium.eot');
	src: url('/assets/fonts/iransans_medium.eot?#iefix')
			format('embedded-opentype'),
		url('/assets/fonts/iransans_medium.woff') format('woff'),
		url('/assets/fonts/iransans_medium.woff2') format('woff2'),
		url('/assets/fonts/iransans_medium.ttf') format('truetype');
}

@font-face {
	font-family: 'IranSans';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url('/assets/fonts/iransans_light.eot');
	src: url('/assets/fonts/iransans_light.eot?#iefix')
			format('embedded-opentype'),
		url('/assets/fonts/iransans_light.woff') format('woff'),
		url('/assets/fonts/iransans_light.woff2') format('woff2'),
		url('/assets/fonts/iransans_light.ttf') format('truetype');
}

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'IranSans', 'Helvetica Neue', Helvetica, Roboto, Arial,
		sans-serif;
}

.btn-primary,
.btn-secondary {
	color: #fff !important;
}

.btn-outline-primary:hover {
	color: #fff !important;
}

.form-control,
textarea.form-control,
.form-select {
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.2);

	&:focus {
		background-color: #fff;
	}

	&.is-invalid {
		background-position-x: 10px;
		padding-right: 10px;
		padding-left: 35px;
		background-color: #fff;
	}
}

.form-select {
	padding: 0.5rem 0.75rem 0.5rem 2.25rem;
	background-position-x: 0.75rem;
	background-size: 17px 17px;
	font-size: 14px;

	option {
		font-size: 14px;
	}
}

.form-check {
	padding-left: 0;
	padding-right: 1.5em;

	.form-check-input {
		float: right;
		margin-left: 0;
		margin-right: -1.5em;
	}

	label {
		font-size: 14px;
	}
}

.form-label {
	font-size: 14px;
	color: #455464;
	padding-right: 5px;
	position: relative;
	font-weight: 700;

	&.required:after {
		content: '*';
		position: absolute;
		left: -9px;
		top: 5px;
		font-size: 14px;
		color: red;
		font-weight: 700;
	}
}

.form-item {
	margin-bottom: 20px;
}

.btn {
	border-radius: 8px;
}

.modal-dialog {
	direction: rtl;
}

.empty {
	text-align: center;
	margin-top: 80px;
	margin-bottom: 150px;

	.empty-icon {
		text-align: center;
		margin-bottom: 30px;

		.icon {
			width: 136px;
			height: 136px;
		}
	}

	.empty-text {
		font-size: 18px;
		color: #455464;
		font-weight: 500;
		margin-bottom: 25px;
		display: block;
	}

	.empty-actions {
		.btn {
			width: 187px;
			height: 48px;
			font-size: 18px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
		}
	}
}

.page-container {
	padding: 70px 100px 50px;
	direction: rtl;

	@media (max-width: 576px) {
		padding: 0px 5px;
	}

	.page-title {
		font-size: 25px;
		color: #455464;
		font-weight: 700;
		margin-bottom: 30px;

		span {
			float: left;
		}
	}

	.sub-page-title {
		font-size: 16px;
		color: #455464;
		font-weight: 700;
		margin-bottom: 20px;
	}

	.page-card {
		background: #ffffff;
		border-radius: 16px;
		padding: 35px 30px;

		&.has-head {
			position: relative;
			padding-top: 95px;
		}
	}

	.page-card-title {
		font-weight: bold;
		font-size: 22px;
		color: #455464;
		margin-bottom: 40px;
	}

	.page-card-label {
		background: #48577c;
		border-radius: 8px;
		height: 53px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-style: normal;
		padding: 0 35px;
		margin-bottom: 35px;

		@media (max-width: 576px) {
			height: 40px;
			margin-bottom: 20px;
			padding: 0 20px;
		}

		strong {
			font-weight: 500;
			font-size: 16px;
			color: #ffffff;

			@media (max-width: 576px) {
				font-weight: 500;
				font-size: 12px;
				color: #ffffff;
			}

			span {
				margin-right: 20px;
			}

			time {
				direction: ltr;
				display: inline-block;
			}
		}
	}

	.page-card-head {
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding: 22px 20px 17px;
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		color: #6e6e6e;
	}

	&.invoice-service-man {
		padding-bottom: 100px;

		@media (max-width: 576px) {
			padding: 0px 20px 100px;

			p {
				font-size: 14px;
			}
		}
	}
}

.modal-content {
	border-radius: 26px;
	border: none;
	box-shadow: 0 -1px 11px 0px rgb(0 0 0 / 60%);

	.modal-header {
		border: none;

		.modal-title {
			font-style: normal;
			font-weight: bold;
			font-size: 18px;
			color: #455464;
		}

		.btn-close {
			margin: 0;
			font-weight: bold;
			font-size: 10px;
			opacity: 0.9;
		}
	}
}

.loader {
	position: fixed;
	z-index: 100000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	// background-color: rgba(255, 144, 94, 0.5);
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.loader-icon {
		background-image: url('/assets/images/logo-stroke.png');
		width: 206px;
		height: 95px;
	}

	.loader-image {
		background-image: url('/assets/images/loading.png');
		width: 80px;
		height: 80px;
		margin-top: 50px;
		-webkit-animation: rotating 2s linear infinite;
		-moz-animation: rotating 2s linear infinite;
		-ms-animation: rotating 2s linear infinite;
		-o-animation: rotating 2s linear infinite;
		animation: rotating 2s linear infinite;
	}

	@-webkit-keyframes rotating /* Safari and Chrome */ {
		from {
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes rotating {
		from {
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		to {
			-ms-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
}

.prev-page-button {
	outline: 0;
	border: 0;
	background-color: transparent;
	background-image: url('/assets/images/arrow-left-purple.png');
	background-size: 50px 50px;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	left: 30px;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
	border-radius: 100%;
}

.iziToast-wrapper {
	z-index: 100000000;

	.iziToast-message {
		direction: rtl;
		font-family: 'IranSans', 'Helvetica Neue', Helvetica, Roboto, Arial,
			sans-serif !important;
		font-size: 16px !important;
	}
}

.star-rating {
	text-align: center;

	button {
		background-color: transparent;
		border: none;
		outline: none;
		cursor: pointer;

		svg {
			margin: 0 2px;
		}
	}
}

.poll-container {
	text-align: center;
	margin: 10px 30px 40px;

	.serviceman-label {
		color: #546e7a;
		font-size: 14px;
	}

	.serviceman-name {
		color: #000;
	}

	.car-name {
		margin: 20px auto;
		color: #546e7a;
		font-size: 14px;
	}

	.product-label {
		color: #546e7a;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.product-list {
		margin-bottom: 30px;

		img {
			width: 70px;
			margin: 0 3px;
		}
	}

	.points {
		text-align: right;
		margin: 30px 0;

		.low-priority {
			opacity: 0.5;
		}

		strong {
			color: #546e7a;
			margin: 15px 0 10px;
			display: block;
		}

		.items {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			button {
				width: calc(100% * (1 / 2) - 5px);
				margin-bottom: 10px;
				font-size: 14px;
				align-self: stretch;

				@media (max-width: 576px) {
					width: 100%;
				}
			}
		}
	}

	.comment {
		text-align: right;

		textarea {
			font-size: 0.8rem;
		}
	}

	.button-holder {
		margin-top: 20px;
		text-align: left;

		button {
			width: 150px;

			@media (max-width: 576px) {
				width: 100%;
			}
		}
	}
}

.blog {
	.avatar {
		object-fit: cover;
		width: 30 !important;
		height: 30 !important;
	}

	.text {
		font-size: 15px;
		font-weight: 500;
		line-height: 25px;
		color: #546e7a;
	}
	.title-blog {
		font-style: normal;
		font-weight: 700;
		font-size: 25px;
		color: #455464;

		li {
			margin-right: 20px;
			&::before {
				content: '\2022';
				color: #ff8852;
				font-size: 60px;
				position: absolute;
				line-height: 1;
				margin-right: -40px;
			}
		}
	}

	ul {
		list-style: none;

		li {
			&::before {
				content: '\2022';
				color: #ff8852;
				font-size: 30px;
				position: absolute;
				line-height: 1;
				margin-right: -15px;
			}
		}
	}

	.blog-img {
		width: 567px;
		height: 340px;
		left: 0;
		top: 0;
		float: left;
		border-radius: 10px;
		object-fit: cover;
		margin: 0 10px 10px 0;
	}
	.blog-text {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 31px;
		text-align: right;
		color: #78909c;
	}

	.blog-comment {
		background: #f8f8f8;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		padding: 20px;
		max-width: 800px;
	}

	.blog-user {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 15px;

		img {
			width: 55px;
			height: 55px;
			border-radius: 50%;
			object-fit: cover;
			margin-left: 10px;
			padding: 3px;
			background-color: #fff;
		}
	}

	.blog-inp {
		height: 44px;
		border: 1px solid rgba(199, 199, 199, 0.7);
		border-radius: 10px;
		box-sizing: border-box;
		outline: none;
	}

	.blog-textera {
		width: 100%;
		height: 120px;
		padding: 15px;
		border: 1px solid rgba(199, 199, 199, 0.7);
		border-radius: 10px;
		outline: none;
	}

	.blog-btn {
		text-align: left;
		margin-top: 15px;

		button {
			width: 150px;
		}
	}

	.blog-view {
		max-width: 800px;
		background: #f8f8f8;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-bottom: 30px;
		position: relative;
	}

	.blog-date {
		position: absolute;
		left: 20px;
		top: 20px;
		font-size: 12px;
		color: rgba(0, 0, 0, 0.5);
	}

	.blog-Like {
		cursor: pointer;
	}

	.view-title {
		font-weight: 500;
		font-size: 18px;
		line-height: 31px;
		color: #546e7a;
	}

	.view-auto-tik {
		// float: left;

		margin: 50px 75px 0 0;
		width: 842px;
		background: #f8f8f8;
		border: 1px solid #78909c;
		border-radius: 20px;
	}
}

.btn-close-modal {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 900;
}

.notify-button {
	text-align: left;

	.confirm {
		margin-right: 10px;
		width: 150px;
	}
}

.emergency-phone-page {
	a {
		text-decoration: none;
		color: #3261c1;
	}
}

.downloadApp {
	position: fixed;
	height: 100vh;
	width: 100%;
	background-color: #78909c;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	font-size: 13px;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 10000000000;

	.close {
		display: none;
	}

	.btn-close {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 50px !important;
		height: 50px !important;

		.svg {
			width: 100% !important;
			height: 100% !important;
		}
	}

	.container {
		position: absolute;
		height: 60vh;
		width: 100%;
		background-color: #fff;
		border-radius: 30px 30px 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		margin: 0;
		padding: 0;
		bottom: 0 !important;

		.circle {
			min-height: 100px;
			width: 100px;
			background-color: #ff8852;
			border-radius: 50%;
			margin-top: -50px;
			display: flex;
			align-items: center;
			justify-content: center;

			.svg {
				color: #fff;
				height: 70px;
				width: 70px;
			}
		}

		p {
			font-size: 15px;
			color: rgba(69, 84, 100, 0.44);
			text-align: center;
		}

		h6 {
			font-weight: 900;
			font-size: 20px;
		}

		.app-description {
			margin-left: 20px;
			margin-right: 20px;
		}
	}

	.app-market {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;

		img {
			margin: 6px 5px;
			width: 156px;
			height: 47px;
		}
	}

	.footer {
		width: 100%;
		height: 50px;
		background: #ff8852;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		border-radius: 0;
		margin-top: 20px;
		font-weight: 900;
		font-size: 10px;
		color: #fff;
	}

	.app-web {
		padding: 0;
	}
}

.downloadApp.close {
	display: none;
}

@media (max-width: 576px) {
	.downloadApp {
		display: block;
	}
}

@media (min-width: 576px) {
	.downloadApp {
		display: none;
	}
}

.card-to-card {
	.pay-wrapper {
		width: 350px;
		text-align: center;
		margin: auto;
		padding-top: 18px;

		@media (max-width: 576px) {
			padding-top: 15px;
		}
	}

	.pay-amount {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;

		span,
		strong {
			font-weight: 500;
			font-size: 15px;
			color: #455464;

			@media (max-width: 576px) {
				font-size: 14px;
			}
		}

		&.total {
			padding-bottom: 15px;

			span,
			strong {
				font-size: 20px;

				@media (max-width: 576px) {
					font-size: 18px;
				}
			}
		}

		small {
			font-size: 14px;

			@media (max-width: 576px) {
				font-size: 10px;
			}
		}
	}
}

.driving-offense {
	direction: rtl;

	h2 {
		font-size: 20px;
	}

	h3 {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.driving-wallet {
		margin-top: 20px;
		margin-right: 15px;
	}

	.driving-col {
		padding: 25px;
		border: 1px solid #d7d7d7;
		margin: 20px 10px;
		border-radius: 10px;

		@media (max-width: 576px) {
			padding: 15px;
			margin: 10px 5px;
		}

		.icon {
			width: 20px;
			height: 20px;
		}
	}

	.driving-flex {
		display: flex;
		align-items: center;
		margin-bottom: 5px;

		.disable {
			color: #6e6e6e;
		}
	}

	.driving-button-wrapper {
		margin-top: 20px;
	}

	.driving-p {
		margin-bottom: 0;
		margin-right: 5px;
		font-size: 13px;
	}

	.driving-price {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 0;
	}

	.driving-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.driving-btn {
			width: 100%;
		}

		.driving-text {
			font-size: 12px;
			font-weight: 500;
		}
	}
}

// .violation-details {
// 	.shadow {
// 		background: #fefefe;
// 		box-shadow: 0 16px 40px rgba(123, 123, 123, 0.15);
// 		border-radius: 15px;
// 		padding: 25px 30px 60px;
// 		-webkit-border-radius: 15px;
// 		-moz-border-radius: 15px;
// 		-ms-border-radius: 15px;
// 		-o-border-radius: 15px;
// 	}

// 	.btn-back {
// 		text-decoration: none;
// 		color: #311000;
// 	}

// 	h1 {
// 		font-size: 30px;
// 		font-weight: 900;
// 		margin: 20px 0;
// 	}

// 	.text {
// 		color: #66666b;
// 		font-size: large;
// 	}
// }