/*
-------------------------------------------------------------|
---                   Custom Stylesheet                   ---|
---                      Monday Magic                     ---|
-------------------------------------------------------------|
                                                       INDEX |
-------------------------------------------------------------|
- FONT IMPORT
- VARIABLES
- DEFAULTS
- FORMS & BUTTONS
- HEADER
- FOOTER
- LOGIN SCREENS
- OTP BOX
- HOME SCREEN
- PROFILE SCREEN
- FAQ
- MAGIC MOMENTS
- LIFT CLUB
- POPUPS
- ACCORDIANS
- AIRTIME
-------------------------------------------------------------|
                                                 FONT IMPORT |
-------------------------------------------------------------|
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/*
-------------------------------------------------------------|
                                                   VARIABLES |
-------------------------------------------------------------|
*/

:root {

	--color-green: #00BF63;
	--color-green-alpha: rgba(0, 191, 99, 0.1);
	--color-blue: #004AAD;
	--color-blue-alpha: rgba(0, 74, 173, 0.1);
	--color-gold: #FAB411;
	--color-gold-alpha: rgba(250, 180, 17, 0.1);
	--color-coral: #FF6161;
	--color-coral-alpha: rgba(255, 97, 97, 0.1);

	--color-grey: #7F7F7F;
	--color-grey-light: #CECECE;
	--color-grey-lightest: #EEE;
	--color-grey-dark: #212121;

	--fontsize-heading-title: 46px;
	--fontsize-heading-primary: 36px;
	--fontsize-heading-secondary: 28px;
	--fontsize-heading-tertiary: 24px;
	--fontsize-heading-quarternary: 20px;
	--fontsize-body-large: 18px;
	--fontsize-body-normal: 16px;
	--fontsize-body-small: 14px;
	--fontsize-body-tiny: 12px;

	--fontfamily-body: "Inter", sans-serif;
	--fontfamily-headings: "Source Serif 4", serif;

	/*for animate lib - cut down delays in half*/
	--animate-delay: 0.2s !important;

	color-scheme: only light;
}

/*
-------------------------------------------------------------|
                                                    DEFAULTS |
-------------------------------------------------------------|
*/

html {
 	scroll-behavior: smooth;
}

body * {
 	scroll-margin-top: 10px;
}

body {
	color: var(--color-grey);
	font-size: 14px;
	font-weight: 400;
	font-family: var(--fontfamily-body);
	margin: 0;
	line-height: 1.6;
	background-color: #fff;
	padding-bottom: 65px;
}

body,
button, 
input, 
select, 
optgroup, 
textarea {
	font-family: var(--fontfamily-body);
}

.post, 
.page {
	margin: 0;
}

a:not(.button),
a:not(.button):visited,
a:not(.button):hover,
a:not(.button):focus,
a:not(.button):active {
	outline: 0;
	text-decoration: none;
	color: var(--color-coral);
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-weight: 700;
	font-family: var(--fontfamily-headings);
	color: var(--color-blue);
	line-height: 1.2;
}

h1 {
	line-height: 1.1;
	margin: 0 0 25px;
	font-size: var(--fontsize-heading-title);
}

h2 {
	font-size: var(--fontsize-heading-primary);
	margin-bottom: 0.5em;
	line-height: 1.1;
}

h3 {
	font-size: var(--fontsize-heading-secondary);
}

h4 {
	font-size: var(--fontsize-heading-tertiary);
}

h5,
h6 {
	font-size: var(--fontsize-heading-quarternary);
}

p {
	font-size: var(--fontsize-body-normal);
	line-height: 1.5;
}

ul,
ol {
	margin: 0;
	padding-left: 20px;
	font-size: var(--fontsize-body-normal);
}

.max-width-container,
.max-width {
	width: 95%;
	max-width: 325px;
	margin-left: auto;
	margin-right: auto;
}

.max-width-container .max-width-container,
.max-width .max-width-container,
.max-width-container .max-width,
.max-width .max-width {
	width: 100%;
}


body.logged-in .show-logged-out,
body:not(.logged-in) .show-logged-in {
	display: none;
}

.entry-footer {
	display: none;
}

.entry-content,
.hentry {
	margin: 0;
}

.clear:after,
.clear::before,
.clear::after,
.clear {
	clear: both;
}

.parent-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.half {
	width: 50%;
}

.third {
	width: 33.3%;
}

.twothirds {
	width: 66.6%;
}

.overflow-container {
	overflow: hidden;
}

#primary {
	margin-top: 75px;
}

.general-secondary-page h1 {
	font-size: var(--fontsize-heading-primary);
}

.general-secondary-page h2 {
	font-size: var(--fontsize-heading-secondary);
}

.general-secondary-page h3 {
	font-size: var(--fontsize-heading-tertiary);
}

.general-secondary-page h4 {
	font-size: var(--fontsize-heading-quarternary);
}

.general-secondary-page h5,
.general-secondary-page h6 {
	font-size: var(--fontsize-body-large);
}

.general-secondary-page,
.general-secondary-page p,
.general-secondary-page ul,
.general-secondary-page ol,
.general-secondary-page li,
.general-secondary-page input {
	font-size: var(--fontsize-body-small);
}

/*
-------------------------------------------------------------|
                                             FORMS & BUTTONS |
-------------------------------------------------------------|
*/

button,
.button,
input[type="submit"],
.btn,
.wc-block-components-button,
.gform_wrapper .gform-footer.gform_footer .gform_button.button {
	padding: 0 25px;
	display: block;
	font-size: var(--fontsize-body-normal);
	transition: all 0.1s ease 0s;
	border: 2px solid var(--color-blue) !important;
	position: relative;
	z-index: 1;
	color: #ffffff !important;
	background-color: var(--color-blue) !important;
	border-radius: 100px;
	height: 60px;
	line-height: 56px;
	cursor: pointer;
	font-weight: 500;
	font-family: var(--fontfamily-body);
	width: 100%;
	text-decoration: none;
	text-align: center;
}

button + button,
.button + .button,
.button + input[type="submit"],
.btn + .btn,
.wc-block-components-button + .wc-block-components-button {
	margin-top: 5px;
}

.button.blue.solid {
	color: #ffffff !important;
	border-color: var(--color-blue) !important;
	background-color: var(--color-blue) !important;
}

.button.blue.bordered {
	color: var(--color-blue) !important;
	border-color: var(--color-blue) !important;
	background-color: #ffffff !important;
}

.button.green.solid {
	color: #ffffff !important;
	border-color: var(--color-green) !important;
	background-color: var(--color-green) !important;
}

.button.green.bordered {
	color: var(--color-green) !important;
	border-color: var(--color-green) !important;
	background-color: #ffffff !important;
}

.button.coral.solid {
	color: #ffffff !important;
	border-color: var(--color-coral) !important;
	background-color: var(--color-coral) !important;
}

.button.coral.bordered {
	color: var(--color-coral) !important;
	border-color: var(--color-coral) !important;
	background-color: #ffffff !important;
}

.button.gold.solid {
	color: #ffffff !important;
	border-color: var(--color-blue) !important;
	background-color: var(--color-blue) !important;
}

.button.gold.bordered {
	color: var(--color-gold) !important;
	border-color: var(--color-gold) !important;
	background-color: #ffffff !important;
}

