:root {
	/* Brand Colors */
	--color-primary: #07b53b;
	--color-starbucks-green: #00A862;
	--color-starbucks-dark-green: #00643C;
	--color-active-green: #00C13E;
	--color-link-green: #19B60F;
	--color-gold: #BEA76B;
	--color-gold-star: #D5AB3D;
	--color-red: #FF334B;

	/* Text Colors */
	--color-black: #000000;
	--color-text-primary: #111111;
	--color-text-dark: #555555;
	--color-text-gray: #777777;
	--color-text-medium: #848484;
	--color-text-light: #949494;
	--color-text-muted: #969696;
	--color-text-dim: #616161;
	--color-text-status: #707070;
	--color-white: #ffffff;

	/* Background Colors */
	--color-bg-page: #FCFCFC;
	--color-bg-light: #EFEFEF;
	--color-bg-muted: #E8E8E8;
	--color-bg-disabled: #D0D3D9;
	--color-bg-progress: #C1C1C1;

	/* Border Colors */
	--color-border: #C8C8C8;
	--color-border-light: #B7B7B7;
	--color-border-input: #BFBFBF;
	--color-border-divider: #707070;
	--color-border-subtle: #DFDFDF;
	--color-border-card: #EFF2F5;

	/* Misc */
	--color-unchecked: #E4E4E4;
	--color-promotion-overlay: rgba(255, 255, 255, 0.8);

	/* Shadows */
	--shadow-default: 0px 3px 16px 3px rgba(155, 155, 155, 0.5);
	--shadow-light: 0px 3px 16px 3px rgba(155, 155, 155, 0.3);
}

