.content-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

h3 {
	font-size: 30px;
	line-height: 40px;
	font-weight: 700;
}

input:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.primary_button,
.doctor-list .secondary_button {
	font-size: 16px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.secondary_button a {
	text-decoration: none !important;
	color: var(--primary-red) !important;
}

@media (min-width: 768px) {
	.header-section {
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 3;
	}
}

.page-header {
	padding: 20px 0;
}

.main-page-header {
	display: flex;
	align-items: center;
	gap: 5px;
}

.filter-button {
	gap: 5px;
}

.filter-button .filter-button-label {
	min-height: 24px;
	padding-left: calc(24px + 10px);
	background: no-repeat url('../../../resources/images/doctorSearch/icon_filter.png') 0 / 24px;
}

.filter-button div {
	color: var(--primary-red) !important;
}

.card-list,
.doctor-list-length {
	padding: 0 199px;
}

@media (min-width: 768px) {
	.doctor-list-length {
		padding-bottom: 1rem;
		margin-bottom: 0;
	}
}

.card {
	border: unset;
	border-radius: 8px;
	margin-bottom: 20px;
}
@media (min-width: 768px) {
	.card {
		padding: 20px 40px;
	}
}

.card-content {
	padding: 20px;
}
@media (min-width: 768px) {
	.card-content {
		display: flex;
		flex-direction: row;
		padding: 0 !important;
	}

	.card-content .contact-info {
		width: 50%;
		padding-left: 40px;
	}

	.card-content .doctor-info {
		padding-right: 40px;
		width: calc(50% + 40px);
	}
}

.doctor-list-length {
	font-weight: 700;
}

.doctor-list-length,
.total-number,
.count-start,
.count-end,
.count-zero {
	color: var(--primary-red) !important;
}

.doctor-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-right: 1px solid #d8d8d8;
}

@media (min-width: 768px) {
	.surgery-related-info-remark {
		padding-right: 40px;
	}
}

@media (max-width: 767px) {
	.surgery-related-info-remark {
		margin-top: 10px;
	}
}

.tag-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag {
	background-color: #e5eaef;
	padding: 4px 6px;
	width: fit-content;
	border-radius: 6px;
	font-size: 14px;
	line-height: 22px;
}

@media (max-width: 767px) {
	.tag {
		font-size: 12px;
		line-height: 18px;
	}
}

.copy-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1px;
}
@media (max-width: 767px) {
	.copy-btn:not(.mobile) {
		display: none !important;
	}
}

.copy-btn:not(.mobile) {
	margin-bottom: 10px;
}

.btn-copy {
	color: var(--primary-red) !important;
	text-decoration: underline;
	cursor: pointer;
	padding-left: 0 !important;
	margin-left: 10px;
	white-space: nowrap;
}

.clinic-name {
	font-size: 14px;
	line-height: 22px;
	color: #68737a !important;
}

@media (max-width: 767px) {
	.clinic-name {
		font-size: 12px;
		line-height: 18px;
	}
}

.doctor-name {
	margin: 0;
	font-weight: 600;
	line-height: 30px;
}

@media (max-width: 767px) {
	.doctor-name {
		font-weight: 500;
		font-size: 18px;
		line-height: 28px;
	}
}

.doctor-type {
	padding-left: 26px;
	background: no-repeat 0 / 24px;
	min-height: 24px;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
}

@media (max-width: 767px) {
	.doctor-type {
		font-size: 12px;
		line-height: 18px;
	}
}

.doctor-type.male-doctor {
	background-image: url('../../../resources/images/doctorSearch/icon_male.png');
}

.doctor-type.female-doctor {
	background-image: url('../../../resources/images/doctorSearch/icon_female.png');
}

.doctor-type span {
	display: block;
	padding: 0 10px;
}

.card .surgery-related-info {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	gap: 10px;
}

.card .surgery-related-info .surgery {
	padding: unset;
	width: 24px;
	height: 24px;
	background: no-repeat 0 / 24px;
}