.button.green.solid:hover {
	color: #ffffff !important;
	border-color: var(--color-gold) !important;
	background-color: var(--color-gold) !important;
}

.button.green.bordered:hover {
	color: var(--color-gold) !important;
	border-color: var(--color-gold) !important;
	background-color: #ffffff !important;
}

.button:not(.green).solid:hover,
.gform_wrapper .gform-footer.gform_footer .gform_button.button:hover {
	color: #ffffff !important;
	border-color: var(--color-green) !important;
	background-color: var(--color-green) !important;
}

.button:not(.green).bordered:hover {
	color: var(--color-green) !important;
	border-color: var(--color-green) !important;
	background-color: #ffffff !important;
}

.button.disabled, 
.button.solid.disabled {
	background-color: var(--color-grey) !important;
	border-color: var(--color-grey) !important;
	pointer-events: none;
}
.button.bordered.disabled {
	background-color: #fff !important;
	color: var(--color-grey) !important;
	border-color: var(--color-grey) !important;
	pointer-events: none;
}

.button.blue.translucent        { background-color: var(--color-blue-alpha) !important;  color: var(--color-blue) !important;  border-color: transparent !important; }
.button.green.translucent       { background-color: var(--color-green-alpha) !important; color: var(--color-green) !important; border-color: transparent !important; }
.button.coral.translucent       { background-color: var(--color-coral-alpha) !important; color: var(--color-coral) !important; border-color: transparent !important; }
.button.gold.translucent        { background-color: var(--color-gold-alpha) !important;  color: var(--color-gold) !important;  border-color: transparent !important; }
.button.blue.translucent:hover  { background-color: var(--color-blue) !important;        color: #ffffff !important;            border-color: transparent !important; }
.button.green.translucent:hover { background-color: var(--color-green) !important;       color: #ffffff !important;            border-color: transparent !important; }
.button.coral.translucent:hover { background-color: var(--color-coral) !important;       color: #ffffff !important;            border-color: transparent !important; }
.button.gold.translucent:hover  { background-color: var(--color-gold) !important;        color: #ffffff !important;            border-color: transparent !important; }

.button svg {
	width: auto;
	height: 16px;
	vertical-align: -2px;
	margin-right: 5px;
}

select.custom-dropdown:not(.select2-hidden-accessible) {
	opacity: 0;
}

.custom-dropdown + .select2 .select2-selection {
	border-radius: 13px;
	padding: 0 20px !important;
	position: relative;
	border: 1px solid var(--color-grey-light);
	background-color: #fff;
	height: 46px;
}

.custom-dropdown + .select2 .select2-selection .select2-selection__rendered {
	line-height: 44px;
	padding: 0;
	font-size: var(--fontsize-body-small);
	color: var(--color-grey);
	font-weight: 500;
}

.custom-dropdown + .select2 .select2-selection .select2-selection__arrow {
	position: absolute;
	border-style: solid;
	border-width: 0 1px 1px 0;
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	border-color: var(--color-grey);
	top: 14px;
	right: 15px;
}

.custom-dropdown + .select2 .select2-selection .select2-selection__arrow b {
	display: none;
}

.gform_wrapper .gform_body .gform_fields {
	row-gap: 30px;
}

.gform_wrapper .gform_body .gform_fields h2,
.gform_wrapper .gform_body .gform_fields h3,
.gform_wrapper .gform_body .gform_fields h4,
.gform_wrapper .gform_body .gform_fields h5 {
	margin: 0;
}

.gform_wrapper .gform_body .gform_fields .gfield_label.gform-field-label {
	color: var(--color-grey);
	font-weight: 700;
	font-size: var(--fontsize-body-normal);
	line-height: 1.1;
}

.gform_wrapper .gform_body .gform_fields .ginput_container_select .gfield_select, 
.gform_wrapper .gform_body .gform_fields .ginput_container_select .gfield_select + .chosen-container .chosen-single {
	padding: 0px 20px;
	height: 45px;
	border: 1px solid var(--color-grey-light);
	border-radius: 13px;
	box-shadow: unset !important;
	background-color: #fff;
	display: block;
	line-height: 43px;
	font-weight: 500;
	color: var(--color-grey-light);
	font-size: var(--fontsize-body-small);
}

.gform_wrapper .gform_body .gform_fields .ginput_container_select .gfield_select + .chosen-container .chosen-single {
	background-image: url(/wp-content/themes/mondaymagic/images/search-grey.png);
	background-size: 15px;
	background-position: 20px center;
	padding-left: 45px;
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent {
	position: relative;
	padding-left: 25px;
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent input {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent label {
	margin: 0;
	font-size: var(--fontsize-body-small);
	line-height: 1.1;
	font-weight: 400;
	cursor: pointer;
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 100px;
	border: 1px solid var(--color-blue);
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent label::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 0;
	height: 0;
	background-color: var(--color-blue);
	border-radius: 100px;
	outline-width: 1px;
	outline-style: solid;
	outline-offset: -2px;
	outline-color: #fff;
	transition: all 0.1s ease 0s;
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent label:hover::after {
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
}

.gform_wrapper .gform_body .gform_fields .ginput_container.ginput_container_consent input:checked + label::after {
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
}

.gform_wrapper .gform-footer.gform_footer .gform_button.button {
	padding: 0 25px !important;
	display: block !important;
	font-size: var(--fontsize-body-normal) !important;
	transition: all 0.1s ease 0s !important;
	border: 2px solid var(--color-blue) !important;
	position: relative !important;
	z-index: 1 !important;
	color: #ffffff !important;
	background-color: var(--color-blue) !important;
	border-radius: 100px !important;
	height: 60px !important;
	line-height: 56px !important;
	cursor: pointer !important;
	font-weight: 500 !important;
	font-family: var(--fontfamily-body) !important;
	width: 100% !important;
	text-decoration: none !important;
}

#input_1_5 {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: start;
	flex-direction: row;
	column-gap: 5px;
}

#input_1_5 > .gchoice {
	position: relative;
}

#input_1_5 > .gchoice input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	visibility: hidden;
}

#input_1_5 > .gchoice label {
	margin: 0;
	display: block;
	padding: 10px;
	background-color: var(--color-grey-lightest);
	border-radius: 10px;
	color: var(--color-grey);
	font-size: var(--fontsize-body-tiny);
	font-weight: 500;
	line-height: 1.1;
	cursor: pointer;
	transition: all 0.1s ease 0s;
}

#input_1_5 > .gchoice label:hover {
	background-color: var(--color-blue-alpha);
	color: var(--color-blue);
}

#input_1_5 > .gchoice input:checked + label {
	background-color: var(--color-blue);
	color: #fff;
}

/*
-------------------------------------------------------------|
                                                      HEADER |
-------------------------------------------------------------|
*/

#masthead {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 65px;
	background-color: #fff;
	z-index: 999;
	box-shadow: 0 0 9.5px 0 rgba(0, 0, 0, 0.10);
}

body:not(.logged-in) #masthead {
	display: none;
}

.header-container {
	height: 100%;
}

.nav-menu {
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
}

.nav-menu .menu-item, 
.nav-menu .menu-branding {
	width: 100%;
}

.nav-menu a {
	display: block;
	text-align: center;
	color: var(--color-grey) !important;
	transition: all 0.1s ease 0s;
}

.nav-menu a:hover {
	color: var(--color-green) !important;
}

