:root {
	--black-soft: #505050;
	--placeholder: #b0b0b0;
	--border-crystal: #2e9cd4;
	--bg-crystal: linear-gradient(315deg, rgba(191, 233, 255, 0.20) 0%, rgba(218, 244, 255, 0.10) 100%);
	--text-crystal: linear-gradient(360deg, #2E9CD4 0%, #6AC4EC 100%);
	--border-diamond: #9be1e8;
	--bg-diamond: linear-gradient(140deg, rgba(220, 246, 249, 0.15) 0%, rgba(220, 246, 249, 0.35) 100%);
	--text-diamond: linear-gradient(180deg, #9BE1E8 0%, #52C7C5 100%);
	--border-emerald: #9feaad;
	--bg-emerald: linear-gradient(135deg, rgba(227, 255, 232, 0.15) 0%, rgba(177, 255, 199, 0.15) 100%);
	--text-emerald: linear-gradient(179deg, #9FEAAD 0%, #5ACD7A 100%);
}

.text-red-2{
	color: #EF6262
}
.text-green{
	color: #00B233
}

.alert-2{
	border: 1px solid var(--green-green-70, #8CD9AC);
	background: var(--green-green-96, #F0FAF4);
	color: var(--g-2, #00B233);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	position: relative;
	padding: 16px;
	line-height: 1.5;
}
	.alert-2 .title{
		color: #00661D;
		font-weight: 700;
		line-height: 20px;
	}
	.alert-2.danger .title{
		color: #B91313;
		font-weight: 700;
		line-height: 20px;
	}
	.alert-2:before{
		content: "";
		display: inline-block;
		vertical-align: top;
		background: transparent url(../images/loyalty/icon-check.png) center no-repeat;
		background-size: 20px 20px;
		width: 20px;
		height: 20px;
		margin: 5px 12px 0;
	}
	.alert-2 .content{
		display: inline-block;
		vertical-align: top;
	}
	.alert-2 p{
		line-height: 1.5;
		margin: 0;
	}
	.alert-2 .btn-close{
		position: absolute;
		top: 6px;
		right: 6px;
		color: #00661D;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    outline: none;
    box-shadow: none;
  }
  	.alert-2.danger .btn-close{
  		color: #B91313;
  	}
  	.alert-2 .btn-close:focus{
  		border: none;
  		outline: none;
  		box-shadow: none;
  	}
	.alert-2 .link{
		color: var(--g-2, #00B233);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5;
		text-decoration: underline;
		margin: 0 5px 0 0;
	}
		.alert-2 .link:hover,
		.alert-2 .link:focus{
			text-decoration: none;
		}
		.alert-2 .link.check-review{
			font-weight: bold;
			text-decoration: none;
			position: relative;
			color: #00661D;
			font-weight: 700;
		}
			.alert-2.danger .link.check-review{
				color: #B91313;
			}
			.alert-2 .link.check-review:after{
				content: "\2193";
				display: inline-block;
				margin: 0;
				font-size: 29px;
				font-weight: normal;
				position: absolute;
				top: -7px;
				right: -24px;
				line-height: 1;
			}

	.alert-2.danger{
		border: 1px solid var(--red-red-70, #FF6679);
		background: var(--red-red-96, #FFEBEB);
		color: var(--r-2, #EF6262);
	}
		.alert-2.danger .link{
			color: #FF334C;
		}
		.alert-2.danger:before{
			background-image: url(../images/loyalty/icon-danger.png);
		}

.progress.wardah{
	overflow: visible;
}
.progress.wardah .progress-bar{
	background: #54BEC8;
	position: relative;
	overflow: visible;
}
	.progress.wardah .progress-bar:after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
		background: #54BEC8;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		transform: translateY(-50%);
	}

.icon-tier{
	display: inline-block;
	background: transparent url(../images/loyalty/crystal.png) center no-repeat;
	background-size: 60px 60px;
	width: 60px;
	height: 60px;
	vertical-align: middle;
}
	.icon-tier.icon-2{
		background-image: url(../images/loyalty/emerald.png);
	}
	.icon-tier.icon-3{
		background-image: url(../images/loyalty/diamond.png);
	}
	.icon-tier.icon-upgrade{
		background-image: url(../images/loyalty/icon-upgrade.png);
		background-size: 32px 32px;
		width: 32px;
		height: 32px;
	}

#modal-loyalty-program .modal-body{
	text-align: center;
	color: var(--black-soft);
	position: relative;
}
	#modal-loyalty-program .modal-body .close,
	.modal-loyalty .modal-body .close{
		border: 0;
		outline: 0;
		position: absolute;
		top: 15px;
		right: 15px;
		background: transparent url(../images/loyalty/btn-close.png) no-repeat center;
		background-size: 24px 24px;
		width: 24px;
		height: 24px;
	}
	#modal-loyalty-program .title{
		padding: 0;
		margin: 0;
		font-style: normal;
		font-weight: 500;
		font-size: 32px;
	}
	#modal-loyalty-program .desc{
		padding: 0;
		margin: 0 0 25px;
		font-style: normal;
		font-weight: 300;
		font-size: 14px;
	}
	#modal-loyalty-program .poster{
		display: block;
		margin: 0;
		padding: 0;
		position: relative;
		outline: none;
		text-decoration: none;
	}
		#modal-loyalty-program .poster img{
			width: 100%;
			height: auto;
		}
	.modal-loyalty{
		color: #505050;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 179.9%;
		letter-spacing: 2px;
	}
		.modal-loyalty .title{
			color: #505050;
			text-align: center;
			font-size: 24px;
			font-weight: 600;
			line-height: normal;
			text-transform: uppercase;
			margin: 0 0 24px;
		}
		.modal-loyalty .desc{
			font-size: 20px;
			font-weight: 400;
			letter-spacing: 2px;
		}

#modal-loyalty-upgrade .modal-dialog{
	max-width: 600px;
}

#formRegister .form-control::placeholder,
.form-auth .form-control::placeholder{
  font-weight: 400;
	font-size: 14px;
	line-height: 15px;
	opacity: .7;
	color: var(--placeholder);
}

.btn-resend{
	background-color: var(--dark-blue);
}
	.btn-resend:hover{
		background-color: var(--green-wardah);
	}
.btn-success-light{
	padding: 8px 14px;
	border: 1px solid #48B9C7;
	color: #48B9C7;
}
	.btn-success-light:hover,
	.btn-success-light:focus{
		background: #48B9C7;
		color: #fff;
	}
.btn-success-new{
	background-color: #48B9C7;
	border: none;
	font-weight: 500;
	font-size: .875rem;
	letter-spacing: 1px;
	padding: .875rem;
	color: #fff;
}
	.btn-success-new:hover,
	.btn-success-new:focus{
		background-color:var(--dark-blue);
		color: #fff;
	}
	.btn-success-new:disabled{
		opacity: .3;
	}

#navbar-loyalty{
	position: relative;
	padding: 12px;
	background: #27C8DD;
	font-family: 'Montserrat', sans-serif		;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #FFFFFF;
	text-align: center;
}
	#navbar-loyalty .linknav{
		display: block;
		position: relative;
		outline: none;
		color: #fff;
	}
	#navbar-loyalty .bolder{
		display: inline-block;
		margin: 0 0 0 20px;
		font-size: 20px;
		font-weight: 700;
		padding: 5px 0;
		border-bottom: 1px solid #fff;
	}
	#navbar-loyalty .icon-crown{
		display: inline-block;
		position: relative;
		background: transparent url(../images/loyalty/icon-crown.png) center no-repeat;
		background-size: 24px auto;
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

