.appointment-details-main {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 80px 0
}

.appointment-details-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-width: 750px;
	width: 100%;
}

.appointment-details-card h2, .appoi-Operation-details .bookingsuccess-Operation h2 {
	direction: rtl;
	text-align: right;
	width: 100%;
	font-size: var(--main-font-size-14) !important;
	margin-bottom: 20px !important;
	color: var(--main-light-blue2) !important;
}

.appointment-details-c1, .appointment-details-c2, .appointment-details-c3 {
	margin-bottom: 20px;
	box-shadow: var(--main-box-shadow-slow);
	padding: 20px 10px;
	background-color: var(--main-white);
	border-radius: var(--main-border-radius);
}

.appointment-details-c1-in {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: -20px
}

.appointment-details-c2-in {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: -20px
}

.appointment-details-r {
	width: 50%;
	direction: rtl;
	text-align: right;
	overflow: hidden
}

.appointment-details-c1 .appointment-details-r {
	width: 100%
}

.appointment-details-r h3 {
	font-size: var(--main-font-size-10)
}

.appointment-details-c3 {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.appointment-details-c3 a, .appointment-details-cancel-btn {
	border-radius: var(--main-border-radius);
	width: 21%;
	opacity: 0.91;
	cursor: pointer;
	padding: 8px 10px;
	color: var(--main-white);
	text-align: center
}

.appointment-details-c3 a:nth-child(1), .appointment-details-c3 a:nth-child(4) {
	background-color: var(--main-green)
}

.appointment-details-c3 a:nth-child(2) {
	background-color: var(--main-green)
}

.appointment-details-c3 a:nth-child(3) {
	background-color: #E09109
}

.appointment-details-c3 a:hover, .appointment-details-cancel-btn:hover {
	opacity: 1
}

.appointment-details-cancel-btn {
	background-color: var(--main-red) !important;
}

.appointment-details-c1-fl {
	display: flex;
	justify-content: space-between;
}

#appointment-details-c1-img {
	width: 240px;
}

.appoi-Operation-details {
	position: unset !important;
	margin: 0 auto 20px !important;
	width: 750px !important;
}

.appoi-Operation-details .bookingsuccess-Operation-bank {
	justify-content: space-evenly !important;
}

.appoi-Operation-details .bookingsuccess-btn-par {
	display: flex !important;
	justify-content: center !important;
}

.appoi-Operation-details .bookingsuccess-btn {
	margin: 40px 0 20px !important;
	width: 300px;
}

.appoi-Operation-details .bookingsuccess-Operation-bank div {
	width: 18% !important
}

.appoi-Operation-details div img {
	width: 47px !important;
	height: 34px !important;
}

@media screen and (max-width: 1138px) {
	.appointment-details-c1 {
		margin-top: 60px
	}
}

@media screen and (max-width: 755px) {
	.appointment-details-card h2 {
		text-align: center;
		margin-bottom: 20px
	}

	.appointment-details-c1-fl {
		flex-direction: column-reverse;
	}

	#appointment-details-c1-img {
		width: 220px;
		margin: 0 auto;
		display: block;
	}

	.appointment-details-card {
		max-width: unset;
		width: 75%;
		margin: 0 auto
	}

	.appointment-details-c2-in {
		flex-direction: column;
	}

	.appointment-details-r, .appoi-Operation-details {
		width: 100% !important
	}

	.appointment-details-c3 {
		flex-wrap: wrap
	}

	.appointment-details-c3 a, .appointment-details-cancel-btn {
		width: 48%;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 580px) {
	.appoi-Operation-details .bookingsuccess-btn-par {
		justify-content: center !important;
		flex-direction: column;
	}

	.appoi-Operation-details .bookingsuccess-btn:first-child {
		margin: 40px auto 20px !important;
	}

	.appoi-Operation-details .bookingsuccess-btn {
		margin: 0 auto 20px !important;
		width: 200px !important;
	}
}

@media screen and (max-width: 480px) {
	.appointment-details-card {
		max-width: unset;
		width: 95%;
		margin: 0 auto
	}

	.appoi-Operation-details .bookingsuccess-Operation-bank {
		justify-content: space-between !important;
	}

	.appoi-Operation-details .bookingsuccess-Operation-bank div {
		width: 105px !important;
	}
}

@media screen and (max-width: 375px) {
	.appointment-details-c3 a, .appointment-details-cancel-btn {
		width: 98%;
	}
}

/*  Start the En Langُ*/
body[my_dir=ltr] .appointment-details-card h2, body[my_dir=ltr] .appointment-details-r {
	direction: ltr;
	text-align: left;
}

body[my_dir=ltr] #appointment-details-c1-img {
	transform: rotateY(180deg)
}

/*  End the En Langُ*/
/*  End the En Langُ*/