@font-face {
	font-family: 'fontawesome_solid';
	src: url('../fonts/fa-solid-900.woff2') format('woff2'),
		url('../fonts/fa-solid-900.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif, "Apple Color Emoji", "Noto Color Emoji";
	-webkit-text-size-adjust: none;
	-webkit-focus-ring-color: transparent;
	outline: 0 !important;
	font-size: 14px;
	line-height: 1.43em;
	font-weight: 400;
	background: var(--color-bg-page);
	height: 100%;
}

html {
	height: 100%;
}

a:hover {
	text-decoration: none;
}

h1,
h2 {
	margin: 0;
}

h1 {
	box-sizing: border-box;
	width: 100%;
	font-size: 20px;
}

label {
	margin-bottom: unset;
}

.txt-green {
	color: var(--color-primary);
}

.txt-red {
	color: var(--color-red);
}

.txt-lightgray {
	color: var(--color-text-gray);
}

.txt-darkgray {
	color: var(--color-text-dark);
}

.txt-gold {
	color: var(--color-gold);
}

.txt-bold {
	font-weight: 600;
}

.txt-font-sm {
	font-size: 14px;
}

.bg-white {
	background: var(--color-white);
}

.txt-center {
	text-align: center;
}

.box_shadow {
	-webkit-box-shadow: var(--shadow-default);
	-moz-box-shadow: var(--shadow-default);
	box-shadow: var(--shadow-default);
}

.card-box {
	background: var(--color-white);
	-webkit-box-shadow: var(--shadow-default);
	-moz-box-shadow: var(--shadow-default);
	box-shadow: var(--shadow-default);
	width: 100%;
	border-radius: 10px;
	margin-bottom: 15px;
	display: block;
}

.select-brand-box {
	padding: 20px 15px;
}

.brand-logo {
	text-align: center;
}

.brand-logo img {
	width: 100%;
	position: relative;
	top: 50px;
	border-radius: 50%;
}

.card-top {
	padding: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	background-size: cover;
}

.promotion-box {
	background-color: var(--color-promotion-overlay);
	border-radius: 8px;
	padding: 10px;
}

.promotion-title {
	color: var(--color-text-primary);
	font-size: 1em;
	margin-bottom: 0;
}

.promotion-date {
	color: var(--color-primary);
	font-size: 0.75em;
}

.promotion-content {
	color: var(--color-text-primary);
	font-size: 0.8em;
	margin-bottom: 0;
	line-height: 1.2em;
}

.card-bottom {
	padding: 25px 10px;
}

.card-bottom .col-8 {
	padding: 0;
}

.brand-name {
	color: var(--color-text-primary);
	font-size: 1.4em;
	margin-bottom: 10px;
	font-weight: bold;
}

.brand-description {
	font-size: 1em;
	color: var(--color-text-gray);
	margin-bottom: 0;
	line-height: 1.3em;
}

@media screen and (max-width: 320px) {
	.card-bottom {
		padding: 15px 10px;
	}

	.brand-name {
		font-size: 1.25em;
		margin-bottom: 5px
	}

	.brand-description {
		font-size: 0.95em;
	}
}

/* owl carousel */
.owl-nav.disabled+.owl-dots {
	position: absolute;
	left: 50%;
	bottom: 3%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.owl-dots .owl-dot span {
	width: 7px;
	height: 7px;
	margin: 3px;
}

/* END owl carousel */
/* Term and condition */
.t_c-box {
	padding: 20px 0 90px 0;
}

.t_c-box h2 {
	font-size: 1.3em;
	margin-bottom: 20px;
}

.t_c-logo {
	display: block;
	text-align: center;
}

.t_c-logo img {
	width: 65px;
}

.t_c-box .brand-name {
	color: var(--color-text-primary);
	font-size: 1.15em;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.t_c-detail {
	background: var(--color-white);
	padding: 15px;
	font-size: 1em;
	color: var(--color-text-gray);
	height: 60%;
	overflow: scroll;
	margin: 0 15px;
	word-wrap: break-word;
}

.t_c-detail p {
	word-wrap: break-word;
}

.t_c-agree {
	color: var(--color-text-primary);
	font-size: 1.2em;
	margin-top: 20px;
	padding-left: 30px;
}

.r-u_sb {
	padding: 15px 15px 0 15px;
	margin-bottom: 0;
	font-size: 1.23em;
}

@media screen and (max-width: 340px) {
	.t_c-box {
		padding: 20px 0 70px 0;
	}

	.t_c-box .brand-name {
		font-size: 1em;
	}

	.t_c-detail {
		font-size: 0.9em;
	}

	.t_c-agree {
		font-size: 1.1em;
	}

	.t_c-box h2 {
		font-size: 1.2em;
	}

	.t_c-logo img {
		width: 57px;
	}

	.r-u_sb {
		font-size: 1.15em;
	}
}

@media screen and (max-height: 690px) {
	.t_c-detail {
		height: 50%;
	}
}

/* END Term and condition */

/* Button on tne bottom */
.position-btn-bottom {
	position: fixed;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 100%;
	background: var(--color-bg-page);
	margin-bottom: env(safe-area-inset-bottom);
}

.t_c-agree {
	padding-bottom: env(safe-area-inset-bottom, 50px);
}

.box-button.box-button-ce {
	padding: 0px 5px 5px 5px;
	border: 0;
	margin-bottom: 0px;
}

.box-button.box-button-ce li {
	padding: 4px;
	list-style: none;
}

.box-button.box-button-ce button {
	font-size: 17px;
	margin-bottom: 0;
	color: var(--color-white);
	width: 100%;
	border: 0;
	height: 50px;
}

.button-type-ae {
	background-color: var(--color-primary);
	color: var(--color-white);
	height: 41px;
	border-radius: 4px;
}

button:focus {
	outline: 0;
}

.btn-white {
	background: var(--color-white) !important;
	color: var(--color-primary) !important;
	border: solid 1px var(--color-primary) !important;
	padding: 5px !important;
	display: block;
	border-radius: 5px;
}

@media screen and (max-width: 375px) {
	.box-button.box-button-ce button {
		font-size: 16px;
	}
}

@media screen and (max-width: 340px) {
	.box-button.box-button-ce button {
		font-size: 15px;
		height: 40px;
	}
}

/* END Button on tne bottom */
.rlp-logo {
	height: 20px;
	margin-bottom: 15px;
}

.styled-checkbox {
	opacity: 0;
	position: absolute;
}

.styled-checkbox+label::before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	width: 23px;
	height: 23px;
	background: var(--color-white);
	border: solid 1px var(--color-border-light);
	border-radius: 50%;

	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.styled-checkbox:checked+label::before {
	background: var(--color-primary);
	border: none;
}

.styled-checkbox:checked+label::after {
	content: "\f00c";
	font-family: 'fontawesome_solid';
	color: var(--color-white);
	position: absolute;
	margin-top: 1px;
	left: 1px;
	background: unset;
	width: 23px;
	height: 23px;
	font-size: 0.9em;
	text-align: center;
	transform: translate(76%, 4%);
}

.keep-login .styled-checkbox:checked+label::after {
	/* margin-top: 6px; */
}

@media screen and (max-width: 340px) {
	.styled-checkbox+label::before {
		width: 20px;
		height: 20px;
	}

	.styled-checkbox:checked+label::after {
		height: 20px;
	}
}

@media screen and (max-width: 320px) {
	.styled-checkbox:checked+label::after {
		width: 23px;
		height: 20px;
	}
}

/* My card */
.my-card_box {
	padding: 15px;
	padding-bottom: 25px;
}

.card-info {
	background: var(--color-white);
	border-radius: 10px;
}

.my-card img {
	width: 100%;
}

.card-about {
	font-size: 1em;
	padding: 7px 0px
}

.card-about ul {
	padding-left: 0;
}

.card-about ul li {
	list-style: none;
	width: 50%;
}

.card-about ul li:first-child {
	border-right: 1px solid var(--color-border-divider);
	text-align: right;
	padding-right: 15px;
}

.card-about ul li:last-child {
	padding-left: 15px;
}

.card-about ul li span {
	color: var(--color-text-light);
	font-size: 1.05em;
}

.card-about ul li h2 label {
	margin-right: 7px;
	margin-bottom: 0;
}

.starbucks-level {
	font-size: 1.4em;
}

.c-barcode img {
	width: 100%;
}

.c-barcode span {
	color: var(--color-text-primary);
	font-size: 1.3em;
	text-align: center;
	display: block;
	margin-top: 2px;
	letter-spacing: 1px;
}

.c-topup {
	display: block;
	text-align: center;
	padding-top: 10px;
}

.c-topup a {
	background: var(--color-primary);
	padding: 15px 10px;
	color: var(--color-white) !important;
	font-size: 1.15em;
	display: inline-block;
	border-radius: 25px;
	text-decoration: none;
	width: 82%;
}

@media screen and (max-width: 340px) {
	.c-topup a {
		padding: 13px 0;
	}
}

/* END My Card */
.progress {
	margin-top: 5px;
	border-radius: 15px;
	background: var(--color-bg-progress);
}

.progress-bar {
	background: var(--color-primary);
}

.txt-starbucks {
	color: var(--color-starbucks-green);
}

.txt-starbucks_dark {
	color: var(--color-starbucks-dark-green);
}

.upto h3 {
	line-height: 0.6em;
	color: var(--color-text-medium);
	font-size: 1.7em;
	margin-bottom: 0;
}

.upto p {
	margin-bottom: 0;
	font-size: 1.3em;
	font-weight: 600;
}

@media screen and (max-width: 375px) {
	.remark label {
		margin-bottom: 0;
	}
}

.remark .remark-main {
	font-size: 14px;
	color: var(--color-text-light);
}

.remark .remark-sub {
	font-size: 14px;
	color: var(--color-text-light);
	word-wrap: break-word;
}

.logout {
	color: var(--color-text-primary);
	font-size: 1.2em;
	position: fixed;
	bottom: 0;
	right: 10px;
}

.ic-logout::before {
	content: '\f2f5';
	font-family: 'fontawesome_solid';
	font-size: 1em;
	margin-right: 5px;
	color: var(--color-text-primary);
}

.owl-stage {
	padding-left: 0 !important;
}

.my-balance {
	margin-bottom: 7px;
}

.my-balance h2 {
	margin-bottom: 0;
	font-size: 2.5em;
	color: var(--color-black) !important;
}

.my-balance h2 label {
	margin-bottom: 0;
	position: relative;
	z-index: 1049;
}

.my-balance span {
	color: var(--color-text-medium);
	font-size: 13px;
}

.star-next-reward h1 {
	font-size: 1.7em !important;
}

.star-next-reward label {
	margin-bottom: 0;
}

.star-next-reward h1 .lb-sub {
	font-size: 14px;
}

.star-next-reward .lb-sub {
	color: var(--color-text-medium);
	font-size: 14px;
}

.keep-login {
	background: var(--color-bg-light);
	width: 100%;
	padding: 15px 0;
	padding-left: 20px;
	margin-top: 40px;
	/* margin-bottom: env(safe-area-inset-bottom); */
}

.keep-login .styled-checkbox+label::before {
	margin-right: 3px;
}

.keep-login .styled-checkbox:checked+label::after {
	left: -10px;
	margin-top: 3px;
	margin-left: 0 !important;
}

.keep-login input {
	position: absolute;
}

.topup-box {
	padding: 15px 10px;
}

.btn-topup {
	padding: 5px 7px;
}

.btn-topup a,
.btn-topup button {
	padding: 12px;
	width: 100%;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-text-primary);
	border-radius: 4px;
	display: block;
	text-align: center;
	font-size: 16px;
}

.btn-topup a.active,
.btn-topup button.active {
	border: 2px solid var(--color-active-green);
}

.input-amount {
	padding: 25px 10px 15px 10px;
	width: 100%;
}

.input-amount h2 {
	font-size: 17px;
}

.input-amount input {
	margin-top: 5px;
	text-align: right;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid var(--color-border-input);
	background: var(--color-bg-page);
	color: var(--color-text-primary);
	outline: none !important;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	line-height: 1em !important;
	font-size: 26px;
}

.input-amount label {
	margin-top: 5px;
	margin-bottom: 0;
	text-align: left;
	font-weight: normal;
	font-size: 12px;
}

.ic-warning::before {
	content: '\f071';
	font-family: 'fontawesome_solid';
	font-size: 1em;
	margin: 0 5px;
	color: var(--color-red);
}

@media screen and (max-width: 320px) {

	.btn-topup a,
	.btn-topup button {
		font-size: 15px;
	}

	.input-amount h2 {
		font-size: 16px;
	}

	.input-amount input {
		font-size: 25px;
	}

	.input-amount label {
		font-size: 11px;
	}
}

::-webkit-input-placeholder {
	line-height: normal !important;
}

:-moz-placeholder {
	line-height: normal !important;
}

::-moz-placeholder {
	line-height: normal !important;
}

:-ms-input-placeholder {
	line-height: normal !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none !important;
}

input:focus {
	outline-width: 0;
}

.box-button button:disabled {
	background-color: var(--color-bg-disabled);
}

.status-box {
	padding: 25px;
}

.process-status {
	width: 100%;
	padding-bottom: 70px;
}

.process-status img {
	width: 120px;
}

.success-box img {
	width: 60% !important;
}

.stattus-body {
	margin-top: 15px;
}

.stattus-body h2 {
	font-size: 1.5em;
	margin-bottom: 17px;
	font-weight: 600;
}

.stattus-body p {
	margin-bottom: 3px;
	font-size: 1.15em;
	color: var(--color-text-status);
}

.stattus-body .total-amount {
	font-size: 2.4em;
	margin-top: 20px;
	font-weight: 600;
}

.ic-check::before {
	content: "\f00c";
	font-family: 'fontawesome_solid';
	color: var(--color-white);
	left: 19px;
	margin-top: 2px;
	width: 1px;
	height: 1px;
	font-size: 0.6em;
	background: var(--color-active-green);
	border-radius: 50%;
	padding: 5px;
	margin-right: 7px;
}

.error-box img {
	width: 70px;
}

.error-box .stattus-body h2 {
	margin-bottom: 10px;
}

.error-box .stattus-body p {
	color: var(--color-text-gray);
}

.stattus-body a {
	/* color: #4270ED;
		text-decoration: underline; */
	font-size: 1.2em;
	margin-top: 20px;
	display: block;
}

.env-position {
	/* padding-bottom: env(safe-area-inset-bottom); */
}

@media screen and (max-width: 340px) {
	body {
		font-size: 0.75em;
	}

	.process-status img {
		/* width: 100px; */
	}

	.stattus-body h2 {
		margin-bottom: 5px;
	}

	.error-box img {
		width: 65px;
	}
}

/* Modal Popup */
.modal-content {
	border-radius: 10px;
	margin: 12px;
}

.btn-rm {
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 1.35em;
	text-transform: uppercase;
	padding: 10px;
	border-radius: 0;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	width: 100%;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.btn-rm:focus {
	outline: none;
	box-shadow: none;
}

#ModalCardAlert .modal-footer {
	padding: 0;
}

#ModalCardAlert .modal-header {
	border-bottom: none;
	padding: 0;
}

#ModalCardAlert .modal-body {
	font-size: 1.4em;
	color: var(--color-text-gray);
	padding: 0;
}