.nav-menu a p {
	font-size: var(--fontsize-body-tiny);
	font-weight: 500;
	margin: 0;
}

.menu-icon {
	color: var(--color-blue);
	height: 32px;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	transition: all 0.1s ease 0s;
	position: relative;
}

.nav-menu a:hover .menu-icon {
	color: var(--color-green);
}

.menu-item.menu-profile-link .menu-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 74, 173, 0.05);
	width: 28px;
	height: 28px;
	z-index: -1;
	border-radius: 100px;
	border: 1px solid var(--color-blue);
	transition: all 0.1s ease 0s;
}

.menu-item.menu-profile-link a:hover .menu-icon::before {
	border-color: var(--color-green);
}

.menu-branding img {
	width: 45px;
	height: auto;
}

/*
-------------------------------------------------------------|
                                                      FOOTER |
-------------------------------------------------------------|
*/

body:not(.logged-in) #colophon {
	display: none;
}

#colophon {
	margin-top: 50px;
	margin-bottom: 50px;
}

#colophon .max-width-container {
	position: relative;
}

.mm-powered-by a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: var(--color-grey) !important;
	width: 100%;
	align-items: center;
}

.mm-powered-by p {
	width: 50%;
	text-align: right;
	margin: 0;
	font-size: var(--fontsize-body-small);
	padding-right: 40px;
}

.mm-powered-by .footer-logo {
	width: 50%;
}

.mm-powered-by img {
	display: block;
	width: 150px;
	position: relative;
	left: -30px;
}

.footer-menu {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.footer-menu li {
	font-size: var(--fontsize-body-small);
	min-width: 35px;
	text-align: center;
}

.footer-menu a {
	color: var(--color-grey-light) !important;
	cursor: pointer;
	transition: all 0.1s ease 0s;
	display: block;
}

.footer-menu a:hover {
	color: var(--color-coral) !important;
}

/*
-------------------------------------------------------------|
                                               LOGIN SCREENS |
-------------------------------------------------------------|
*/

.mm-login-screen {
	text-align: center;
}

.login-screen-logo img {
	display: block;
	margin: auto;
	max-width: 200px;
}

.login-screen-logo {
	margin-bottom: 50px;
}

.mm-login-screen form input[type="text"] {
	display: block;
	color: var(--color-grey-dark);
	width: 100%;
	text-align: center;
	font-size: var(--fontsize-body-normal);
	height: 58px;
	border: 1px solid var(--color-grey-light);
	border-radius: 15px;
	padding: 0 20px;
}

.mm-login-screen form input[type="text"]:focus, 
.mm-login-screen form input[type="text"]:focus-visible, 
.mm-login-screen form input[type="text"]:active {
	outline: 0px solid var(--color-grey) !important;
	border-color: var(--color-blue);
}

.mm-login-screen form input[type="text"]::placeholder {
	opacity: 1;
	color: var(--color-grey-light);
}

.mm-login-screen form p a {
	color: var(--color-grey) !important;
}

.mm-login-display-mobile-no {
	font-size: var(--fontsize-heading-primary);
	color: var(--color-grey-dark);
	font-family: var(--fontfamily-headings);
	font-weight: 600;
	margin: 0;
}
/*
-------------------------------------------------------------|
                                                     OTP BOX |
-------------------------------------------------------------|
*/
:root {
  --otp-digits: 6;
  --otp-gap: 12px;
  --otp-box-width: 45px;
}

.otp-wrapper {
  position: relative;
  width: calc((var(--otp-box-width) * var(--otp-digits)) + (var(--otp-gap) * (var(--otp-digits) - 1)));
  margin: 20px 0;
}

.otp-wrapper input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	font-size: 24px;
	cursor: pointer;
	letter-spacing: calc(var(--otp-box-width) + var(--otp-gap) - 14px);
	padding-left: 14px;
	z-index: 2;
}

.otp-boxes {
  display: flex;
  gap: var(--otp-gap);
  pointer-events: none; /* Let clicks pass straight through to the invisible input */
}

.digit-box {
	width: var(--otp-box-width);
	height: 45px;
	border: 1px solid var(--color-grey-light);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fontsize-heading-tertiary);
	font-weight: 600;
	font-family: var(--fontfamily-body);
	background: #fff;
	transition: border-color 0.1s;
	color: var(--color-grey-dark);
}

.otp-wrapper input:focus ~ .otp-boxes .digit-box.active {
  border-color: var(--color-blue);
  box-shadow: 0 0 5px rgba(0, 74, 173, 0.3);
}

/*
-------------------------------------------------------------|
                                                 HOME SCREEN |
-------------------------------------------------------------|
*/

.home_intro-company-branding {
	text-align: right;
}

.home_intro-company-branding > img {
	width: 100px;
	display: block;
	margin-left: auto;
}

.home_intro-greeting {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 15px;
}

.home_intro-icon {
	width: 46px;
	text-align: left;
}

.home_intro-icon img {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: 100px;
}

.home_intro-name {
	width: calc(100% - 46px);
}

.home_intro-name h3 {
	margin: 0;
	line-height: 36px;
}

.home_intro-name p {
	margin: 0;
}

.home-primary-content {
	margin-top: 40px;
}

.card-button {
	position: relative;
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	overflow: hidden;
	margin: 10px 0;
	padding: 15px 15px 15px 15px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	transition: all 0.1s ease 0s;
	border-left: 10px solid var(--color-blue);
}

.card-button.green { border-color: var(--color-green); }
.card-button.blue  { border-color: var(--color-blue);  }
.card-button.gold  { border-color: var(--color-gold);  }
.card-button.coral { border-color: var(--color-coral); }

.card-button:hover {
	border-left-width: 15px;
	padding-left: 10px;
}

.card-button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: var(--color-blue-alpha);
	z-index: -1;
	transition: all 0.1s ease 0s;
	border-radius: 100%;
}

.card-button.accordian-button::before {
	display: none;
}

.card-button.green::before { background-color: var(--color-green-alpha); }
.card-button.blue::before  { background-color: var(--color-blue-alpha);  }
.card-button.gold::before  { background-color: var(--color-gold-alpha);  }
.card-button.coral::before { background-color: var(--color-coral-alpha); }

.card-button:hover::before {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 0;
}

.card-button.half {
	width: calc(50% - 5px);
}

.card-side-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
	background-color: var(--color-blue);
	display: none;
}

.card_button-icon {
	border-radius: 100px;
	height: 36px;
	width: 36px;
	background-color: var(--color-blue-alpha);
	color: var(--color-blue);
	position: relative;
	transition: all 0.1s ease 0s;
}

.card-button.green .card_button-icon { background-color: var(--color-green-alpha); color: var(--color-green); }
.card-button.blue .card_button-icon  { background-color: var(--color-blue-alpha);  color: var(--color-blue);  }
.card-button.gold .card_button-icon  { background-color: var(--color-gold-alpha);  color: var(--color-gold);  }
.card-button.coral .card_button-icon { background-color: var(--color-coral-alpha); color: var(--color-coral); }

