.user-panel {
	direction: rtl;
	margin: 40px auto;

	@media (max-width: 576px) {
		margin: 0 auto 40px;
	}

	.user-side-menu-col {
		@media (max-width: 576px) {
			padding: 0;
		}
	}

	.user-side-menu {
		padding: 25px 15px;

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

			&.user-card {
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				border-radius: 10px 10px 0 0;
				box-shadow: none;
				background: transparent;
				margin-bottom: 20px;
			}
		}

		.user-side-menu-header {
			display: flex;
			align-items: center;
			flex-direction: row;
			border-bottom: 1px solid #eceff1;
			padding-bottom: 24px;

			@media (max-width: 576px) {
				display: none;
			}

			.avatar {
				width: 55px;
				height: 55px;
				background-color: #ccc;
				border-radius: 50%;
				align-items: center;
				justify-content: center;
				display: flex;
				margin-left: 10px;
				overflow: hidden;

				.user-avatar-image {
					width: 55px;
					height: 55px;
					object-fit: cover;
				}

				.icon {
					width: 28px;
				}
			}

			strong {
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				color: #455a64;
				display: block;
			}

			span {
				font-style: normal;
				font-weight: 500;
				font-size: 12px;
				color: #78909c;
				display: block;
				margin-top: 5px;
			}
		}

		.user-side-menu-link {
			@media (max-width: 576px) {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				overflow-x: auto;
			}

			a {
				text-decoration: none;
				position: relative;
				padding: 2px 5px;
				display: block;
				margin: 15px auto;
				white-space: nowrap;

				.icon {
					@media (max-width: 576px) {
						display: none;
					}
				}

				span {
					font-style: normal;
					font-weight: normal;
					font-size: 14px;
					color: #455a64;
					margin-right: 18px;

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

				&:hover {
					span {
						color: #000;
					}
				}

				&.active {
					&::before {
						content: '';
						position: absolute;
						background: #ff8852;
						border-radius: 5px;
						height: 100%;
						width: 4px;
						right: -16px;
						top: 0;

						@media (max-width: 576px) {
							top: auto;
							bottom: -15px;
							right: 0;
							left: 0;
							width: 50%;
							height: 2px;
							transform: translateX(-50%);
						}
					}

					span {
						color: #ff8852;
					}

					&:hover {
						span {
							color: #ff8852;
						}
					}
				}
			}
		}
	}

	.user-panel-info {
		padding: 25px 30px 60px;

		.row {
			@media (max-width: 576px) {
				flex-direction: column-reverse;
			}
		}

		.upload-avatar {
			width: 200px;
			color: #48577c;
			border: 1px solid #48577c;
			border-radius: 8px;
			padding: 0.375rem 0.75rem;
			display: inline-block;
			cursor: pointer;

			&:hover {
				color: #fff;
				background-color: #48577c;
			}

			&.disabled {
				opacity: 0.6;
				cursor: default;

				&:hover {
					color: #48577c;
					background-color: transparent;
				}
			}

			input {
				display: none;
			}
		}

		.button-holder {
			text-align: left;
		}

		.user-avatar-wrapper {
			text-align: center;

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

			.user-avatar {
				width: 150px;
				height: 150px;
				background: #f7f6f4;
				border: 1px solid rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				margin: 35px auto 18px;
				overflow: hidden;

				.user-avatar-image {
					width: 150px;
					height: 150px;
					object-fit: cover;
				}

				@media (max-width: 576px) {
					margin: 0 auto 18px;
				}
			}
		}
	}

	.user-invoice {
		.user-invoice-list {
			width: 100%;
			text-align: center;
			border-collapse: separate;
			border-spacing: 0 15px;

			thead {
				font-style: normal;
				font-weight: 500;
				font-size: 15px;
				color: #455464;
			}

			tbody {
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				color: #455464;

				tr {
					box-shadow: 0px 4px 30px rgba(162, 162, 162, 0.15);

					td {
						background-color: #fefefe;
						padding: 14px 0;

						&.user-invoice-action {
							text-align: left;
							padding-left: 20px;
						}
					}

					td:first-child {
						border-radius: 0 10px 10px 0;
					}

					td:last-child {
						border-radius: 10px 0 0 10px;
					}
				}
			}
		}
		@media (min-width: 576px) {
			.user-invoice-mobile {
				display: none;
			}
		}
		@media (max-width: 576px) {
			.user-invoice-mobile {
				margin: 0 15px;
				font-size: 13px;

				& > div {
					border-bottom: 1px solid rgba(0, 0, 0, 0.2);
					padding-bottom: 15px;

					&:last-child {
						border: 0;
					}
				}

				span {
					margin-top: 10px;
				}
			}
			.user-invoice-inf {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15px;

				span {
					display: flex;
				}
			}
			.user-invoice-span {
				margin-top: 15px;
				span {
					color: #000;
				}
			}
		}

		.user-invoice-btn-details {
			width: 90px;
			padding: 5px 0;
		}
		.user-invoice-btn-full-details {
			width: 110px;
			padding: 5px 0;
		}
		.user-invoice-btn-delete {
			width: 40px;
			padding: 5px 0;
			margin-left: 15px;
		}
	}
	@media (max-width: 576px) {
		.user-invoice-list {
			display: none;
		}
	}
	.user-panel-tickets {
		padding: 30px;

		@media (max-width: 576px) {
			padding: 20px 10px 30px;
		}

		button {
			width: 200px;
		}

		.ticket-upload-file {
			border: 1px dashed rgba(0, 0, 0, 0.5);
			box-sizing: border-box;
			border-radius: 10px;
			width: 100%;
			margin-left: 20px;
			height: 38px;
			cursor: pointer;
			padding-top: 5px;
			padding-right: 10px;

			@media (max-width: 576px) {
				margin: 0 0 15px;
			}

			span {
				font-style: normal;
				font-weight: 500;
				font-size: 12px;
				color: #78909c;
				margin-right: 10px;
			}

			input {
				display: none;
			}
		}

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

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

		textarea {
			height: 150px;
		}

		.user-tickets-tabs {
			height: 48px;
			background: #ffffff;
			border: 1px solid rgba(0, 0, 0, 0.15);
			border-radius: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			button {
				width: 50%;
				outline: 0;
				border: 0 none;
				background-color: transparent;
				height: 100%;
				font-style: normal;
				font-weight: 300;
				font-size: 18px;
				text-align: center;
				color: #37474f;

				&.active {
					background: #48577c;
					border-radius: 9px;
					color: #ffffff;
				}
			}
		}

		.user-tickets-form {
			margin-top: 55px;
		}

		.user-tickets-list {
			margin-top: 32px;

			.ticket-not-found {
				text-align: center;
			}

			.user-tickets-item {
				background: #fefefe;
				border: 1px solid rgba(0, 0, 0, 0.15);
				border-radius: 10px;
				padding: 15px 25px;
				margin-top: 18px;

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

				.user-tickets-wrapper {
					cursor: pointer;
				}

				&:hover {
					border-color: rgba(0, 0, 0, 0.6);
				}

				p {
					font-style: normal;
					font-weight: 300;
					font-size: 14px;
					text-align: right;
					color: #37474f;
					margin: 24px 0 0;
					line-height: 28px;
				}
			}

			.user-tickets-item-head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				@media (max-width: 576px) {
					align-items: flex-start;
				}

				.user-tickets-item-title {
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #37474f;

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

					.icon {
						width: 20px;
						margin-left: 5px;
						margin-right: -5px;
						transform: rotate(90deg);
						transition: transform 0.2s ease-in-out;
					}

					&.open {
						.icon {
							transform: rotate(0);
						}
					}
				}

				.user-tickets-item-details {
					span {
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						color: #ff8852;

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

					small {
						font-style: normal;
						font-weight: 300;
						font-size: 12px;
						color: #78909c;
						margin-right: 16px;
					}
				}
			}

			.user-tickets-item-body {
				margin-top: 35px;

				.user-tickets-dialogs {
					margin-bottom: 35px;
				}

				.user-tickets-dialog {
					position: relative;
					padding-right: 15px;
					margin-bottom: 25px;

					&:before {
						content: '';
						width: 4px;
						height: 100%;
						top: 0;
						right: 0;
						position: absolute;
						border-radius: 2px;
						background-color: #ff8852;
					}

					&.reply {
						margin-right: 30px;
					}

					.user-tickets-dialog-head {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						span {
							font-style: normal;
							font-weight: 300;
							font-size: 14px;
							color: #37474f;
						}

						small {
							font-style: normal;
							font-weight: 300;
							font-size: 12px;
							color: #78909c;
						}
					}

					p {
						font-style: normal;
						font-weight: normal;
						font-size: 14px;
						margin: 5px 0 0;
					}

					img {
						width: 80px;
						margin-top: 20px;
						height: 80px;
						object-fit: cover;
					}
				}
			}
		}
	}

	.user-card {
		background: #fefefe;
		box-shadow: 0px 16px 40px rgba(123, 123, 123, 0.15);
		border-radius: 10px;
		@media (max-width: 576px) {
			box-shadow: none;
		}
	}
}
@media (min-width: 576px) {
	.user-mycars-box {
		display: none;
	}
}