.modal-header .close {
	font-size: 3em;
	padding: 0px 5px;
	position: absolute;
	right: 18px;
	z-index: 999;
	top: 15px;
}

.modal-body img {
	border-radius: 5px;
}

/* END Modal Popup */

.owl-stage,
.owl-item,
.item {
	display: flex !important;
}

.banner-txt {
	display: flex !important;
	height: 100%;
}

.owl-item {
	padding: 2px;
}

.c-title {
	font-size: 15px;
	margin-bottom: 7px;
	text-transform: uppercase;
	font-weight: 600;
}

.st-promotion__card {
	border: 1px dashed var(--color-text-light);
	border-radius: 6px;
	width: 100%;
	padding: 5px;
}

.st-promotion .st-promotion__card h2 {
	font-size: 1.2em;
	font-weight: 600;
	color: var(--color-text-primary);
	text-transform: uppercase;
	line-height: 1em;
	margin-top: 3px;
}

.st-promotion .st-promotion__card label {
	font-size: 1.05em;
	color: var(--color-primary);
	margin-bottom: 0;
}

.st-promotion__card a {
	width: 100%;
	text-align: center;
	background: var(--color-bg-muted);
	display: block;
	padding: 5px;
	outline: 0;
	appearance: none;
	-webkit-appearance: none;
}