.card-button.green:hover .card_button-icon { background-color: var(--color-green); color: #ffffff; }
.card-button.blue:hover .card_button-icon  { background-color: var(--color-blue);  color: #ffffff; }
.card-button.gold:hover .card_button-icon  { background-color: var(--color-gold);  color: #ffffff; }
.card-button.coral:hover .card_button-icon { background-color: var(--color-coral); color: #ffffff; }

.card_button-icon svg {
	width: 16px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
}

.card_button-title {
	font-size: var(--fontsize-body-small);
	font-weight: 500;
	font-family: var(--fontfamily-headings);
	color: var(--color-grey-dark);
	margin: 0;
	width: 100%;
	line-height: 1.2em;
	transition: all 0.1s ease 0s;
}

.card-button.green:hover .card_button-title { color: var(--color-green); }
.card-button.blue:hover .card_button-title  { color: var(--color-blue);  }
.card-button.gold:hover .card_button-title  { color: var(--color-gold);  }
.card-button.coral:hover .card_button-title { color: var(--color-coral); }

.card_button-icon + .card_button-title {
	width: calc(100% - 45px);
}

.card-button > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.home-secondary-content {
	margin-top: 40px;
}

.home_secondary_content-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.home-card-button > .card_button-title {
	width: calc(100% - 170px);
	font-size: var(--fontsize-body-large);
	line-height: 1.1em;
}

.card_button-pill_container {
	width: 110px;
	text-align: center;
}

.card_button-pill {
	width: 110px;
	font-size: var(--fontsize-body-small);
	font-weight: 600;
	border-radius: 100px;
	margin-bottom: 5px;
}

.card-button.green .card_button-pill { background-color: var(--color-green-alpha); color: var(--color-green); }
.card-button.blue .card_button-pill  { background-color: var(--color-blue-alpha);  color: var(--color-blue);  }
.card-button.gold .card_button-pill  { background-color: var(--color-gold-alpha);  color: var(--color-gold);  }
.card-button.coral .card_button-pill { background-color: var(--color-coral-alpha); color: var(--color-coral); }

.home-card-button.not-available .card_button-pill {

	background-color: var(--color-grey-light);
	color: var(--color-grey);
}

.card_button_pill-subtitle {
	font-size: var(--fontsize-body-tiny);
	font-style: italic;
	color: var(--color-grey);
	font-weight: 400;
}

.card_button-secondary_content img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.card_button-secondary_content {
	margin-top: 0;
	position: relative;
	width: calc(100% + 30px);
	background-color: var(--color-blue);
	left: -15px;
	min-width: calc(100% + 30px);
	bottom: -15px;
	box-shadow: inset 0 9px 8px 0px rgba(0,0,0,0.05);
}

.card-button.green .card_button-secondary_content { background-color: var(--color-green-alpha); }
.card-button.blue .card_button-secondary_content  { background-color: var(--color-blue-alpha);  }
.card-button.gold .card_button-secondary_content  { background-color: var(--color-gold-alpha);  }
.card-button.coral .card_button-secondary_content { background-color: var(--color-coral-alpha); }

.home-secondary-content > p {
	font-size: var(--fontsize-body-small);
	font-weight: 500;
	margin: 0 0 10px;
}

/*
-------------------------------------------------------------|
                                              PROFILE SCREEN |
-------------------------------------------------------------|
*/

.mm-profile-header {
	position: relative;
	padding-right: 75px;
	padding-top: 25px;
	margin-bottom: 30px;
}

.mm-profile-header h2 {
	margin: 0;
}

.mm_profile_header-profile_picture {
	position: absolute;
	top: 0;
	right: 0;
	width: 65px;
	cursor: pointer;
}

.mm_profile_header-profile_picture > img {
	width: 65px;
	height: 65px;
	display: block;
	object-fit: cover;
	border-radius: 100px;
}

.mm_profile_edit-profile_picture {
	position: absolute;
	width: 30px;
	background-color: var(--color-grey-lightest);
	text-align: center;
	height: 20px;
	border-radius: 50px;
	bottom: -5px;
	right: 0;
	transition: all 0.1s ease 0s;
}

.mm_profile_header-profile_picture:hover .mm_profile_edit-profile_picture {
	background-color: var(--color-blue);
}

.mm_profile_edit-profile_picture svg {
	width: 9px;
	height: 9px;
	color: var(--color-grey);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.1s ease 0s;
}

.mm_profile_header-profile_picture:hover .mm_profile_edit-profile_picture svg {
	color: #fff;
}

.mm_profile_edit-container {
	margin-bottom: 25px;
	position: relative;
	width: 100%;
}

.mm_profile_edit-container:nth-child(n+2)::before {
	content: "";
	position: absolute;
	top: -12px;
	height: 1px;
	width: 100%;
	left: 0;
	background-color: var(--color-grey-light);
}

.mm_profile_edit-label {
	font-size: var(--fontsize-body-normal);
	font-weight: 400;
	color: var(--color-grey);
}

.mm_profile_edit-value {
	font-weight: 700;
	font-size: var(--fontsize-body-normal);
	color: var(--color-grey);
}

.mm_profile_edit-button {
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: var(--color-grey-lightest);
	border-radius: 100px;
	font-size: var(--fontsize-body-tiny);
	padding: 2px 10px;
	cursor: pointer;
	transition: all 0.1s ease 0s;
}

.mm_profile_edit-button:hover {
	background-color: var(--color-blue);
	color: #fff;
}

.mm_profile_edit-container form {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #fff;
	height: 50%;
	width: 100%;
}

.mm_profile_edit-container form input[type="text"] {
	display: block !important;
	border: 0px solid !important;
	outline: 0 !important;
	font-weight: 700;
	padding: 0 !important;
	color: var(--color-grey-dark);
	width: 100% !important;
}

.button.mm_profile_edit-save_button {
	font-size: var(--fontsize-body-tiny);
	line-height: unset !important;
	height: unset !important;
	width: unset !important;
	position: absolute;
	bottom: 0;
	right: 0;
	min-width: 55px;
	padding: 0;
	transition: all 0.1s ease 0s;
	cursor: pointer;
}

.button.mm_profile_edit-save_button:hover {
	color: var(--color-blue) !important;
	background-color: #fff !important;
}

.subpage-back-button {
	color: var(--color-grey) !important;
	font-size: var(--fontsize-body-small);
}

.subpage-back-button svg {
	color: var(--color-grey-light);
	width: 12px;
}

.mm-sub-page-header h3,
.subpage-back-button + .wp-block-heading {
	margin: 0;
}

.mm-sub-page-header h3 svg {
	height: 30px;
	vertical-align: center;
	display: inline-block;
	margin-right: 10px;
	width: auto;
}

.profile-voucher-container {
	margin: 30px 0;
}

.profile-voucher-block {
	position: relative;
	margin-bottom: 15px;
}

.profile-voucher-block::before {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-grey-light);
}

.profile-voucher-block:last-child::before {
	display: none;
}

.profile-voucher-block .voucher-value {
	color: var(--color-green);
	font-family: var(--fontfamily-headings);
	font-weight: 700;
	margin: 0;
}

.profile-voucher-block .voucher-code {
	font-size: var(--fontsize-body-large);
	color: var(--color-grey-dark);
	margin: 0;
}

.voucher-resend-button {
	background-color: var(--color-grey-lightest);
	display: block;
	position: absolute;
	top: calc(50% - 18px);
	right: 0;
	text-align: center;
	line-height: 1em;
	font-size: var(--fontsize-body-tiny);
	color: var(--color-grey) !important;
	padding: 6px 12px;
	border-radius: 12px;
	font-weight: 300;
	transition: all 0.1s ease 0s;
}

.voucher-resend-button:hover {
	background-color: var(--color-green);
	color: #fff !important;
}

.profile-coupons-redeemable-at {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	align-items: center;
	border: 1px solid var(--color-grey-light);
	border-radius: 5px;
	padding: 5px 10px;
	margin: 10px 0 20px;
}

.profile-coupons-redeemable-at img {
	width: 70px;
}

.profile-coupons-redeemable-at .separator {
	height: 15px;
	width: 1px;
	background-color: var(--color-grey-light);
	margin: 0 10px;
}

.profile-coupons-redeemable-at p {
	margin: 0;
	font-size: var(--fontsize-body-small);
	margin-right: auto;
}

.profile-coupon-weeks {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	gap: 10px;
}

.profile-coupon-week-no {
	cursor: pointer;
	background-color: var(--color-grey-lightest);
	padding: 7px 10px;
	border-radius: 10px;
	font-size: var(--fontsize-body-tiny);
	transition: all 0.1s ease 0s;
	color: var(--color-grey);
}

.profile-coupon-week-no:hover,
.profile-coupon-week-no.active {
	background-color: var(--color-blue-alpha);
	color: var(--color-blue);
}

.profile-coupon-weeks + p {
	font-size: var(--fontsize-body-small);
	margin: 10px 0 0;
}

.profile-coupon-list {
	margin: 30px 0;
}

.profile-coupon-block {
	position: relative;
	margin-bottom: 30px;
	padding-left: 50px;
}

.profile-coupon-block::before {
	content: "";
	position: absolute;
	bottom: -13px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-grey-light);
}

.profile-coupon-block:last-child::before {
	display: none;
}

.coupon-checkmark {
	position: absolute;
	left: 0;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	background-color: var(--color-blue-alpha);
}

.coupon-checkmark svg {
	color: var(--color-blue);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.coupon-title {
	margin: 0;
	line-height: 1.1em;
	font-size: var(--fontsize-body-small);
	color: var(--color-grey-dark);
}

.coupon-value {
	color: var(--color-green);
	font-family: var(--fontfamily-headings);
	font-weight: 700;
	margin: 0;
}

.disclaimer {
	font-size: var(--fontsize-body-small);
	text-align: center;
	line-height: 1.2em;
	color: var(--color-grey);
	margin: 25px 0;
}

.disclaimer a {
	color: var(--color-grey);
	font-weight: 600;
	border-bottom: 1px solid;
}

.mm_sliding_popup-container .disclaimer {
	margin: 0;
	text-align: left;
	color: var(--color-grey-light);
	font-style: italic;
	font-weight: 400;
}

.liftclub-post {
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	padding: 50px 30px 25px;
	margin: 20px 0;
	position: relative;
}

.liftclub_post-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: start;
	margin-bottom: 3px;
}

.liftclub_post-info:nth-child(6) {
	margin-top: 15px;
}

.liftclub_post-info strong {
	font-weight: 600;
}

.liftclub_post-info .liftclub_post_info-icon {
	width: 25px;
}

.liftclub_post-info .liftclub_post_info-icon svg {
	width: 15px;
	height: auto;
}

.liftclub_post-info p {
	width: calc(100% - 25px);
	margin: 0;
	font-size: var(--fontsize-body-normal);
	line-height: 1.2em;
}

.liftclub-post > p {
	font-size: var(--fontsize-body-small);
	font-style: italic;
	line-height: 1.2em;
	color: var(--color-grey-light);
	margin: 10px 0 20px;
	border-bottom: 1px solid var(--color-grey-light);
	padding-bottom: 20px;
}

.liftclub-post.not-active .liftclub_post-check-active,
.liftclub-post.active .liftclub_post-repost {
	display: none;
}

.liftclub_post-check-active {
	position: relative;
	display: flex;
	justify-content: end;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.liftclub_post-check-active p {
	color: var(--color-blue);
	font-size: var(--fontsize-body-small);
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
	margin-right: auto;
}

.liftclub_post-check-active a {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	position: relative;
	transition: all 0.1s ease 0s;
}

.liftclub_post-check-active a:first-of-type {
	color: var(--color-green);
	background-color: var(--color-green-alpha);
}

.liftclub_post-check-active a:last-of-type {
	color: var(--color-coral);
	background-color: var(--color-coral-alpha);
}

.liftclub_post-check-active a:first-of-type:hover {
	background-color: var(--color-green);
	color: #fff;
}

.liftclub_post-check-active a:last-of-type:hover {
	background-color: var(--color-coral);
	color: #fff;
}

.liftclub_post-check-active a svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: auto;
}

.liftclub_post-repost .button {
	text-align: center;
	height: 40px;
	line-height: 36px;
	font-size: var(--fontsize-body-tiny);
}

.mm-profile-airtime-confirm-number .confirm-voucher-details p {
	margin: 0;
	font-size: var(--fontsize-body-normal);
	font-weight: 700;
	line-height: 1.1;
	position: relative;
	padding-right: 20px;
}

.mm-profile-airtime-confirm-number .confirm-voucher-details p span {
	position: absolute;
	color: var(--color-green);
	right: 0;
	top: 1px;
}

.profile-number-confirm {
	margin-top: 30px;
}

.profile-number-confirm > p {
	font-weight: 700;
	margin: 0;
}

.profile_number_confirm-display-number {
	position: relative;
	border: 1px solid var(--color-grey-light);
	border-radius: 13px;
	height: 60px;
}

.profile_number_confirm-display-number span {
	position: absolute;
	top: calc(50% - 9px);
	font-size: var(--fontsize-body-large);
	font-weight: 700;
	left: 20px;
	display: block;
	line-height: 1em;
}

.profile_number_confirm-display-number svg {
	position: absolute;
	height: 18px;
	width: auto;
	top: calc(50% - 9px);
	right: 20px;
	color: var(--color-grey);
}

.profile-number-confirm > p.not-your-number {
	margin-top: 10px;
	font-weight: 500;
	font-size: var(--fontsize-body-small);
	margin-bottom: 50px;
}

.profile-number-confirm > p.not-your-number a {
	color: var(--color-blue);
	font-weight: 700;
	border-bottom: 2px solid var(--color-blue);
}

.mm_text_communication_preference-radios {
	position: relative;
	margin-bottom: 50px;
}

.mm_text_communication_preference-radios input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	visibility: hidden;
}

.mm_text_communication_preference-radios label {
	display: block;
	position: relative;
	width: 100%;
	font-weight: 700;
	color: var(--color-grey);
	font-size: var(--fontsize-body-large);
	line-height: 1.1;
	padding: 20px 50px 20px 20px;
	border: 1px solid var(--color-grey-light);
	border-radius: 13px;
	margin: 10px 0;
	background-color: #fff;
	transition: all 0.1s ease 0s;
	cursor: pointer;
}

.mm_text_communication_preference-radios label span {
	position: absolute;
	top: calc(50% - 18px);
	right: 15px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-grey-light);
	border-radius: 100px;
	color: var(--color-grey-light);
	line-height: 36px;
	text-align: center;
	transition: all 0.1s ease 0s;
	background-color: #fff;
}