@media (max-width: 576px) {
	.user-mycars-table {
		display: none;
	}
	.user-mycars-box {
		height: 270px;
		margin: 20px 5px 0;
		background: #ffffff;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
		border-radius: 8px;

		&.car-active {
			border: 1px solid #ff8852;
		}

		.user-mycars-image {
			padding: 15px 0 25px;
			text-align: center;

			img {
				object-fit: cover;
				width: 120px;
				height: 60px;
			}
		}

		.user-mycars-name {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 12px;
			padding: 0 15px;
			text-align: center;
		}
	}
}
.user-mycars {
	.user-mycars-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;

		span {
			font-style: normal;
			font-weight: 500;
			font-size: 15px;
			color: #546e7a;
			margin-right: 30px;
		}

		button {
			font-style: normal;
			font-weight: 500;
			font-size: 15px;
			color: #546e7a;
			margin-left: 10px;
			outline: 0;
			border: none;
			background: transparent;

			&:hover {
				color: #000;
			}
		}
	}

	tbody {
		background-color: #fff;

		.car-image {
			width: 200px;
			height: 105px;
			margin: 0 10px 0 20px;
			object-fit: cover;
		}
	}

	.user-mycars-tr {
		background: #48577c;
		color: #fff;

		th {
			border: none;
		}
		th:first-child {
			border-radius: 0 9px 0 0 !important;
		}
		th:last-child {
			border-radius: 9px 0 0 0 !important;
		}
	}

	.car-selection {
		text-align: center;
		vertical-align: middle;
	}

	.hover {
		cursor: pointer;
	}

	.selected {
		.user-mycars-tag-box {
			background-color: #ededed;
		}
	}

	.user-mycars-tag-box {
		width: 154px;
		height: 39px;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 35px auto 0;

		@media (max-width: 576px) {
			width: 80%;
			font-size: 13px;
			margin-top: 10px;
		}

		.user-mycars-tag-p1 {
			width: 50px;
			height: 37px;
			border-left: 1px solid rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;

			.icon {
				display: block !important;
				width: 27px;
				height: 24px;
				margin-top: 2px;
			}

			span {
				display: block !important;
			}
		}

		.user-mycars-tag-p2 {
			width: 40px;
			height: 37px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.user-mycars-tag-p3 {
			width: 25px;
			height: 37px;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 20px;
			}
		}
		.user-mycars-tag-p4 {
			width: 25px;
			height: 37px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.user-mycars-icons {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 121px;

		@media (max-width: 576px) {
			height: auto;
			width: 70%;
			margin: 2px auto 0;
		}

		.user-mycars-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			background: #ff8852;
			margin: 3px 8px 0;
			line-height: 18px;
			width: 64px;
			height: 48px;
			box-shadow: 0px 4px 10px rgb(230 110 0 / 20%);
			border-radius: 8px;
			cursor: pointer;
			color: #fff;
			padding-top: 3px;

			@media (max-width: 576px) {
				background: transparent;
				box-shadow: none;

				img {
					width: 20px;
				}
			}
		}
	}

	.user-mycars-selection,
	.user-mycars-new-service {
		margin-top: 5px;
		text-align: center;

		button {
			width: 80%;
		}
	}
}