.rm-link {
	color: var(--color-text-dim);
	font-size: 1.15em;
}

.ask-member {
	padding: 15px;
}

.ask-member .r-u_sb label {
	margin: 10px 0 20px 0;
}

.ask-member .t_c-logo img {
	width: 120px;
	border-radius: unset;
}

.btn-lang {
	text-align: right;
	padding-right: 15px;
	font-size: 14px;
	line-height: 5px;
}

.btn-lang a {
	color: var(--color-text-muted);
	display: inline-block;
	padding: 0 5px;
	font-weight: 600;
}

.lang-active {
	color: var(--color-primary) !important;
}

.agree-box.term-accepted {
	padding: 20px 0 30px 0 !important;
}

.agree-box.term-accepted .agree-body {
	display: none;
}

.cardtheme_link {
	text-align: right;
	margin-top: 10px;
}

.cardtheme_link a {
	text-align: right;
	color: var(--color-text-muted);
	font-size: 14px;
	text-decoration: underline !important;
	text-underline-offset: 5px;
}

.cardtheme_link a:visited,
.cardtheme_link a:hover,
.cardtheme_link a:focus {
	color: var(--color-text-muted);
}

.cardtheme_link a::before {
	content: "\f304";
	font-family: 'fontawesome_solid';
	color: var(--color-text-muted);
	margin-right: 5px;
}