/* Tooltips */
.tooltips .tooltip-text {
	position: absolute;
	width: calc(100% + 22px);
	max-width: 300px;
	left: -8px;
	top: 36px;
	padding: 20px 14px;
	box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.24);
	background-color: white;
	border-radius: 8px;
	transition: opacity 0.3s ease;
	opacity: 0;
	z-index: -1;
}

.tooltips .tooltip-arrow {
	position: absolute;
	top: 28px;
	left: 0;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white;
	opacity: 0;
	z-index: -1;
}

.tooltips:hover .tooltip-text,
.tooltips:hover .tooltip-arrow {
	opacity: 1;
	z-index: 1;
}

/* card surger related info remark */
.surgery-related-info-remark ul {
	color: #68737a;
	font-size: 12px;
	line-height: 18px;
}

/* contact info */
.contact-info {
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	gap: 10px;
}

.contact-info .icon {
	width: 18px;
	height: 18px;
	background: no-repeat 0 0px / 18px;
}

.contact-info .detail {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
	gap: 2px;
}

.address-container,
.phone-number-container {
	display: flex;
}

.contact-info .sub-header {
	font-size: 14px;
	font-weight: 400;
}

@media (max-width: 767px) {
	.address-container .address {
		font-size: 12px;
	}
}

.contact-info .address-container .address,
.contact-info .phone-number-container .phone-number {
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
}

@media (max-width: 767px) {
	.contact-info .address-container .address,
	.contact-info .phone-number {
		font-size: 16px;
		line-height: 24px;
	}
}

.address-container .icon {
	min-width: 18px;
	background-image: url('../../../resources/images/doctorSearch/icon_location.png');
}

.phone-number-container .icon {
	background-image: url('../../../resources/images/doctorSearch/icon_phone.png');
}

.phone-number-container .detail .phone-number {
	text-decoration: underline;
}

.phone-number-container .detail .phone-number,
.phone-number-container .detail .phone-number > div {
	color: var(--primary-red);
}

.phone-number {
	cursor: pointer;
}

.surgery-related-info {
	margin: 80px 0 25px 0;
}

.surgery-related-info .surgery {
	padding: 5px 0 5px 0;
	padding-left: calc(10px + 18px);
	background: no-repeat 0 3px / 18px;
	color: #68737a;
	font-size: 12px;
}

.surgery-related-info .surgery.stomach {
	background-image: url('../../../resources/images/doctorSearch/icon_stomach.png');
}
.surgery-related-info .surgery.medical-fee {
	background-image: url('../../../resources/images/doctorSearch/icon_operation_fee.png');
}
.surgery-related-info .surgery.transfer-hospital {
	background-image: url('../../../resources/images/doctorSearch/icon_transfer_hospital.png');
}

.load-more-btn {
	display: flex;
}

.remarks {
	color: #68737a !important;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 30px;
}

/* Empty data alert */
.empty-data-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 120px;
	background: no-repeat url('../../../resources/images/doctorSearch/alert_circle.svg') center 20px / 80px;
}

.empty-data-error.init.doctor-search {
	background-image: url('../../../resources/images/doctorSearch/network-selection/icon_doctor.svg');
}
.empty-data-error.init.day-surgery {
	background-image: url('../../../resources/images/doctorSearch/network-selection/icon_day_surgery_center.svg');
}
.empty-data-error.init.imaging-center {
	background-image: url('../../../resources/images/doctorSearch/network-selection/icon_imaging_center.svg');
}
.empty-data-error.init.hospital {
	background-image: url('../../../resources/images/doctorSearch/network-selection/icon_hospital.svg');
}

.empty-data-error .empty-data-message {
	text-align: center;
}

.empty-data-error .empty-data-message.init {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.empty-data-error .empty-data-message.init .secondary_button {
	padding: 12px 48px;
}

@media (min-width: 768px) {
	.empty-data-error .empty-data-message.init .secondary_button {
		max-width: unset;
	}
}

/* revamp checkbox start */
input[type='checkbox'] {
	height: 24px;
	width: 24px;
	border-radius: 4px;
	border: solid 2px rgba(0, 0, 0, 0.2) !important;
	background: var(--primary-white);
	box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.05);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	flex-shrink: 0;
}

