.services {
	.step-progressbar {
		list-style: none;
		display: flex;
		padding: 0;
		width: 90%;
		margin: auto;

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

		li {
			display: flex;
			flex-direction: column;
			flex: 1;
			text-align: center;
			position: relative;
			font-style: normal;
			font-weight: normal;
			font-size: 18px;
			color: #455464;

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

			&:after {
				content: '';
				width: 16px;
				height: 16px;
				line-height: 16px;
				align-self: center;
				background: #cfd8dc;
				border-radius: 100%;
				margin-top: 10px;

				@media (max-width: 576px) {
					background: #ff8852;
					position: absolute;
					left: 50%;
					right: 50%;
					top: 27px;
					transform: translateX(8px);
				}
			}

			&:before {
				content: '';
				width: calc(100% - 40px);
				right: calc(50% + 20px);
				background: #cfd8dc;
				position: absolute;
				top: 45px;
				height: 2px;

				@media (max-width: 576px) {
					width: calc(50% - 23px);
					left: calc(50% + 22px);
					right: auto;
					background: #69ce79;
				}
			}

			@media (min-width: 576px) {
				&:last-child {
					&:before {
						content: none;
					}
				}
			}

			@media (max-width: 576px) {
				&:first-child {
					&:before {
						content: none;
					}
				}
			}

			&.active {
				&:after {
					background: #ff8852;
				}

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

			&.complete {
				&:before {
					background: #69ce79;
				}
				&:after {
					background: #69ce79;
				}
			}
		}
	}

	.services-card {
		position: relative;
		min-height: 500px;
		background: #ffffff;
		border-radius: 20px;
		margin-top: 80px;
		padding: 30px 30px 100px;

		@media (max-width: 576px) {
			margin-top: 60px;
			padding: 20px 0 100px;
			min-height: 450px;
		}

		&.services-card-product {
			@media (max-width: 576px) {
				margin-top: 110px !important;
			}
		}

		.cart-item-action-group {
			direction: rtl;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

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

			button {
				width: 30px;
				height: 30px;
				border: 1px solid rgba(0, 0, 0, 0.2);
				border-radius: 5px;
				padding: 0;

				@media (max-width: 576px) {
					width: 25px;
					height: 25px;
				}

				.icon {
					width: 10px;
					height: 10px;
					object-fit: none;
				}
			}

			span {
				width: 25px;
				text-align: center;
				font-weight: bold;
			}
		}

		.services-wrapper {
			width: 90%;
			margin: 50px auto 20px;

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

		.submit-button {
			position: absolute;
			bottom: 30px;
			left: 30px;
			width: 160px;
		}

		.back-button {
			position: absolute;
			bottom: 30px;
			right: 30px;
			width: 120px;
		}
	}

	.service-options {
		width: 250px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		margin: -70px auto 0;
	}

	.service-category {
		width: 100%;
		margin-top: 30px;
		// overflow-x: auto;
		padding-bottom: 5px;

		// &::-webkit-scrollbar {
		// 	height: 4px;
		// }

		// /* Track */
		// &::-webkit-scrollbar-track {
		// 	background: #f1f1f1;
		// 	border-radius: 10px;
		// }

		// /* Handle */
		// &::-webkit-scrollbar-thumb {
		// 	background: rgb(161, 161, 161);
		// 	border-radius: 10px;
		// }

		// /* Handle on hover */
		// &::-webkit-scrollbar-thumb:hover {
		// 	background: #555;
		// 	border-radius: 10px;
		// }

		.service-category-list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			button {
				outline: 0;
				border: none;
				background: transparent;
				font-style: normal;
				font-weight: 300;
				font-size: 15px;
				color: #546e7a;
				margin: 6px 10px;
				border-radius: 20px;
				padding: 8px 15px;
				white-space: nowrap;
				background: #f3f3f3;

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

				&:last-child {
					margin-left: 0;
				}

				&.active {
					background: #ff8852;
					color: #fff;
				}
			}
		}
	}

	.service-oil-alert {
		margin: 30px auto -30px;
		width: 90%;

		.service-oil-head {
			background: #48577c;
			color: #fff;
		}
		// .service-oil-head2 {
		// 	background: #e7eeff;
		// 	color: #000;
		// }

		.service-oil-subhead {
			background: #6c7b9e;
			color: #fff;
		}

		td {
			width: 50%;
			text-align: center;
		}
	}

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

	@media (max-width: 576px) {
		.service-product-phone {
			.service-product-box {
				display: flex;
				align-items: center;
				flex-direction: row;
				margin: 0 10px;
			}

			.service-product-phone-check {
				width: 35px;

				.form-check-input {
					width: 24px;
					height: 24px;
					margin-left: 3px;
				}
			}

			.service-product-phone-content {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: row;
			}

			.service-product-img {
				width: 90px;
			}

			.service-product-name {
				display: block;
				font-weight: 500;
				font-size: 12px;
				line-height: 20px;
				color: #546e7a;
				margin: 20px 0 30px 0;
			}

			.service-product-name-price {
				width: 100%;
			}

			.service-product-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30px;

				font-style: normal;
				font-weight: 500;
				font-size: 12px;
				color: #37474f;

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

				.service-product-toman {
					font-size: 10px;
					line-height: 17px;
					text-align: center;
					color: #78909c;
					margin-left: 5px;
				}

				.price-in-shop {
					margin-top: 6px;

					small {
						opacity: 0.6;
						position: relative;

						&:after {
							content: '';
							width: 100%;
							height: 1px;
							background-color: #626971;
							top: 7px;
							left: 0;
							position: absolute;
							transform: rotate(177deg);
						}
					}
				}
			}
		}
	}
	.service-product-table {
		@media (max-width: 576px) {
			display: none;
		}

		thead {
			background: #48577c;
			color: #fff;
			text-align: center;

			th {
				border: none;
				font-style: normal;
				font-weight: 300;
				font-size: 15px;
			}
			th:first-child {
				border-radius: 0 9px 0 0 !important;
			}
			th:last-child {
				border-radius: 9px 0 0 0 !important;
			}
		}

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

			// @media (max-width: 576px) {
			// 	.service-product-name {
			// 		display: block;
			// 		font-weight: 500;
			// 		font-size: 12px;
			// 		line-height: 20px;
			// 		color: #546e7a;
			// 		margin: 10px 0;
			// 	}
			// }
			// @media (max-width: 576px) {
			// 	.service-product-price {
			// 		td {
			// 			font-weight: 500;
			// 			font-size: 12px;
			// 			line-height: 20px;
			// 			color: #546e7a;
			// 		}
			// 		.service-product-toman {
			// 			font-weight: normal;
			// 			font-size: 10px;
			// 			line-height: 17px;
			// 			text-align: center;
			// 			color: #78909c;
			// 			margin: 5px;
			// 		}
			// 	}
			// }

			tr {
				border-bottom: 1px solid rgba(0, 0, 0, 0.3);
				text-align: center;
				cursor: pointer;
			}

			td {
				vertical-align: middle;

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

				input {
					width: 1.5em;
					height: 1.5em;
				}
			}

			.price-in-shop {
				margin-top: 6px;

				small {
					font-size: 12px;
					opacity: 0.6;
					padding: 0 5px;
					position: relative;

					&:after {
						content: '';
						width: 100%;
						height: 1px;
						background-color: #626971;
						top: 7px;
						left: 0;
						position: absolute;
						transform: rotate(177deg);
					}
				}
			}
		}
	}

	.service-cart-back {
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;

		&.active {
			display: block;
		}

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

	.service-cart-button {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #fff;

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

		.btn-basket {
			position: relative;
			height: 48px;
			width: 55px;
			padding: 7px 10px 0 0;
			margin-left: 10px;
			border-radius: 10px;
			outline: 0;
			border: 0;
			background: transparent;

			.count {
				position: absolute;
				right: 10px;
				top: 28px;
				min-width: 18px;
				height: 18px;
				padding-top: 1px;
				border-radius: 50%;
				background-color: #48577c;
				color: #fff;
				font-size: 11px;
				font-family: tahoma;
			}
		}
	}

	.service-cart {
		width: 325px;
		background: #ffffff;
		box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.15);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;

		@media (max-width: 576px) {
			width: 85%;
			height: 100%;
			left: -100%;
			transition: all 0.5s ease 0s;

			&.active {
				left: 0;
			}
		}

		.service-cart-header {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			font-style: normal;
			font-weight: 500;
			font-size: 20px;
			color: #455464;
			height: 60px;
			align-items: center;
			padding: 0 20px 0 6px;

			.service-cart-header-btn {
				outline: 0;
				border: 0;
				background: transparent;
				padding: 5px;

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

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

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

			.service-cart-header-close {
				outline: 0;
				border: 0;
				background: transparent;
				padding: 5px;

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

		.service-cart-footer {
			width: 100%;
			border-top: 1px solid rgba(0, 0, 0, 0.2);
			padding: 10px 25px;

			.service-cart-footer-row {
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				padding: 5px 0;
			}
		}

		.service-cart-body {
			height: 0;
			max-height: 0;
			overflow-y: auto;

			&.open {
				height: auto;
				max-height: 180px;

				@media (max-width: 576px) {
					max-height: 400px;
				}
			}

			&::-webkit-scrollbar {
				width: 6px;
			}

			/* Track */
			&::-webkit-scrollbar-track {
				background: #f1f1f1;
				border-radius: 10px;
			}

			/* Handle */
			&::-webkit-scrollbar-thumb {
				background: rgb(161, 161, 161);
				border-radius: 10px;
			}

			/* Handle on hover */
			&::-webkit-scrollbar-thumb:hover {
				background: #555;
				border-radius: 10px;
			}

			.service-cart-item {
				padding: 15px 20px 10px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
				position: relative;

				&:last-child {
					border: 0;
				}

				button {
					position: absolute;
					left: 15px;
					top: 3px;
					outline: 0;
					border: 0;
					background: transparent;
					padding: 5px;
				}
			}

			.service-cart-item-title {
				display: flex;
				align-items: center;
				margin-bottom: 10px;

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

				h3 {
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #455464;
					margin-right: 10px;
					display: inline-block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.service-cart-item-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 5px 0;

				span {
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #455464;
				}

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

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

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

	.service-time {
		width: 170px;
		margin-top: 15px;
		display: flex;
		flex-direction: column;

		@media (max-width: 576px) {
			width: 90%;
			margin: 15px auto 10px;
			flex-direction: row;
			flex-wrap: wrap;
		}

		button {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
			width: 100%;
			height: 40px;
			background: #fff;
			text-align: center;
			color: #546e7a;
			border-radius: 4px;
			margin-bottom: 9px;
			outline: 0;
			border: 1px solid rgba(0, 0, 0, 0.1);

			@media (max-width: 576px) {
				width: calc(50% - 10px);
				margin: 5px;
				flex: 0 0 auto;
			}

			span {
				font-size: 14px;
				font-style: normal;
				font-weight: normal;
				direction: ltr;
			}

			&.selected {
				background: #48577c;
				color: #fff;
				border: 0;
			}

			&:not(.selected) {
				&:hover {
					background: #c3cfec;
				}
			}
		}
	}

	.calendarContainer {
		box-shadow: none;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		margin-top: 50px;
		width: 450px;

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

		.heading {
			position: absolute;
			width: 100%;
			left: 0px;
			top: -35px;
			margin: 0;
			background: #48577c;
			border-radius: 7px;
			color: #fff;

			.title {
				color: #fff;
				border: 0 none;
				padding: 8px ​15px 4px 15p !important;

				&:hover {
					background: transparent;
				}
			}

			.prev,
			.next {
				svg {
					fill: #fff;
				}

				&:hover {
					background: transparent;
				}
			}
		}

		.monthsList {
			.selected {
				button,
				button:hover {
					background-color: #48577c;
				}
			}
		}

		.selectToday {
			background: #48577c;
		}

		.dayWrapper {
			button {
				padding: 4px 0 0px 0 !important;
			}

			&:not(.selected) {
				button:hover {
					background-color: #dfe8ff;
				}
			}

			&.today {
				button {
					border: 3px solid #94a4cb !important;
				}
			}

			&.selected {
				button {
					background-color: #48577c;
				}
			}
		}
	}

	.service-final {
		margin-top: 80px;

		.cart-list {
			.cart-item {
				padding-bottom: 8px;
				margin-bottom: 15px;

				.cart-item-content {
					margin: 0;

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

				.cart-remove-item {
					margin-bottom: 5px;
				}

				.cart-item-details {
					span {
						margin-bottom: 2px;
					}
				}

				span.cart-item-name {
					margin-bottom: 12px;
				}

				.cart-item-total {
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #455464;

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

					strong {
						font-style: normal;
						font-weight: bold;
						font-size: 18px;
						color: #455464;

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

		.button-holder {
			.btn-back {
				float: right;
				width: 100px;
			}
		}

		.pay-items {
			margin-top: 30px;
			margin-bottom: 10px;

			&.pay-items-type {
				margin-top: 5px;

				.pay-item {
					width: auto;
				}
			}

			.pay-item {
				// margin-left: 60px;
				// width: auto;

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

.mobile-header-page-services {
	.btn-basket {
		@media (max-width: 576px) {
			display: none;
		}
	}
}

.services-card {
	.user-panel-address {
		@media (max-width: 576px) {
			padding: 10px 15px 0;
		}

		.user-address-list {
			.user-address-item {
				@media (max-width: 576px) {
					padding: 15px;
				}
			}
		}
	}
}