.referral-banner {
	background: linear-gradient(120deg, rgba(255,222,0,1) 0%, rgba(225,137,135,1) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.referral-banner > p {
	color: #161618;
	opacity: 0.6;
}

.referral-content-container {
	display: flex;
	align-items: stretch;
	gap: 17px;
}

.referral-content-container a {
	text-decoration:none;
	color: #0059C7;
}

.referral-sidebar-list {
	position: sticky;
	top: 95px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
	margin: 0;
}

.referral-sidebar-item {
	display: flex;
	align-items: center;
	background-color: #EEECED;
	opacity: 0.5;
	cursor: pointer;
}

.referral-sidebar-item-wrapper {
	min-height: 40px;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 33px 39px 23px 39px;
	padding-right: 0;
}

.referral-sidebar-item-wrapper > div {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #6FAC3A;
	color: #ffffff;
}

.referral-sidebar-item-wrapper > span {
	color: #6FAC3A;
}

.sidebar-active-tab {
	opacity: 1;
}

.referral-content {
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.content-wrapper {
	min-height: 40px;
	background-color: #EEECED;
	padding: 33px 39px 23px 39px;
}

.content-wrapper > h2 {
	margin: 0;
}

/* referral-introduction section */
.referral-introduction{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#submit-referral {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.content-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-target {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.tooltip-text {
  position: absolute;
	top: 0;
	width: 320px;
	min-height: 50px;
	display: flex;
	align-items: center;
	transform: translateX(-90%) translateY(-115%);
  background-color: #E3E3E3;
  color: #000000;
  padding: 26px 33px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.tooltip-text::after {
	position: absolute;
	right: 5.3%;
	bottom: -8px;
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: #E3E3E3;
	transform: rotate(45deg);
}

.tooltip-container:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

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

.rewards-sticky-content  {
	position: sticky;
	top: 95px;
	max-height: 520px;
}

.submit-referral-content {
	display: flex;
	align-items: stretch;
	gap: 2px;
}

.rewards-content {
	display: flex;
	gap: 2px;
}

.eligibility-content {
	display: flex;
	align-items: stretch;
	gap: 2px;
}

.additional-content {
	display: flex;
	gap: 2px;
}

.fixed-swiper {
	display: none !important;
}

.referral-wrapper .lang-menu-container {
	display: none;
}

@media screen and (max-width: 1024px) {
	.submit-referral-content {
		flex-direction: column;
	}
	.rewards-content {
		flex-direction: column;
	}
	.rewards-sticky-content {
		position: static;
		height: auto;
	}
	.rewards-sticky-content > .img-wrapper > img {
		object-position: center top;
	}
	.eligibility-content {
		flex-direction: column;
	}
	.additional-content {
		flex-direction: column;
	}
}

@media screen and (max-width: 768px) {
	.referral-content-container {
		flex-direction: column;
	}
	.rewards-sticky-content {
		display: flex;
		max-height: 100%;
	}
	.submit-referral-content .img-wrapper {
		max-height: 100%;
	}
	.submit-referral-content .img-wrapper > img {
		object-position: center top;
	}
	.referral-sidebar-list {
		display: none;
	}
	.fixed-swiper {
		z-index: 999;
		display: block !important;
		top: 0;
		width: 100%;
		background-color: #EEECED;
	}
	.referral-sidebar-item-wrapper {
		min-height: 50px;
		padding: 16px;
	}
	.referral-sidebar-item {
		opacity: 1;
	}
	.referral-sidebar-item > div {
		opacity: 0.5;
	}
	.referral-sidebar-item > span {
		opacity: 0.5;
	}
	.sidebar-active-tab > div {
		opacity: 1;
	}
	.sidebar-active-tab > span {
		opacity: 1;
	}
}

@media screen and (max-width: 540px) {
	.referral-sidebar-item-wrapper .f20 {
		font-size: 16px;
	}
}

@media screen and (max-width: 420px) {
	.referral-sidebar-item-wrapper .f20 {
		font-size: 14px;
	}
	.referral-sidebar-item-wrapper > div {
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;
	}
	.tooltip-text {
		width: 280px;
    transform: translateX(-70%) translateY(-115%);
	}
	.tooltip-text::after {
		right: 24.8%;
	}
	.content-wrapper .f20 {
		font-size: 14px;
	}
	.content-wrapper .f18 {
		font-size: 14px;
	}
}

@media screen and (max-width: 390px) {
	.tooltip-text {
		width: 200px;
    transform: translateX(-85%) translateY(-115%);
		padding: 16px;
	}
	.tooltip-text::after {
		right: 8.3%;
	}
}

@media screen and (max-width: 360px) {
	.referral-sidebar-item-wrapper .f20 {
		font-size: 12px;
	}
}