.user-addcar {
	.user-addcar-select {
		margin-bottom: 50px;
	}
	.user-addcar-tag {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: auto;
		width: 320px;
		height: 59px;
		border: 2px solid rgba(0, 0, 0, 0.7);
		box-sizing: border-box;
		border-radius: 6px;

		input {
			font-size: 25px;
		}

		.user-addcar-tag1 {
			width: 65px;
			height: 56px;
			border-left: 2px solid #000;
			text-align: center;

			img {
				width: 51.48px;
				height: 10.29px;
			}
			input {
				width: 55px;
				height: 31px;
				text-align: center;
				font-size: 20px;
				margin: 0 2px;
			}
		}
		.user-addcar-tag2 {
			input {
				width: 70px;
				height: 51px;
				border: 1px solid rgba(0, 0, 0, 0.3);
				box-sizing: border-box;
				border-radius: 4px;
				text-align: center;
			}
		}
		.user-addcar-tag3 {
			select {
				width: 90px;
				height: 51px;
				border: 1px solid rgba(0, 0, 0, 0.3);
				box-sizing: border-box;
				border-radius: 4px;
				font-size: 18px;
				text-align: center;
			}
		}
		.user-addcar-tag4 {
			input {
				width: 50px;
				height: 51px;
				border: 1px solid rgba(0, 0, 0, 0.3);
				box-sizing: border-box;
				border-radius: 4px;
				text-align: center;
			}
		}
		.user-addcar-tag5 {
			flex-direction: column;
			display: flex;
			justify-content: space-around;
			width: 31px;
			height: 55px;
			left: 34px;
			top: 270px;
			background: #3a449a;
			border-radius: 4px 0px 0px 4px;

			img {
				display: block;
				margin: auto;
			}
			.user-addcar-tag5-icon {
				line-height: 51px;
			}
		}
	}
	.user-car-button {
		margin-top: 30px;
		text-align: center;
		button {
			width: 150px;
		}
	}
}