.mm_text_communication_preference-radios input:checked + label {
	color: var(--color-blue);
	border-color: var(--color-blue);
	background-color: var(--color-blue-alpha);
}

.mm_text_communication_preference-radios input:checked + label span {
	color: #fff;
	border-color: var(--color-blue);
	background-color: var(--color-blue);
}

.mm-profile-show-airtime-voucher {
	text-align: center;
}

.big-green-check {
	background-color: var(--color-green);
	width: 70px;
	height: 70px;
	border-radius: 100px;
	margin: 0 auto;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.big-green-check svg {
	width: 28px;
	height: auto;
}

.airtime-pin-display {
	margin: 20px 0 50px;
	word-break: break-all;
	word-wrap: anywhere;
}

.airtime-pin-display a {
	color: var(--color-grey-dark);
	font-size: var(--fontsize-heading-primary);
	font-weight: 600;
	display: block;
	font-family: var(--fontfamily-headings);
	line-height: 1.2em;
}

/*
-------------------------------------------------------------|
                                                         FAQ |
-------------------------------------------------------------|
*/

.faq-category {
	margin-top: 30px;
}

.faq_category-title {
	font-size: var(--fontsize-body-normal);
	font-family: var(--fontfamily-body);
	color: var(--color-blue);
	margin: 0;
	font-weight: 600;
}

.faq_category-title a {
	color: var(--color-blue) !important;
	transition: all 0.1s ease 0s;
}

.faq_category-title a:hover {
	color: var(--color-green) !important;
}

.single-faq {
	border: 1px solid var(--color-grey-light);
	border-radius: 12px;
	margin-top: 10px;
	padding: 20px;
	position: relative;
	transition: all 0.1s ease 0s;
}

.single_faq-question {
	cursor: pointer;
}

.single_faq-question::before {
	content: "";
	position: absolute;
	top: 24px;
	right: 20px;
	width: 12px;
	height: 12px;
	border: 1px solid transparent;
	border-color: transparent transparent var(--color-grey) var(--color-grey);
	transform: rotate(-45deg);
	transition: all 0.1s ease 0s;
}

.single_faq-question:hover::before {
	border-color: transparent transparent var(--color-blue) var(--color-blue);
}

.single-faq.open .single_faq-question::before {
	border-color: var(--color-grey) var(--color-grey) transparent transparent;
	top: 30px;
}

.single-faq.open .single_faq-question:hover::before {
	border-color: var(--color-blue) var(--color-blue) transparent transparent;
}

.single_faq-question::after {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	border: 1px solid var(--color-blue);
	border-radius: 12px;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transition: all 0.1s ease 0s;
}

.single_faq-question:hover::after {
	opacity: 1;
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
}

.single_faq-question h5 {
	font-weight: 400;
	font-size: var(--fontsize-body-normal);
	color: var(--color-grey-dark);
	margin: 0;
	padding-right: 30px;
	transition: all 0.1s ease 0s;
}

.single_faq-question:hover h5 {
	color: var(--color-blue);
}

.single_faq-answer {
	display: none;
}

.single_faq-answer p {
	margin: 5px 0 0;
	font-size: var(--fontsize-body-normal);
	color: var(--color-grey);
	line-height: 1.1;
	font-weight: 400;
}

/*
-------------------------------------------------------------|
                                               MAGIC MOMENTS |
-------------------------------------------------------------|
*/
.moment-category-card {
	border: 1px solid var(--color-grey-light);
	border-radius: 13px;
	padding: 20px 15px 20px 20px;
	margin-bottom: 10px;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.moment_category_card-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	position: relative;
}

.moment-category-card.blue .moment_category_card-icon {         background-color: var(--color-blue-alpha);  color: var(--color-blue);}
.moment-category-card.green .moment_category_card-icon {        background-color: var(--color-green-alpha); color: var(--color-green);}
.moment-category-card.coral .moment_category_card-icon {        background-color: var(--color-coral-alpha); color: var(--color-coral);}
.moment-category-card.gold .moment_category_card-icon {         background-color: var(--color-gold-alpha);  color: var(--color-gold);}
.moment-category-card.blue:hover .moment_category_card-icon {   background-color: var(--color-blue);  color: #ffffff; }
.moment-category-card.green:hover .moment_category_card-icon  { background-color: var(--color-green); color: #ffffff; }
.moment-category-card.coral:hover .moment_category_card-icon  { background-color: var(--color-coral); color: #ffffff; }
.moment-category-card.gold:hover .moment_category_card-icon {   background-color: var(--color-gold);  color: #ffffff; }

.moment-category-card::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: var(--color-blue-alpha);
	z-index: -1;
	transition: all 0.1s ease 0s;
	border-radius: 100%;
}

.moment-category-card.green::before { background-color: var(--color-green-alpha); }
.moment-category-card.blue::before  { background-color: var(--color-blue-alpha);  }
.moment-category-card.gold::before  { background-color: var(--color-gold-alpha);  }
.moment-category-card.coral::before { background-color: var(--color-coral-alpha); }

.moment-category-card:hover::before {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 0;
}


.moment_category_card-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 26px;
}

.moment-category-card > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.moment_category_card-title {
	width: calc(100% - 65px);
}

.moment_category_card-title h3 {
	font-weight: 500;
	color: var(--color-grey-dark);
	margin: 0;
	line-height: 1.1em;
	font-size: var(--fontsize-body-large);
}

.moment_category_card-title p {
	font-size: var(--fontsize-body-small);
	margin: 5px 0 0;
	font-weight: 500;
	line-height: 1.1;
}

.moment-categories .card-button {
	margin-top: 30px;
}

.single-moment {
	margin: 75px 0;
}

.single_moment-category {
	text-align: center;
	margin: 0;
	font-size: var(--fontsize-body-normal);
	color: var(--color-grey-light);
	text-transform: uppercase;
	letter-spacing: 5px;
	font-weight: 500;
}

.single_moment-card {
	display: flex;
	align-items: center;
	padding: 40px 30px;
	border-radius: 13px;
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
	min-height: 200px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px 0 50px;
}

.single-moment.blue .single_moment-card  { background-color:var(--color-blue-alpha) }
.single-moment.green .single_moment-card { background-color:var(--color-green-alpha) }
.single-moment.gold .single_moment-card  { background-color:var(--color-gold-alpha) }
.single-moment.coral .single_moment-card { background-color:var(--color-coral-alpha) }

.single_moment-card h3 {
	font-size: var(--fontsize-heading-quarternary);
	font-family: var(--fontfamily-headings);
	color: var(--color-grey-dark);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

.single_moment-footer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	text-align: center;
}

.single_moment_footer-button {
	min-width: 55px;
	cursor: pointer;
	position: relative;
}

.single_moment_footer-icon {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	transition: all 0.1s ease 0s;
	position: relative;
	margin: auto;
}

.blue > .single_moment_footer-icon  { color: var(--color-blue);  background-color:var(--color-blue-alpha);  }
.green > .single_moment_footer-icon { color: var(--color-green); background-color:var(--color-green-alpha); }
.gold > .single_moment_footer-icon  { color: var(--color-gold);  background-color:var(--color-gold-alpha);  }
.coral > .single_moment_footer-icon { color: var(--color-coral); background-color:var(--color-coral-alpha); }

.single_moment_footer-button:hover .single_moment_footer-icon {
	color: #fff !important;
}

.single_moment_footer-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.single_moment_footer-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 100px;
	transition: all 0.1s ease 0s;
}

.blue > .single_moment_footer-icon::before  { background-color: var(--color-blue);  }
.green > .single_moment_footer-icon::before { background-color: var(--color-green); }
.gold > .single_moment_footer-icon::before  { background-color: var(--color-gold);  }
.coral > .single_moment_footer-icon::before { background-color: var(--color-coral); }

.single_moment_footer-button:hover .single_moment_footer-icon::before {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.single_moment_footer-button p {
	font-size: var(--fontsize-body-small);
	margin: 0;
	text-align: center;
	transition: all 0.1s ease 0s;
}

.single_moment_footer-button.blue:hover > p  { color: var(--color-blue);  }
.single_moment_footer-button.green:hover > p { color: var(--color-green); }
.single_moment_footer-button.gold:hover > p  { color: var(--color-gold);  }
.single_moment_footer-button.coral:hover > p { color: var(--color-coral); }

.single_moment_footer-button a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mm-loved-placeholder ~ .single-moment .single_moment-card {
	margin-top: 5px;
	margin-bottom: 20px;
}

/*
-------------------------------------------------------------|
                                                   LIFT CLUB |
-------------------------------------------------------------|
*/

body.page-id-73 .#colophon {
	margin-top: 75px;
	margin-bottom: 100px;
}

body.page-id-73 .entry-content {
	position: relative;
}

.post_lift_club_button-container {
	position: fixed;
	width: 90%;
	max-width: 320px;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

.liftclub-archive-list > h3 {
	margin-bottom: 0;
}

.liftclub-drowdowns > p {
	margin: 0;
	width: 100%;
}

.liftclub-drowdowns {
	margin: 5px 0 30px;
}

.liftclub-drowdowns {
	margin: 10px 0 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	gap: 10px;
}

.liftclub-drowdowns .select2-container {
	width: calc(50% - 5px) !important;
}

.post-lift-club-button {
	text-align: center;
}

.post-lift-club-button::before {
	content: "+";
	font-weight: 300;
	font-size: 26px;
	display: inline-block;
	vertical-align: -5px;
	margin-right: 5px;
	position: relative;
	top: -4px;
}

.liftclub_post-meta {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 25px 30px;
}

.liftclub_post-meta p {
	margin: 0;
	line-height: 1em;
	font-size: var(--fontsize-body-tiny);
	color: var(--color-grey-light);
	font-weight: 500;
}

/*
-------------------------------------------------------------|
                                                      POPUPS |
-------------------------------------------------------------|
*/
.mm-sliding-popup {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	transition: all 0.1s ease-out 0s;
	width: 100%;
	max-width: 100%;
	background-color: transparent;
	z-index: 9999;
	border-radius: 25px 25px 0 0;
	height: 90%;
}

.mm-sliding-popup.open {
	transform: translate(-50%, 0);
}

.mm_sliding_popup-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	backdrop-filter: blur(2px);
	background-color: var(--color-blue-alpha);
	transition: all 0.1s ease-out 0s;
}

.mm-sliding-popup.open .mm_sliding_popup-overlay {
	bottom: 0;
	height: 100vh;
}

.mm_sliding_popup-container {
	box-shadow: 0 0 9.5px 0 rgba(0, 0, 0, 0.10);
	border-radius: 25px 25px 0 0;
	background-color: #fff;
	position: relative;
	width: 100%;
	max-width: 420px;
	left: 50%;
	transform: translateX(-50%);
	max-height: 100%;
	height: 100%;
}

.mm_sliding_popup-closing_bar {
	height: 60px;
	position: relative;
}

.mm_sliding_popup-close,
.mm_popup-close {
	position: absolute;
	top: 25px;
	right: 20px;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	border: 1px solid var(--color-grey-light);
	cursor: pointer;
	color: var(--color-grey);
	background-color: #fff;
	transition: all 0.1s ease 0s;
}

.mm_sliding_popup-close:hover,
.mm_popup-close:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.mm_sliding_popup-close svg,
.mm_popup-close svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
}

.mm_sliding_popup-drag-close {
	position: absolute;
	width: 70px;
	height: 4px;
	border-radius: 100px;
	background-color: var(--color-grey-light);
	left: calc(50% - 35px);
	top: 25px;
	cursor: grab;
}

.mm_sliding_popup-drag-close::before {
	content: "";
	position: absolute;
	bottom: 100%;
	height: 25px;
	width: 100%;
	background-color: transparent;
}

.mm_sliding_popup-inner_container {
	height: 100%;
	overflow-y: scroll;
}

.mm_sliding_popup-inner_container .max-width-container {
	padding-bottom: 100px;
}

.mm-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-blue-alpha);
	z-index: 9999;
	backdrop-filter: blur(3px);
	display: none;
}