input[type='checkbox']::before {
	content: '';
	height: 24px;
	width: 24px;
	background: var(--primary-white);
}

input[type='checkbox']:hover {
	border: solid 2px rgba(0, 0, 0, 0.5);
}

input[type='checkbox']:checked {
	border: solid 2px rgba(0, 0, 0, 0.2);
	position: relative;
}

input[type='checkbox']:checked::before {
	display: block;
	position: absolute;
	left: 7px;
	top: 2px;
	width: 7px;
	height: 14px;
	border: solid var(--primary-red);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	transform: rotate(40deg);
}

input[type='checkbox']:disabled {
	border: solid 2px rgba(0, 0, 0, 0.05);
	background: var(--secondary-gainsboro);
}

/* revamp checkbox end */

/* Overlay General setting */
.overlaymain:not(.booking-error-overlay) {
	position: fixed;
	height: fit-content;
	bottom: 0;
	top: auto;
}

.overlaymain:before {
	background-color: rgba(0, 0, 0, 0.85) !important;
}

.overlaymain-content-wrapper:not(.booking-error-overlay) {
	display: flex;
	flex-direction: column;
	height: auto;
	background-color: #eeeeee;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.dialog .overlaymain-content-wrapper {
	position: fixed;
	height: fit-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #eeeeee;
	border-radius: 8px;
}

.overlaymain .overlay-close-button {
	width: 24px;
	height: 24px;
	background: no-repeat 0 / 24px;
	background-image: url('../../../resources/images/doctorSearch/icon_overlay_close.svg');
	cursor: pointer;
}

/* filter close icon */
.filter-selected-option .close-button {
	width: 18px;
	height: 18px;
	background: no-repeat 0 / 18px;
	background-image: url('../../../resources/images/doctorSearch/icon_close.svg');
	cursor: pointer;
}

/* Overlay General setting End*/

/* Filter */
.filter-overlay .overlaymain-content-wrapper {
	padding-top: 20px;
}

@media (max-width: 767px) {
	.filter-overlay .overlaymain-content-wrapper {
		height: calc(100vh - 80px);
	}
}

.close-filter-overlay-container {
	padding-right: 26px;
}

.filter-content {
	display: flex;
	flex-direction: column;
	padding: 0px 26px;
	gap: 20px;
	flex: 1;
	overflow-y: scroll;
}

.gender-input {
	display: flex;
	flex-direction: column;
}

.gender-input .sub-header {
	font-size: 12px;
	margin-bottom: 5px;
}

.gender-option-container {
	display: flex;
	align-items: center;
	gap: 30px;
}

.gender-input .gender-option {
	display: flex;
}

.gender-input .gender-option .doctor-gender {
	display: flex;
	align-items: center;
	background: no-repeat 0 / 24px;
	padding-left: 26px;
	margin-left: 12px;
}

.gender-input .gender-option .doctor-gender.male {
	background-image: url('../../../resources/images/doctorSearch/icon_male.png');
}
.gender-input .gender-option .doctor-gender.female {
	background-image: url('../../../resources/images/doctorSearch/icon_female.png');
}

.gender-input .list-container {
	border-top: 1px solid var(--primary-blue-gray);
}

.confirm-button-container {
	display: flex;
	justify-content: center;
	padding: 10px 3px;
    margin-top: -25px;
	width: 100%;
	/*background-color: white;*/
}

.confirm-button-container .primary_button {
	color: white;
}

.reset-filter-input {
	display: flex;
	justify-content: center;
	text-decoration: underline;
	font-weight: 400;
	text-align: center;
	cursor: pointer;
	margin-bottom: 1em;
}

.desktop-filter {
	display: none;
}
@media (min-width: 768px) {
	.desktop-filter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
}

@media (min-width: 768px) and (max-width: 864px) {
	.desktop-filter {
		align-items: flex-start;
	}
}

.filter-input-field-wrapper {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	gap: 10px;
}