.profile-box{
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 16px;
	width: 620px;
	background: #FFFFFF;
	border: 1px solid #E2E2E2;
	color: #505050;
}
	.profile-box .subtitle{
		font-weight: 500;
		text-align: left;
	}
	.profile-box.full{
		width: 100%;
		font-size: 20px;
	}
	.profile-box .info{
		position: relative;
	}
		.profile-box .info .avatar,
		.profile-box .info .name,
		.profile-box .info .nav{
			display: inline-block;
			vertical-align: middle;
			margin: 0 12px;
		}
		.profile-box .info .nav{
			margin-left: 24px;
		}
		.profile-box .info .avatar{
			width: 82px;
		}
		.profile-box .info .name{
			text-align: left;
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 20px;
			color: var(--black-soft);
		}
		.profile-box .info .name p,
		.profile-box .info .name h5{
			margin: 0;
			padding: 0;
		}
		.profile-box .info .name h5{
			font-weight: 400;
			font-size: 24px;
			line-height: 29px;
			color: #48B9C7;
		}
	.profile-box .progress{
		height: 5px;
	}
	.profile-box.full .bar{
		font-size: 14px;
	}

	.profile-box .navlink{
		position: relative;
		display: inline-block;
		outline: none;
		padding: 8px 12px;
		background: #FFFFFF;
		border: 1px solid #E2E2E2;
		margin: 0 20px 10px 0;
		font-family: 'Montserrat', sans-serif;
		font-style: normal;
		font-weight: 300;
		font-size: 14px;
		line-height: 158.4%;
		color: var(--black-soft);
		width: 280px;
	}
		.profile-box.full .navlink{
			width: 31%;
			margin: 0 2% 0 0;
		}
		.profile-box .navlink:after{
			content: "";
			display: inline-block;
			background: transparent url(../images/loyalty/icon-arrow.png) center no-repeat;
			background-size: 16px 16px;
			width: 16px;
			height: 16px;
			position: absolute;
			top: 10px;
			right: 10px;
		}
		.profile-box .navlink:before{
			content: "";
			display: inline-block;
			background: transparent url(../images/loyalty/icon-address.png) center no-repeat;
			background-size: 25px 25px;
			width: 25px;
			height: 25px;
			position: absolute;
			top: 7px;
			left: 10px;
		}
		.profile-box .navlink.beauty:before{
			background-image: url(../images/loyalty/icon-beauty.png);
		}
		.profile-box .navlink.membership:before{
			background-image: url(../images/loyalty/icon-membership.png);
		}
		.profile-box .navlink.buy:before{
			background-image: url(../images/loyalty/icon-buy.png);
		}
		.profile-box .navlink.review:before{
			background-image: url(../images/loyalty/icon-review.png);
		}
		.profile-box .navlink:nth-child(2){
			margin-right: 0;
		}
		.profile-box .navlink:nth-child(3){
			margin: 0;
		}

		.profile-box.full .navlink:nth-child(1),
		.profile-box.full .navlink:nth-child(2){
			margin-right: 2%;
		}
		.profile-box.full .navlink:nth-child(3){
			margin-right: 0;
		}

	.profile-box header{
		display: block;
		position: relative;
		padding: 0 0 12px;
		border-bottom: 1px solid rgba(80, 80, 80, 0.3);
		font-weight: 500;
		font-size: 14px;
		text-align: left;
		letter-spacing: 2px;
		color: #505050;
		margin: 0 0 25px;
	}
		.profile-box header .status{
			color: #48B9C7;
		}
		.profile-box header .btn-info{
			display: inline-block;
			position: absolute;
			top: 0;
			right: 0;
			background: transparent url(../images/loyalty/icon-info.png) center no-repeat;
			background-size: 20px 20px;
			width: 20px;
			height: 20px;
		}
		.profile-box header .link{
			display: inline-block;
			float: right;
			padding: 0;
			border-bottom: 1px solid var(--green-wardah);
		}
			.profile-box header .link:hover,
			.profile-box header .link:focus{
				border-color: transparent;
			}
	.profile-box content{
		display: block;
		position: relative;
		font-weight: 400;
		font-size: 14px;
		text-align: left;
		letter-spacing: 2px;
		color: #828282;
	}
		.profile-box content .btn-join{
			padding-left: 50px;
			padding-right: 50px;
		}

	.profile-box .box-level{
		border: 1px solid var(--border-crystal);
		background: var(--bg-crystal);
		padding: 16px;
		color: #505050;
		font-family: 'Montserrat', sans-serif;
		font-size: 18px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
		margin: 0 0 25px;
		position: relative;
	}
		.profile-box .box-level-2{
			display: inline-block;
		}
			.profile-box .box-level-2 h5{
				margin: 0;
				padding: 0;
				font-size: 48px;
				background: var(--text-crystal);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				display: inline-block;
				line-height: 1;
				font-weight: 500;
				text-transform: capitalize;
				vertical-align: middle;
			}
			.profile-box .box-level-2.level-2 h5{
				background: var(--text-diamond);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.profile-box .box-level-2.level-3 h5{
				background: var(--text-emerald);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.profile-box .box-level-2 p{
				font-size: 24px;
			}

		.profile-box .box-level.level-2{
			border: 1px solid var(--border-diamond);
			background: var(--bg-diamond);
		}
		.profile-box .box-level.level-3{
			border: 1px solid var(--border-emerald);
			background: var(--bg-emerald);
		}

		.profile-box .box-level b{
			font-weight: bold;
		}
		.profile-box .box-level:after{
			content: "";
			display: block;
			width: 9px;
			height: 9px;
			border: 2px solid #505050;
			background: transparent;
			transform: rotate(45deg) translateY(-50%);
			border-bottom-color: transparent;
			border-left-color: transparent;
			position: absolute;
			top: 50%;
			right: 24px;
		}
			.profile-box .box-level-2:after{
				display: none !important;
			}
		.profile-box .box-level:before{
			content: "";
			display: inline-block;
			width: 24px;
			height: 24px;
			background: transparent url(../images/loyalty/crystal.png) center no-repeat;
			background-size: 24px 24px;
			margin: 0 8px 0 0;
			vertical-align: middle;
		}
			.profile-box .box-level.level-2:before{
				background-image: url(../images/loyalty/diamond.png);
			}
			.profile-box .box-level.level-3:before{
				background-image: url(../images/loyalty/emerald.png);
			}

			.profile-box .box-level-2:before{
				width: 60px;
				height: 60px;
				background-size: 60px 60px;
				margin-right: 16px;
			}

	.profile-box .benefit{
		display: inline-block;
		position: relative;
		overflow: hidden;
		color: #505050;
		font-family: 'Montserrat', sans-serif;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		padding: 20px;
		text-align: left;
		border: 2px solid var(--stroke, #E2E2E2);
		margin: 0 12px;
		width: 300px;
	}
		.profile-box .benefit h5{
			color: #48B9C7;
			font-size: 20px;
			font-weight: 700;
			letter-spacing: 1.2px;
			margin: 0 0 8px;
			position: relative;
			text-transform: none;
		}
			.profile-box .benefit h5:after{
				content: "";
				background: transparent url(../images/loyalty/icon-check2.png) center no-repeat;
				background-size: 24px 24px;
				width: 24px;
				height: 24px;
				display: inline-block;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
		.profile-box .benefit p{
			margin: 0;
			line-height: 1.7;
		}

.membership-box{
	width: 100%;
	margin-top: 40px;
}

.offcanvas-loyalty{
	position: relative;
	padding: 13px 10px;
	border: 1px solid #48B9C7;
	font-size: 14px;
	color: #505050;
}
	.offcanvas-loyalty.member{
		padding: 16px;
		border: 1px solid var(--border-crystal);
		background: var(--bg-crystal);
		color: #505050;
		font-family: 'Montserrat', sans-serif;
		font-size: 18px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
	}
		.offcanvas-loyalty.member.level-2{
			border: 1px solid var(--border-diamond);
			background: var(--bg-diamond);
		}
		.offcanvas-loyalty.member.level-3{
			border: 1px solid var(--border-emerald);
			background: var(--bg-emerald);
		}
	.offcanvas-loyalty .link{
		display: block;
		border: none;
		outline: none;
		color: #505050;
		font-family: 'Montserrat', sans-serif;
		font-size: 18px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
		position: relative;
	}
		.offcanvas-loyalty .link span{
			display: inline-block;
			vertical-align: middle;
			width: 87%;
			text-align: center;
		}
		.offcanvas-loyalty .link b{
			font-weight: bold;
		}
		.offcanvas-loyalty.member .link:after{
			content: "";
			display: block;
			width: 9px;
			height: 9px;
			border: 2px solid #505050;
			background: transparent;
			transform: rotate(45deg) translateY(-50%);
			border-bottom-color: transparent;
			border-left-color: transparent;
			position: absolute;
			top: 50%;
			right: 0;
		}
		.offcanvas-loyalty.member .link:before{
			content: "";
			display: inline-block;
			width: 24px;
			height: 24px;
			background: transparent url(../images/loyalty/crystal.png) center no-repeat;
			background-size: 24px 24px;
			margin: 0;
			vertical-align: middle;
		}
			.offcanvas-loyalty.member.level-2 .link:before{
				background-image: url(../images/loyalty/diamond.png);
			}
			.offcanvas-loyalty.member.level-3 .link:before{
				background-image: url(../images/loyalty/emerald.png);
			}

.bg-auth-membership{
	background: #48B9C7 url(../images/loyalty/bg-auth-membership.png) center no-repeat;
	background-size: cover;
}

#box-auth{
	width: 500px;
	max-width: 500px;
	padding: 32px 62px;
	margin: 60px 0;
	background-color: #fff;
}
	#box-auth .title{
		font-weight: 400;
		font-size: 24px;
		text-align: center;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: #48B9C7;
		margin: 0 0 32px;
		padding: 20px 0;
		line-height: 29px;
		border: 0.5px solid rgba(80, 80, 80, 0.4);
		border-right: none;
		border-left: none;
	}
	#box-auth .icon-member-success{
		background: transparent url(../images/loyalty/icon-member-success.png) center no-repeat;
		background-size: 110px 112px;
		height: 112px;
		margin: 0 0 16px;
	}
	#box-auth .form-label{
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		color: #505050;
	}
	#box-auth .form-control{
		font-size: 14px;
		color: #505050;
	}
	#box-auth .form-control::placeholder{
		color: #B0B0B0;
	}
	#box-auth .btn-success{
		background: #48B9C7;
	}
	#box-auth .btn-success:disabled{
		opacity: .3;
	}
	#box-auth .text-error{
		color: #FF6565;
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
	}
	#box-auth .dont-receive{
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 300;
		font-size: 12px;
		line-height: 15px;
		color: rgba(80, 80, 80, 0.5);
	}
		#box-auth .dont-receive b{
			font-style: normal;
			font-weight: 500;
			font-size: 12px;
			line-height: 15px;
			color: #505050;
			display: block;
			margin: 0 0 8px;
		}