.mm_popup-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mm_popup-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background-color: #fff;
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
	border-radius: 13px;
	padding: 40px 20px;
	max-height: 90%;
	overflow-y: scroll;
	min-width: 320px;
}

.mm_popup-container .max-width-container > :first-child {
	margin-top: 0;
}

.warning-icon {
	position: relative;
	width: 54px;
	height: 54px;
	margin: auto;
	background-color: var(--color-coral-alpha);
	border-radius: 10px;
	color: var(--color-coral);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/*
-------------------------------------------------------------|
                                                  ACCORDIANS |
-------------------------------------------------------------|
*/

.card-button.accordian-button {
	border-left-width: 10px !important;
	padding-left: 15px !important;
	padding-top: 25px;
	padding-bottom: 25px;
}

.accordion_button-content {
	display: none;
	width: 100%;
	margin-top: 25px;
}

.accordion_button-header {
	cursor: pointer;
	width: 100%;
}

.accordion_button-title {
	font-family: var(--fontfamily-headings);
	color: var(--color-grey-dark);
	font-weight: 500;
	font-size: var(--fontsize-body-large);
	margin: 0;
	line-height: 1.1;
	transition: all 0.1s ease 0s;
}

.accordion_button-subtitle {
	font-size: var(--fontsize-body-small);
	margin: 5px 0 0;
	color: var(--color-grey);
	font-weight: 500;
	line-height: 1.1em;
	transition: all 0.1s ease 0s;
}

.blue > .accordion_button-header:hover .accordion_button-title     { color: var(--color-blue);  }
.blue > .accordion_button-header:hover .accordion_button-subtitle  { color: var(--color-blue);  }
.green > .accordion_button-header:hover .accordion_button-title    { color: var(--color-green); }
.green > .accordion_button-header:hover .accordion_button-subtitle { color: var(--color-green); }
.coral > .accordion_button-header:hover .accordion_button-title    { color: var(--color-coral); }
.coral > .accordion_button-header:hover .accordion_button-subtitle { color: var(--color-coral); }
.gold > .accordion_button-header:hover .accordion_button-title     { color: var(--color-gold);  }
.gold > .accordion_button-header:hover .accordion_button-subtitle  { color: var(--color-gold);  }

.accordion_button-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30px;
	height: 25px;
	border-radius: 13px 0;
}