.desktop-filter .form-group {
	margin-bottom: 0rem !important;
}

.desktop-filter .search-button-group {
	flex-wrap: wrap;
}

.desktop-filter .search-button-group > * {
	flex: 1;
	min-width: calc(108.75px - 24px);
	margin: unset;
	max-width: unset;
}

.desktop-filter .info-item-value,
.desktop-filter .doctor-name-input {
	min-width: calc(100% / 4 - 10px);
	flex: 1;
}

.desktop-filter .doctor-name-input {
	min-width: 188.75px;
}

.desktop-filter .doctor-name-input .form-group.form-group--lg .mt-form {
	max-width: unset;
}

html[lang='en'] .filter-overlay .doctor-name-input label {
	top: 18px !important;
}
html[lang='zh'] .filter-overlay .doctor-name-input label {
	top: 24px !important;
}

.desktop-filter .confirm-filter-button {
	border-radius: 56px;
	width: 80px !important;
	min-width: 80px !important;
	height: 48px;
	white-space: nowrap;
	cursor: pointer;
}

/* Disctrict filter css */
.district-input .list-container ul li.area {
	padding-left: 48px !important;
}

/* Booking button */
.booking-button-container {
	position: fixed;
	right: 100px;
	bottom: 28px;
}

@media (max-width: 767px) {
	.desktop-layout {
		display: none !important;
	}

	.mobile-layout {
		display: block !important;
	}

	.page-header {
		padding: 0 0 30px 0;
	}

	h3 {
		font-size: 24px;
		line-height: 32px;
		font-weight: 700;
	}

	.booking-button-container {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 20px 26px;
		background-color: white;
		gap: 20px;
	}

	.booking-button-container div:first-child {
		font-size: 12px;
	}

	.booking-button-container .primary_button {
		color: white;
	}
}

/* Filter opions tag */
.filter-tag-container {
	display: flex;
	margin: 33px 0;
}

.filter-tag-container.empty {
	visibility: hidden;
	margin: 30px 0 0 0;
}

@media (max-width: 767px) {
	.filter-tag-container {
		margin: 20px 0;
	}

	.filter-tag-container.empty {
		display: none;
		margin: 0;
	}
}

.filter-tag-container .option-tag {
	display: flex;
	gap: 4px;
}

.filter-tag-container .tag {
	padding: unset;
}

@media (max-width: 767px) {
	.filter-tag-container .tag {
		font-size: 12px;
	}
}

.filter-tag-container .close-button {
	width: 18px;
	height: 18px;
}

@media (min-width: 768px) {
	.filter-count-number {
		white-space: nowrap;
		padding-top: 4px;
		margin-right: 10px;
	}
}

