.inquery {
	.inquery-wrapper {
		direction: rtl;
		max-width: 1100px;
		margin: auto;

		@media (max-width: 576px) {
			width: 100%;
			margin: 0 !important;
		}
	}

	.inquery-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 60px 40px;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0px 16px 40px rgba(123, 123, 123, 0.15);

		@media (max-width: 576px) {
			flex-direction: column;
			padding: 20px 20px 40px;
		}
	}

	.inquery-car-info {
		display: flex;
		align-items: center;

		img,
		p {
			height: 150px;
		}

		p {
			padding-top: 60px;
		}

		@media (max-width: 576px) {
			p {
				height: 60px;
				margin-bottom: 0;
				padding-top: 0;
			}
			img {
				width: 90%;
				height: auto;
				margin: auto;
			}
		}
	}

	.inquery-number {
		color: #ff8852;
		font-size: 30px;
		font-weight: bold;
		display: block;
		direction: ltr;

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

	.inquery-text {
		margin-top: 10px;
		font-size: 20px;
		font-weight: 500;
		color: #546e7a;

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

	.inquery-car-details {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.inquery-national-code {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 180px;
		margin-top: 15px;
		padding-right: 10px;
		cursor: pointer;

		&:hover {
			span {
				opacity: 1;
			}
			.inquery-national-code-row {
				.inquery-national-code-btn {
					border-color: #ccc;
				}
			}
		}

		span {
			font-size: 14px;
			opacity: 0.8;
		}

		strong {
			font-size: 14px;
		}

		.inquery-national-code-row {
			display: flex;
			align-items: center;

			.inquery-national-code-btn {
				border-radius: 6px;
				background-color: #eee;
				height: 28px;
				width: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
				margin-right: 15px;

				img {
					width: 18px;
					height: 18px;
					opacity: 0.8;
				}
			}
		}
	}

	.car-plate {
		font-size: 24px;
		font-weight: 900;
		cursor: pointer;
		display: flex;
		width: 270px;

		@media (max-width: 576px) {
			margin-top: 20px;
		}

		.car-plate-list-btn {
			border-radius: 6px;
			background-color: #eee;
			height: 28px;
			width: 28px;
			display: flex;
			margin-top: 10px;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;

			img {
				width: 20px;
				height: 20px;

				&.car-plate-list-btn-plus {
					width: 16px;
					height: 16px;
				}
			}
		}

		&:hover {
			.car-plate-tag {
				border-color: #ccc;
			}
			.car-plate-list-btn {
				border-color: #ccc;
			}
		}

		.car-plate-tag {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: auto;
			width: 230px;
			height: 50px;
			border: 1px solid #eee;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			box-sizing: border-box;
			border-radius: 6px;

			.car-plate-tag1 {
				width: 52px;
				height: 47px;
				border-left: 1px solid #e0e0e0;
				text-align: center;

				img {
					display: block;
					width: 50px;
					height: 8px;
					margin-top: 4px;
				}
			}
			.car-plate-tag5 {
				flex-direction: column;
				display: flex;
				justify-content: space-around;
				width: 22px;
				height: 43px;
				margin-left: 2px;
				background: #3a449a;
				border-radius: 4px 0px 0px 4px;

				img {
					display: block;
					margin: auto;
					width: 16px;
				}
			}
		}
	}

	.inquery-result {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -35px;

		@media (max-width: 576px) {
			flex-direction: column;
			margin-top: -20px;
		}

		.inquery-result-box {
			width: 200px;
			height: 75px;
			background-color: #f1f1f1;
			border-radius: 8px;
			box-shadow: 0px 4px 10px rgba(83, 83, 83, 0.15);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 0 5px;
			padding: 0 10px 0 15px;
			cursor: pointer;

			@media (max-width: 576px) {
				width: 90%;
				margin-bottom: 10px;
			}

			&:hover {
				.inquery-icon {
					opacity: 1;
				}
			}

			.inquery-icon {
				width: 50px;
				opacity: 0.6;
			}
			.inquery-result-box-info {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				div {
					height: 32px;

					span {
						font-size: 14px;
						padding-top: 8px;
						display: block;
					}
				}
			}
			.label {
				font-size: 12px;
				margin-top: 5px;
			}
			.warning {
				color: #f52207;
			}
			.insurance-remain {
				color: #f52207;
				padding-top: 2px !important;
				font-size: 12px !important;
			}
			.insurance-company {
				color: #008648;
				padding-top: 0px !important;
				font-size: 12px !important;
				text-align: left;
			}
			.btn {
				height: 25px;
				padding-top: 2px;
				margin-top: 5px;
				font-size: 12px;
			}
		}
	}
}