.card-theme {
	margin-bottom: 0;
}

.card-theme img {
	width: 100%;
	border-radius: 15px;
	border: 1px solid var(--color-border-card);
}

.theme_body {
	padding: 15px;
	padding-bottom: 130px;
}

.blind {
	margin: -1px;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip: rect(0, 0, 0, 0);
	position: absolute;
}

.elmCheck label:before,
.notice:before {
	margin: 11px 10px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--color-white);
	padding: 3px 5px;
	-webkit-box-shadow: var(--shadow-light);
	-moz-box-shadow: var(--shadow-light);
	box-shadow: var(--shadow-light);
}

.boxcard .elmCheck label:before {
	content: "\f00c";
	font-family: 'fontawesome_solid';
	color: var(--color-unchecked);
	position: absolute;
	font-size: 13px;
}

.boxcard .elmCheck input:checked+label:before {
	content: "\f00c";
	font-family: 'fontawesome_solid';
	color: var(--color-black);
	position: absolute;
}

.box-semicard {
	margin-bottom: 10px;
}

.title_selectcard {
	font-size: 17px;
	color: var(--color-black);
	margin-bottom: 15px;
}

.card_remark {
	color: var(--color-text-medium);
	padding: 10px;
}

.card_remark p {
	margin-bottom: 0;
	line-height: 16px;
	font-size: 14px;
}

@media screen and (max-width: 340px) {

	.elmCheck label:before,
	.notice:before {
		padding: 4px 5px;
	}
}

@media screen and (max-width: 320px) {
	.cardtheme_link a {
		font-size: 13px;
	}

	.my-balance span {
		font-size: 11px;
	}

	.elmCheck label:before,
	.notice:before {
		width: 22px;
		height: 22px;
		padding: 3px 4px;
	}

	.c-title {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.remark .remark-main {
		font-size: 12px;
	}

	.remark .remark-sub {
		font-size: 12px;
	}

	.star-next-reward h1 .lb-sub {
		font-size: 12px;
	}
}

.framecard {
	width: 70%;
}

.keep-login {
	margin-top: 0 !important;
}

/* Remark */
.remark .remark-list {
	padding-left: 20px;
	margin-bottom: 0;
}

.remark .remark-sub {
	font-size: 14px;
	color: var(--color-text-light);
}