.btn-back-home{
	text-decoration: underline;
	position: absolute;
	bottom: 0;
}
	.btn-back-home:hover{
		text-decoration: none;
	}

.input-phone{
	position: relative;
}
	.input-phone:before{
		content: "+62";
		font-size: 14px;
		color: #b0b0b0;
		display: block;
		position: absolute;
		z-index: 1;
		top: 6px;
		left: 0;
		font-size: 14px;
    font-weight: 400;
    padding: 0 10px 0 0;
    border-right: 1px solid #b0b0b0;
    height: auto;
	}
		.input-phone.focus:before{
			color: #505050;
		}
	.input-phone input{
		padding-left: 45px;
	}

.navbar-notif{
	background: #DAF1F4;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.05));
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	color: #505050;
	padding: 22px 0;
	text-align: center;
}
	.navbar-notif b{
		font-weight: 700;
	}
	.navbar-notif .ic-notif,
	.navbar-notif .ic-check,
	.navbar-notif .ic-close{
		background: transparent url(../images/loyalty/icon-notif.png) center no-repeat;
		background-size: 20px 20px;
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: bottom;
	}
		.navbar-notif .ic-check{
			background-image: url(../images/loyalty/icon-check.png);
		}
		.navbar-notif .ic-close{
			background-image: url(../images/loyalty/btn-close.png);
			text-decoration: none;
			outline: none;
		}
			.navbar-notif .ic-close:focus,
			.navbar-notif .ic-close:active{
				outline: none !important;
				border: none !important;
				box-shadow: none !important;
			}

	.navbar-notif.alert2{
		position: absolute;
		top: 100%;
		background: #E3FFEB;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
		padding: 14px 16px;
		color: #505050;
		font-size: 14px;
		font-family: Montserrat;
		font-style: normal;
		font-weight: 400;
		line-height: 25px;
		left: 50%;
		transform: translateX(-50%);
	}
		.navbar-notif.alert2 .icon,
		.navbar-notif.alert2 .info{
			vertical-align: middle;
		}