.blue > .accordion_button-icon  { background-color: var(--color-blue-alpha);  }
.green > .accordion_button-icon { background-color: var(--color-green-alpha); }
.coral > .accordion_button-icon { background-color: var(--color-coral-alpha); }
.gold > .accordion_button-icon  { background-color: var(--color-gold-alpha);  }

.accordion_button-icon span {
	position: absolute;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
	left: calc(50% - 6px);
	top: calc(50% - 9px);
	transition: all 0.5s linear 0s;
}

.card-button.accordian-button.open span {
	top: calc(50% - 3px);
}

.blue > .accordion_button-icon span::before  { background-color: var(--color-blue);  }
.blue > .accordion_button-icon span::after   { background-color: var(--color-blue);  }
.green > .accordion_button-icon span::before { background-color: var(--color-green); }
.green > .accordion_button-icon span::after  { background-color: var(--color-green); }
.coral > .accordion_button-icon span::before { background-color: var(--color-coral); }
.coral > .accordion_button-icon span::after  { background-color: var(--color-coral); }
.gold > .accordion_button-icon span::before  { background-color: var(--color-gold);  }
.gold > .accordion_button-icon span::after   { background-color: var(--color-gold);  }

.accordion_button-icon span::before, 
.accordion_button-icon span::after {
	content: "";
	position: absolute;
	transition: all 0.5s linear 0s;
}