.user-panel-address {
	padding: 25px;

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

	.user-address-form {
		@media (max-width: 576px) {
			padding: 20px;
		}

		.address-selectbox {
			z-index: 11;
		}
		.city-selectbox {
			z-index: 10;
		}
	}

	h4 {
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		color: #455464;
		margin-bottom: 40px;
	}

	h5 {
		font-style: normal;
		font-weight: 500;
		font-size: 18px;
		color: #455464;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	label {
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		color: #546e7a;
	}

	textarea {
		height: 100px;

		@media (max-width: 576px) {
			height: 150px;
			font-size: 16px;
		}
	}

	.button-holder {
		margin-top: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.add-address {
			width: 190px;
		}
	}

	.user-address-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;

		span {
			font-style: normal;
			font-weight: 500;
			font-size: 15px;
			color: #546e7a;
			margin-right: 10px;
		}

		button {
			font-style: normal;
			font-weight: 500;
			font-size: 15px;
			color: #546e7a;
			margin-left: 10px;
			outline: 0;
			border: none;
			background: transparent;

			&:hover {
				color: #000;
			}
		}
	}

	.user-address-list {
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 10px;

		@media (max-width: 576px) {
			background: transparent;
			border-radius: 0;
			border: 0;
		}

		.user-address-item {
			padding: 15px;
			border-bottom: 1px solid rgba(84, 110, 122, 0.5);
			position: relative;
			display: flex;
			flex-direction: row;
			cursor: pointer;
			align-items: center;

			@media (max-width: 576px) {
				border: 0;
				background-color: #fff;
				margin: 20px auto;
				box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
				border-radius: 8px;
				padding: 15px 15px 65px;
				border: 2px solid transparent;
			}

			&.selected {
				@media (max-width: 576px) {
					border: 2px solid #ff8852;
				}
			}

			&:last-child {
				@media (min-width: 576px) {
					border: 0;
				}
			}

			h4 {
				font-style: normal;
				font-weight: 500;
				font-size: 16px;
				color: #546e7a;
				margin-bottom: 10px;
			}

			p {
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				color: #546e7a;
				margin: 0;
			}

			.user-address-actions {
				position: absolute;
				left: 15px;
				top: 15px;

				@media (max-width: 576px) {
					display: flex;
					flex-direction: row-reverse;
					top: auto;
					bottom: 20px;
				}

				button {
					outline: 0;
					border: 0;
					background: transparent;
					margin-right: 20px;

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

			.user-address-selection {
				width: 50px;
				height: 100%;

				@media (max-width: 576px) {
					display: none;
				}
			}
		}
	}
}

.user-invite {
	.user-invite-title {
		display: flex;
		align-items: center;

		span {
			color: #455464;
			font-weight: 700;
			margin-right: 10px;
			font-size: 25px;
			line-height: 45px;

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

		img {
			@media (max-width: 576px) {
				width: 37px;
			}
		}
	}

	.user-invite-content {
		padding: 0 20px;
	}

	.user-invite-text {
		font-weight: 500;
		font-size: 15px;
		line-height: 30px;
		color: #566e7a;
		margin-top: 20px;
		text-align: justify;
	}

	.user-invite-card {
		background: #ffffff;
		box-shadow: 0px 16px 40px rgba(123, 123, 123, 0.15);
		border-radius: 8px;
		padding: 20px;

		.user-invite-title {
			font-weight: 500;
			font-size: 16px;
			line-height: 27px;
			color: #455464;
			margin: 20px 10px 10px;
		}

		.user-invite-inp {
			height: 48px;
			position: relative;
			margin: 10px auto;

			input {
				width: 100%;
				height: 48px;
				border: 2px solid #7eb75c;
				box-sizing: border-box;
				border-radius: 10px;
				direction: ltr;
				outline: none;
				font-family: arial;
				font-weight: bold;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding: 5px 12px;
			}

			button {
				position: absolute;
				right: 10px;
				top: 50%;
				border: none;
				width: 65px;
				height: 30px;
				color: #fff;
				transform: translateY(-50%);
				background: #7eb75c;
				border-radius: 20px;
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				-o-transform: translateY(-50%);
			}
		}

		.user-invite-shar {
			span {
				display: block;
			}
			.user-invite-social {
				display: flex;
				align-items: center;
				justify-content: space-around;

				img {
					cursor: pointer;
				}
			}
		}
	}
}

.user-invoice-details {
	margin-bottom: 35px;
	font-size: 14px;

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

	.row {
		margin-bottom: 6px;

		@media (min-width: 576px) {
			margin-bottom: 10px;
		}
	}

	.map-direction {
		text-align: left;
	}
}

h3.user-invoice-products-title {
	font-style: normal;
	font-weight: bold;
	font-size: 18px;
	color: #455464;
	margin-bottom: 20px;
}

.user-invoice-pay {
	border-top: 1px solid rgba(0, 0, 0, 0.3);

	@media (min-width: 576px) {
		border-top: 0;
		max-width: 400px;
	}
}

.user-invoice-products {
	width: 100%;
	text-align: center;

	@media (max-width: 576px) {
		display: none;
	}

	thead {
		font-style: normal;
		font-weight: 500;
		font-size: 15px;
		color: #ffffff;
		background: #48577c;

		th {
			padding: 12px 0;
		}

		th:first-child {
			border-radius: 0 9px 0px 0px;
		}
		th:last-child {
			border-radius: 9px 0 0px 0px;
		}
	}

	tbody {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		color: #546e7a;

		tr {
			border-bottom: 1px solid rgba(0, 0, 0, 0.3);
			border-left: 1px solid rgba(0, 0, 0, 0.3);
			border-right: 1px solid rgba(0, 0, 0, 0.3);

			td {
				padding: 14px 10px;

				small {
					font-style: normal;
					font-weight: 300;
					font-size: 11px;
					color: #78909c;
					margin-right: 3px;
				}

				&:first-child {
					text-align: right;
				}
			}
		}
	}
}

.user-invoice-products-mobile {
	margin-top: -15px;

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

	.user-invoice-products-mobile-item {
		border-top: 1px solid rgba(0, 0, 0, 0.3);
		padding-top: 20px;
		margin-bottom: 20px;
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		color: #37474f;

		.user-invoice-products-mobile-title {
			font-style: normal;
			font-weight: 500;
			font-size: 15px;
			color: #48577c;
			margin-bottom: 10px;
		}

		small {
			font-style: normal;
			font-weight: 300;
			font-size: 14px;
			color: #546e7a;
		}
	}
}

.user-invite-score {
	height: 48px;
	color: #ffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 15px;
	margin: auto;
	background: #48577c;
	box-shadow: 0px 4px 10px rgba(0, 4, 230, 0.2);
	border-radius: 8px;
}

.code-input {
	direction: ltr;
	text-align: center;
	font-family: arial;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;

	&::placeholder {
		direction: rtl;
		font-size: 13px;
		letter-spacing: 0;
		text-align: right;
		font-family: 'IranSans', 'Helvetica Neue', Helvetica, Roboto, Arial,
			sans-serif;
	}
}