.product-review{
	position: relative;
	display: block;
	color: #505050;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-align: center;
	padding: 30px 0;
}
	.product-review header,
	.product-review content{
		display: block;
		position: relative;
	}

	.product-review .user-status{
		color: rgba(80, 80, 80, 0.75);
		padding: 30px 0;
	}
	.product-review .user-status p{
		line-height: 1;
	}
	.product-review .user-status b{
		font-weight: bold;
		color: #48B9C7;
	}

	.product-review .box-submit{
		border: 1px solid #E2E2E2;
		background: #FFF;
		padding: 16px;
		color: #8C8E90;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		position: relative;
		text-align: left;
		max-width: 621px;
		width: 621px;
		display: inline-block;
		margin: 30px 0;
	}
		.product-review .box-submit h6{
			color: #505050;
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			padding: 0;
			margin: 0;
		}
		.product-review .box-submit h5{
			color: #505050;
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			padding: 0;
			margin: 0;
		}
		.product-review .box-submit .desc{
			line-height: 1.5;
			margin: 0;
		}
		.product-review .box-submit .form-label{
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			color: #505050;
		}
			.product-review .box-submit .label-rating{
				font-size: 12px;
				font-weight: 700;
			}
		.product-review .box-submit .form-control{
			padding: 10px 0;
			color: #505050;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
			.product-review .box-submit .form-control:placeholder{
				color: #B0B0B0;
				font-size: 12px;
			}
		.product-review .box-submit .star,
		.product-review .box-submit .rating{
			font-size: 28px;
			color: #48B9C7;
		}
		.product-review .box-submit .rating{
			color: #CACDCE;
		}
			.product-review .box-submit .star strong,
			.product-review .box-submit .rating strong{
				color: rgba(84, 84, 84, 0.50);
				font-weight: 700;
				line-height: 30px;
			}
		.product-review .box-submit .date{
			font-size: 14px;
		}
		.product-review .box-submit .content{
			font-size: 16px;
			line-height: 1.7;
		}

	.product-review .review-list{
		margin: 0;
		padding: 30px 0;
		list-style: none;
		position: relative;
		display: inline-block;
		text-align: left;
		width: 620px;
		color: #505050;
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
	}
		.product-review .review-list li{
			display: flex;
			position: relative;
			list-style: none;
			margin: 0;
			padding: 30px 0;
			border-top: 1px solid #bbb;
		}
			.product-review .review-list li .info,
			.product-review .review-list li .review{
				position: relative;
			}
			.product-review .review-list li .info{
				width: 280px;
				flex-shrink: 0;
			}
			.product-review .review-list li .review{
				flex-grow: 1;
			}
			.product-review .review-list li .info .meta{
				position: relative;
				display: flex;
			}
				.product-review .review-list li .info .meta .avatar{
					width: 65px;
					height: 65px;
					vertical-align: top;
					position: relative;
					overflow: hidden;
					border-radius: 50%;
					flex-shrink: 0;
					background: #ccc;
				}
					.product-review .review-list li .info .meta .avatar img{
						height: 100%;
						position: relative;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				.product-review .review-list li .info .meta .info{
					vertical-align: top;
					flex-grow: 1;
					color: var(--black, #545454);
					font-size: 14px;
					width: auto;
				}
					.product-review .review-list li .info .meta .info p{
						line-height: 1.5;
						margin: 0;
					}
					.product-review .review-list li .info .meta .info h6{
						font-size: 18px;
						font-weight: 700;
						line-height: 1.5;
						margin: 0;
					}
				.product-review .review-list li .info .checklist{
					color: var(--dark-blue-1, #006F79);
					font-size: 16px;
					font-weight: 500;
					line-height: 30px;
					letter-spacing: 2px;
				}
			.product-review .review-list li .review .star{
				color: var(--black, #545454);
				font-size: 20px;
				font-weight: 700;
				line-height: 30px;
				margin: 0 0 8px;
			}
				.product-review .review-list li .review .star .fa-star{
					opacity: .5;
				}
				.product-review .review-list li .review .star .text-blue{
					opacity: 1;
					color: #48B9C7;
				}
				.product-review .review-list li .review p{
					margin: 0 0 8px;
				}

	.product-review .product-rating{
		display: inline-block;
		width: 620px;
		position: relative;
		color: #505050;
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		text-align: center;
		padding: 30px 0;
	}
		.product-review .product-rating .summary,
		.product-review .product-rating .starlist{
			margin: 0;
			padding: 0;
			position: relative;
			display: inline-block;
			vertical-align: top;
		}
			.product-review .product-rating .summary{
				margin-right: 32px;
			}
			.product-review .product-rating .summary .rating{
				font-size: 32px;
				letter-spacing: 3.833px;
				text-transform: uppercase;
				margin: 0 0 5px;
			}
				.product-review .product-rating .summary .rating b{
					color: #48B9C7;
					font-size: 40px;
					font-weight: 700;
				}
			.product-review .product-rating .summary .star{
				margin: 0 0 5px;
				font-size: 28px;
				color: #ccc;
			}
			.product-review .product-rating .starlist ul{
				display: block;
				margin: 0;
				padding: 0;
				list-style: none;
			}
				.product-review .product-rating .starlist ul li{
					display: block;
					margin: 0 0 10px;
					padding: 0;
					position: relative;
					clear: both;
					font-size: 10px;
				}
					.product-review .product-rating .starlist ul li:after{
						content: "";
						height: 1px;
						clear: both;
					}
			.product-review .product-rating .starlist .star,
			.product-review .product-rating .starlist .slide,
			.product-review .product-rating .starlist .num{
				margin: 0 10px 0 0;
				display: inline-block;
				vertical-align: middle;
			}
			.product-review .product-rating .starlist .star{
				font-size: 12px;
				color: #eee;
			}
			.product-review .product-rating .starlist .slide{
				width: 70px;
			}
				.product-review .product-rating .starlist .slide .progress{
					height: 7px;
				}
					.product-review .product-rating .starlist .slide .progress .progress-bar{
						background-color: #48B9C7;
					}

.section-membership{
	position: relative;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1.2px;
}
	.section-membership .title{
		color: #505050;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 1.2px;
	}

.benefit{
	display: inline-block;
	position: relative;
	border: 1px solid var(--stroke, #E2E2E2);
	background: #FFF;
	padding: 16px;
	color: #505050;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	text-align: left;
	width: 350px;
	margin: 0 24px 0 0;
	vertical-align: top;
}	
	.benefit.wide{
		width: 460px;
	}
	.benefit content,
	.benefit:before{
		display: inline-block;
		position: relative;
		vertical-align: top;
		float: left;
	}
	.benefit content{
		width: 248px;
	}
		.benefit.wide content{
			width: 355px;
		}
	.benefit:before{
		content: "";
		background: transparent url(../images/loyalty/icon-discount.png) center no-repeat;
		background-size: 52px;
		width: 52px;
		height: 52px;
		margin: 0 16px 0 0;
	}
		.benefit.promo:before{
			background-image: url(../images/loyalty/icon-promo.png);
		}
		.benefit.reward:before{
			background-image: url(../images/loyalty/icon-reward.png);
		}
		.benefit.authentic:before{
			background-image: url(../images/loyalty/icon-authentic.png);
		}
		.benefit.buy:before{
			background-image: url(../images/loyalty/icon-buy.png);
		}
		.benefit.review:before{
			background-image: url(../images/loyalty/icon-review.png);
		}
		.benefit.beauty:before{
			background-image: url(../images/loyalty/icon-beauty.png);
		}
		.benefit.vto:before{
			background-image: url(../images/loyalty/icon-vto.png);
		}
		.benefit.empty:before{
			display: none;
		}
	.benefit h5{
		color: #505050;
		font-size: 18px;
		font-weight: 700;
		line-height: normal;
		letter-spacing: 1px;
		margin: 0 0 8px;
	}
		.benefit h5 b{
			color: #48B9C7;
		}
	.benefit .desc{
		color: #48B9C7;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		margin: 0 0 8px !important;
		padding: 0;
	}

.section{
	display: block;
	position: relative;
	padding: 100px 0;
	color: #505050;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1.2px;
}
	.section .tagline{
		font-weight: 600;
		font-size: 14px;
		margin: 0 0 24px;
	}
	.section .title{
		color: #505050;
		font-size: 40px;
		font-weight: 800;
		letter-spacing: 2px;
		margin: 0 0 24px;
	}
	.section .desc{
		margin: 0 0 24px;
	}
	.section .subtitle{
		color: #505050;
		font-size: 24px;
		font-weight: 700;
		line-height: normal;
		letter-spacing: 1.2px;
		margin: 0 0 24px;
	}
		.section b,
		.section .subtitle b{
			color: #48B9C7;
		}

	.section-paragon-membership{
		background: transparent url(../images/loyalty/membership.png) right bottom no-repeat;
		background-size: 550px auto;
	}

	.section-membership-benefits{
		background: var(--bg-crystal);
		padding: 40px 0;
	}
		.section-membership-benefits .bg{
			display: block;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: -1;
		}
			.section-membership-benefits .bg img{
				height: 100%;
				width: auto;
			}

	.section-membership-earn{
		background: linear-gradient(140deg, rgba(242, 254, 255, 0.15) 0%, rgba(231, 253, 255, 0.50) 100%);
		padding: 40px 0;
	}
		.section-membership-earn .bg{
			display: block;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 0;
		}
			.section-membership-earn .bg img{
				height: 100%;
				width: auto;
			}

.point-calculation{
	display: inline-block;
	position: relative;
	width: 800px;
	padding: 16px;
	border: 1px solid var(--wardah, #48B9C7);
	background: #FFF;
	color: #505050;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-align: center;
}
	.point-calculation header,
	.point-calculation content{
		display: block;
		position: relative;
	}
	.point-calculation span{
		float: left;
		width: 50%;
	}
	.point-calculation header{
		border-bottom: 1px solid rgba(80, 80, 80, 0.20);
		padding-bottom: 16px;
	}
	.point-calculation content{
		padding-top: 16px;
	}
	.point-calculation b{
		color: #505050;
	}
	.point-calculation u{
		color: #48B9C7;
		text-decoration: none;
	}
	.point-calculation .icon{
		display: inline-block;
		background: transparent url(../images/loyalty/crystal.png) center no-repeat;
		background-size: 24px 24px;
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}
		.point-calculation .icon-2{
			background-image: url(../images/loyalty/emerald.png);
		}
		.point-calculation .icon-3{
			background-image: url(../images/loyalty/diamond.png);
		}
	.point-calculation .level{
		font-style: normal;
		background: linear-gradient(360deg, #2E9CD4 0%, #6AC4EC 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
		.point-calculation .level-2{
			background: linear-gradient(179deg, #9FEAAD 0%, #5ACD7A 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.point-calculation .level-3{
			background: linear-gradient(180deg, #9BE1E8 0%, #52C7C5 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

.input-redeem-wrap{
	position: relative;
	margin: 0 0 16px;
}
	.input-redeem-wrap b{
		color: #48B9C7;
	}
.input-redeem{
	position: absolute;
	top: 20px;
	right: 0;
	overflow: hidden;
}
	.input-redeem input{
		position: absolute;
		left: -100px;
	}
	.input-redeem span{
		display: block;
		width: 24px;
		height: 15px;
		border: 2px solid var(--solid-grey);
		border-radius: 15px;
		position: relative;
		padding: 3px;
	}
		.input-redeem span:before{
			content: "";
			display: block;
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background: var(--solid-grey);
			position: absolute;
			top: 1px;
			left: 1px;
		}
	.input-redeem input:checked + span{
		border-color: var(--blue3);
	}
	.input-redeem input:checked + span:before{
		background: var(--blue3);
		left: auto;
		right: 1px;
	}

.box-summary{
	display: block;
	position: relative;
	border: 1px solid #E2E2E2;
	padding: 22px;
	color: #505050;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	text-align: left;
}
	.box-summary .title{
		color: #505050;
		font-size: 24px;
		font-weight: 600;
		line-height: 25px;
		letter-spacing: 0.2px;
		padding: 0 0 20px;
		margin: 0;
	}
	.box-summary hr{
		height: 0.5px;
		stroke-width: 0.5px;
		stroke: rgba(80, 80, 80, 0.40);
		margin: 0 0 22px;
		padding: 0;
	}
	.box-summary .item{
		color: #B0B0B0;
		font-size: 14px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.2px;
		position: relative;
		margin: 0 0 22px;
	}
		.box-summary .item:after{
			content: "";
			display: block;
			height: 0;
			clear: both;
		}
		.box-summary .item .label,
		.box-summary .item .total{
			display: inline-block;
			float: left;
			width: 70%;
			padding: 0 5px 0 0;
		}
		.box-summary .item .total{
			width: 30%;
			padding-right: 0;
			text-align: right;
			color: #505050;
			font-weight: 600;
		}
		.box-summary .item.total{
			color: #505050;
			font-size: 20px;
			font-weight: 600;
		}
			.box-summary .item.total .label{
				width: 60%;
			}
			.box-summary .item.total .total{
				width: 40%;
			}
			.box-summary .item.minus .label{
				color: #48B9C7;
			}
			.box-summary .item.minus .total{
				color: #F88080;
			}
			.box-summary .item .remove{
				color: #F88080;
				font-size: 10px;
				font-weight: 400;
				text-decoration-line: underline;
				margin: 0 0 0 10px;
			}
				.box-summary .item .remove:hover,
				.box-summary .item .remove:focus{
					text-decoration: none;
				}
	.box-summary .get_points{
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		padding: 0;
		margin: 0 0 22px;
		display: flex;
	}
		.box-summary .get_points:before{
			content: "";
			display: inline-block;
			vertical-align: top;
			background: transparent url(../images/loyalty/icon-check2.png) center no-repeat;
			background-size: 24px 24px;
			width: 32px;
			height: 24px;
			margin: 0 8px 0 0;
		}
		.box-summary .get_points span{
			display: inline-block;
		}
		.box-summary .get_points b{
			color: #48B9C7;
			font-weight: 700;
		}

.input-code{
	position: relative;
	margin: 0 0 12px;
}
	.input-code .input-group{
		margin: 12px 0 0;
	}
	.input-code .input-group input.form-control{
		border: 0.5px solid rgba(80, 80, 80, 0.40);
		padding: 14px;
		color: #B0B0B0;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		text-align: left;
		margin: 0 7px 0 0;
	}
	.input-code .input-group .btn{
		background-color: #48B9C7;
		border: none;
		font-weight: 500;
		letter-spacing: 1px;
		color: #fff;
	}

.tier{
	display: inline-block;
	width: 300px;
	position: relative;
	text-align: center;
	margin: 0 24px;
	padding: 16px;
	color: #505050;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	background: #FFF;
	box-shadow: 0px 2px 10px 0px #3EA1D2;
	border: 1px solid #3EA1D2;
}
	.tier .thumb{
		position: relative;
	}
		.tier .thumb img{
			width: 80%;
			height: auto;
		}
	.tier h5{
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 1.2px;
		background: linear-gradient(360deg, #2E9CD4 0%, #6AC4EC 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 0;
		margin: 0 0 8;
		line-height: 1;
	}
	.tier p{
		margin: 0;
	}

	.tier-2{
		box-shadow: 0px 2px 10px 0px #52C7C5;
		border: 1px solid #52C7C5;
	}
	.tier-2 h5{
		background: linear-gradient(180deg, #9BE1E8 0%, #52C7C5 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.tier-3{
		box-shadow: 0px 2px 10px 0px #7EDC94;
		border: 1px solid #7EDC94;
	}
	.tier-3 h5{
		background: linear-gradient(179deg, #9FEAAD 0%, #5ACD7A 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

.inapp{
	height: 700px;
	max-width: 1280px; 
  min-height: 550px;
  width: 100%;
}

@media (min-width: 992px) AND (max-width: 1199px){

	.benefit.wide {
    width: 400px;
	}
		.benefit.wide content {
    	width: 298px;
		}

	.profile-box .benefit {
    padding: 16px;
    margin: 0px 1px;
    width: 294px;
	}

	.tier {
  	width: 250px;
    margin: 0 14px;
    font-size: 12px;
  }
  	.tier h5 {
	    font-size: 18px;
	  }

	.inapp{
		width: 850px;
		height: 595px;
	}
}

@media (min-width: 992px) {

	.w-lg-50{
		width: 50% !important;
	}
	.w-lg-75{
		width: 75% !important;
	}

}

@media (min-width: 1200px){

	.w-xl-75{
		width: 75% !important;
	}

	.section-paragon-membership{
		background-size: auto 100%;
		background-position: right center;
	}

}

@media (min-width: 1440px){

	.benefit{
		width: 417px;
		margin-right: 15px;
	}	
		.benefit content{
			width: 315px;
		}

}