.filter-selected-option {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.option-tag {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	background-color: #e5eaef;
	border-radius: 6px;
}

.filter-selected-option .close-button::before,
.filter-selected-option .close-button::after {
	background-color: #b4b4b4;
}

.option-tag.show-more-tag {
	cursor: pointer;
}

/* Dial Booking Overlay */
.overlaymain.booking-overlay {
	height: fit-content;
}
.booking-error-overlay,
.booking-overlay {
	z-index: 1014;
}

@media (min-width: 768px) {
	.overlaymain.booking-overlay .overlaymain-content-wrapper {
		position: fixed;
		height: fit-content;
		min-width: 766px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 30.75px 46.75px 80px 100px;
		border-radius: 8px !important;
		background-color: #eeeeee;
	}

	.overlaymain.booking-overlay .booking-number-list {
		gap: 20px;
	}
}

.overlaymain.booking-overlay .content {
	padding-top: 24px;
	padding-right: 42.75px;
}

@media (max-width: 767px) {
	.overlaymain.booking-overlay .overlaymain-content-wrapper {
		padding: 20px 26px 40px 26px;
	}

	.overlaymain.booking-overlay .content {
		padding-top: 12px;
		padding-right: 0;
	}
}

.dial-header {
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	.dial-header {
		margin-bottom: 20px;
	}
}

.booking-number-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.booking-number {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.booking-number:not(:last-child) {
	border-bottom: 1px solid #d8d8d8;
	padding-bottom: 20px;
}

.booking-number-title {
	padding-left: 34px;
	min-height: 24px;
	background: no-repeat 0 / 24px;
}

.booking-number.mainland .booking-number-title {
	background-image: url('../../../resources/images/doctorSearch/countryFlagIcon/icon_china.png');
}

.booking-number.hongkong .booking-number-title {
	background-image: url('../../../resources/images/doctorSearch/countryFlagIcon/icon_hongkong.png');
}

.booking-number.macau .booking-number-title {
	background-image: url('../../../resources/images/doctorSearch/countryFlagIcon/icon_macau.png');
}

.booking-number-value {
	text-decoration: underline;
	color: var(--primary-red) !important;
	cursor: pointer;
}

/* Dial Booking Dialog */
.booking-dial-overlay .overlaymain-content-wrapper {
	display: flex;
	flex-direction: column;
	padding: 36px 100px;
	gap: 24px;
	background-color: white;
}

.booking-dial-overlay-button-group {
	display: flex;
	gap: 14px;
}

.booking-dial-overlay-button-group .primary_button {
	order: 1;
}

.booking-dial-overlay-button-group .secondary_button {
	border-radius: 52px !important;
	border: 2px solid var(--primary-red) !important;
	text-decoration: none !important;
}

@media (max-width: 767px) {
	.booking-dial-overlay .overlaymain-content-wrapper {
		padding: 24px;
		min-width: 323px;
		align-items: unset !important;
	}

	.booking-dial-overlay-button-group {
		flex-direction: column;
		gap: 10px;
	}
}

/* Dial Booking Error Dialog */
.booking-error-overlay {
	position: relative;
}

.booking-error-overlay .overlaymain-content-wrapper {
	position: fixed;
	height: fit-content;
	min-width: 323px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 108px 100px 36px 100px;
	border-radius: 8px !important;
	background: no-repeat url('../../../resources/images/doctorSearch/icon_calendar.png') center 28px / 52px;
	background-color: #eeeeee;
}

@media (max-width: 767px) {
	.booking-error-overlay .overlaymain-content-wrapper {
		padding: 108px 24px 24px 24px;
	}
}

.booking-error-overlay .content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	line-height: 24px;
	margin: 24px 0;
}

.booking-error-overlay li::marker {
	font-size: 0.75em;
}

/* Access Error Dialog */
.access-error-overlay.booking-error-overlay .overlaymain-content-wrapper {
	padding: 36px 100px 36px 100px;
	background-image: unset;
}

@media (max-width: 767px) {
	.access-error-overlay.booking-error-overlay .overlaymain-content-wrapper {
		padding: 24px 24px 24px 24px;
	}
}

@media (min-width: 768px) {
	.doctor-name-input #ui-id-1 {
		padding-left: 0;
		padding-right: 0;
	}

	.mt-form--withlabel {
		padding-left: 0 !important;
	}

	.form-group.form-group--lg .input-wrapper .mt-form .form-control ~ label {
		padding-top: 0px !important;
		top: 10px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		font-size: 16px !important;
	}

	.form-group.form-group--lg .input-wrapper .mt-form__input-wrap.typing .form-control ~ label,
	.mt-form--notempty .form-control ~ label {
		display: none;
	}

	.mt-form .selection-label {
		font-size: 16px !important;
	}

	.selected-value {
		padding-right: 30px;
	}
}

@media (min-width: 768px) {
	.mobile {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.page-header {
		padding: 20px 0 40px 0;
	}

	.doctor-list-length {
		margin: 20px 0;
		padding: unset;
	}

	.card-list {
		padding: unset;
	}

	.copy-btn:not(.mobile) {
		display: none;
	}

	.doctor-info {
		padding-bottom: 10px;
		border-bottom: 1px solid #d8d8d8;
		border-right: unset;
	}

	.doctor-list-overlay .doctor-info {
		border-bottom: none !important
	}
}