/*
-------------------------------------------------------------|
---                   Custom Stylesheet                   ---|
---                      Monday Magic                     ---|
-------------------------------------------------------------|
                                                       INDEX |
-------------------------------------------------------------|
- FONT IMPORT
- VARIABLES
- DEFAULTS
- BUTTONS
- HEADER
- FOOTER
- LOGIN SCREENS
- OTP BOX
- HOME SCREEN
- PROFILE SCREEN
-------------------------------------------------------------|
                                                 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: 50px;
}

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);
}

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;
}

/*
-------------------------------------------------------------|
                                                     BUTTONS |
-------------------------------------------------------------|
*/

button,
.button,
input[type="submit"],
.btn,
.wc-block-components-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;
}

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 {
	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;
}

/*
-------------------------------------------------------------|
                                                      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.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-icon { background-color: var(--color-coral-alpha); color: var(--color-coral); }

.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;
}

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

.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 {
	margin: 0;
}

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