.accordion_button-icon span.top::before    { width: 1px;  height: 0%;   top: 100%; left: 0;     }
.accordion_button-icon span.top::after     { width: 0%;   height: 1px;  top: 0;    right: 100%; }
.accordion_button-icon span.bottom::before { width: 100%; height: 1px;  bottom: 0; left: 0;     }
.accordion_button-icon span.bottom::after  { width: 1px;  height: 100%; bottom: 0; right: 0;    }

.accordian-button.open .accordion_button-icon span.top::before    { width: 1px;  height: 100%; top: 0;       left: 0;    }
.accordian-button.open .accordion_button-icon span.top::after     { width: 100%; height: 1px;  top: 0;       right: 0;   }
.accordian-button.open .accordion_button-icon span.bottom::before { width: 0%;   height: 1px;  bottom: 0;    left: 100%; }
.accordian-button.open .accordion_button-icon span.bottom::after  { width: 1px;  height: 0%;   bottom: 100%; right: 0;   }

.help_contact-buttons {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	align-items: start;
	column-gap: 6px;
	row-gap: 9px;
}

.help_contact-buttons a.button.translucent {
	padding: 0 10px;
	height: 48px;
	line-height: 44px;
	width: 100%;
	display: block;
	margin: 0 !important;
}

.help_contact-buttons .button.translucent.half {
	width: calc(50% - 5px);
}

.help-contact {
	background-color: var(--color-grey-lightest);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.help_contact-name {
	font-size: var(--fontsize-body-normal);
	font-weight: 500;
	margin: 0;
	line-height: 1.1;
	color: var(--color-grey-dark);
}

.help_contact-job_title {
	margin: 0 0 10px;
	font-size: var(--fontsize-body-small);
	color: var(--color-grey);
}

.help_contact-number, 
.help_contact-email {
	font-size: var(--fontsize-body-normal);
	margin: 0;
	color: var(--color-grey);
	line-height: 1.3em;
}

.help_contact-number a, 
.help_contact-email a {
	color: var(--color-grey);
	transition: all 0.1s ease 0s;
}

.help_contact-number svg, 
.help_contact-email svg {
	height: 15px;
	width: 15px;
	vertical-align: -1px;
}

.help-contact.blue svg,  .help-contact.blue a:hover  { color: var(--color-blue);  }
.help-contact.green svg, .help-contact.green a:hover { color: var(--color-green); }
.help-contact.coral svg, .help-contact.coral a:hover { color: var(--color-coral); }
.help-contact.gold svg,  .help-contact.gold a:hover  { color: var(--color-gold);  }


/*
-------------------------------------------------------------|
                                                  SPIN & WIN |
-------------------------------------------------------------|
*/

.play-and-win-container .wheel-wrap{
	position:relative;
	width:340px;
	height:340px;
	margin-top:50px;
}

.play-and-win-container .pointer{
	position:absolute;
	top:-14px;
	left:50%;
	transform:translateX(-50%);
	width:0; height:0;
	border-left:16px solid transparent;
	border-right:16px solid transparent;
	border-top:28px solid var(--color-grey-dark);
	z-index:5;
}

.play-and-win-container .wheel-hub{
	position:absolute;
	top:50%; left:50%;
	width:52px; height:52px;
	background:#ffffff;
	border-radius:50%;
	transform:translate(-50%,-50%);
	z-index:4;
}

.play-and-win-container #wheel{
	width:100%;
	height:100%;
	border-radius:50%;
	position:relative;
	transition: transform 4.5s cubic-bezier(.17,.67,.16,1);
    box-shadow:0 0 0 4px #ffffff, 0 10px 20px rgba(0,0,0,.18);
}

.play-and-win-container #spinBtn {
	margin-top: 30px;
	margin-bottom:40px;
}

.play-and-win-container .spinwin.card-button {
	padding: 0px 15px 0px 15px;
}

.play-and-win-container .spinwin.card-button .card_button-secondary_content {
	bottom: unset;
}

/*
-------------------------------------------------------------|
                                                     AIRTIME |
-------------------------------------------------------------|
*/

.game-tiles {
	height: 290px;
	position: relative;
	width: 290px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}

.game-tile {
	position: absolute;
	width: 90px;
	height: 90px;
	background-color: #005ca8;
	border-radius: 12px;
	left: 0;
	top: 0;
	background-image: url(/wp-content/uploads/2026/03/arb-transparent-large.png);
	background-size: 320px 320px;
	background-position: 0px 0px;
	transition: all 3s ease-in 0s;
	transform: rotateY(0deg);
	cursor: pointer;
}

.game-tile:nth-child(1) { top: 0; left: 0px;       background-color:var(--color-blue);  }
.game-tile:nth-child(2) { top: 0; left: 100px;     background-color:var(--color-coral); }
.game-tile:nth-child(3) { top: 0; left: 200px;     background-color:var(--color-green); }
.game-tile:nth-child(4) { top: 100px; left: 0px;   background-color:var(--color-green); }
.game-tile:nth-child(5) { top: 100px; left: 100px; background-color:var(--color-gold);  }
.game-tile:nth-child(6) { top: 100px; left: 200px; background-color:var(--color-coral); }
.game-tile:nth-child(7) { top: 200px; left: 0px;   background-color:var(--color-coral); }
.game-tile:nth-child(8) { top: 200px; left: 100px; background-color:var(--color-blue);  }
.game-tile:nth-child(9) { top: 200px; left: 200px; background-color:var(--color-gold);  }

.game-tile.active {
	transform: rotateY(3600deg);
	background-color: var(--color-green);
}

.game-tile.complete {
	top: 0;
	left: 0;
	width: 290px;
	height: 290px;
	transition: all 0.5s ease 0s;
	background-color: #fff;
	z-index: 2;
}

.airtime-popup-content h3, .airtime-popup-content p {
	margin: 0 0 5px;
}

.airtime-popup-value {
	background-color: var(--color-green-alpha);
	width: 150px;
	margin: 20px auto 30px;
	font-size: var(--fontsize-heading-primary);
	color: var(--color-green);
	font-family: var(--fontfamily-headings);
	font-weight: 700;
	padding: 30px 30px;
	line-height: 1em;
	border-radius: 10px;
}

.airtime-tiles-popup .mm_popup-close {
	display: none;
}