/*
This file was copied from google fonts cdn and then modified to host on our domain and add woff fallback:
from https://fonts.googleapis.com/css?family=Poppins:300,400,600
 */

/* latin-ext */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url(/src/fonts/poppins-v15-latin-ext-300.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-ext-300.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url(/src/fonts/poppins-v15-latin-300.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-300.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url(/src/fonts/poppins-v15-latin-ext-regular.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-ext-regular.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url(/src/fonts/poppins-v15-latin-regular.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-regular.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url(/src/fonts/poppins-v15-latin-ext-600.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-ext-600.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url(/src/fonts/poppins-v15-latin-600.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-600.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
	--font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	--guava-logo-green: #79CC7A;
	--guava-green: #079270;
	--guava-green-text: #197e62;
	--guava-green-shadow: #07927040;
	--guava-green-light: #0792702b;
	--guava-green-bg: #07927014;
	--guava-green-bg-light: #0792700d;
	--guava-green-hover: #008565; /* 8% darker than --guava-green */
	--guava-green-hover-over-white: var(--guava-green-bg);
	--guava-pink: #f9b;
	--dark-green-text: #1e4620;
	--chart-blue: #5af;
	--chart-blue-dark: #0062AD;
	--bold-blue: #1c3e7a;
	--bold-blue-hover: #122a56;
	--chart-shading-green: #e5fae5;
	--chart-shading-green-yellow: #f1fae5;
	--chart-shading-yellow: #fafae5;
	--chart-shading-orange: #faefe5;
	--chart-shading-red: #fae5e5;
	--metric-green: #79CC7A;
	--metric-green-text: #62b464;
	--metric-green-light: rgba(121, 204, 122, 0.30);
	--red-metric: #f16969;
	--orange-metric: #f19b69;
	--orange-warn: #e60;
	--blue-info: #1976d2;
	--text: #222;
	--text-muted: rgba(0, 0, 0, 0.6); /* material design recommends 60% for medium emphasis text for accessibility */
	--text-muted-hover: rgba(0, 0, 0, 0.8);
	--text-highlight-bg: #ff9633;
	--btn-red: #E53C34; /* hct(25, 84, 52) */
	--btn-red-hover: #D7312B; /* hct(25, 84, 48) */
	--btn-red-text: #E32F2A; /* hct(25, 90, 50) */
	--red-error: var(--btn-red-text);
	--logo-text: #4d4d4d;
	--icon-info-gray: #aaa;
	--icon-gray: #757575;
	--input-bg: #fff;
	--input-disabled: #666;
	--input-disabled-bg: #f4f4f4;
	--input-placeholder: #aaa;
	--input-focus-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	/* In light mode, all surfaces are white, but dark mode uses different shades for different elevations */
	--html-bg: #fff;
	--surface-bg: #fff;
	--surface-bg-8dp: #fff;
	--surface-bg-12dp: #fff;
	--surface-bg-24dp: #fff;
	--surface-bg-muted: rgba(0, 0, 0, 0.07);
	--surface-border-color: rgba(0, 0, 0, 0.13);
	--border-color: rgba(0, 0, 0, 0.13); /* e.g. for inputs, dividers..etc) */
	--btn-border-color: rgba(0, 0, 0, 0.24);
	--card-separator: 1px solid var(--border-color);
	--surface-border: 1px solid var(--surface-border-color);
	--hover-gray: rgba(0,0,0,0.07);
	--overlay-card-shadow: 0 4px 15px 2px rgba(0,0,0, 0.35);
	--btn-color: #ddd;
	--btn-color-hover: #ccc;
	--chip-bg: rgba(0, 0, 0, 0.05);
	--chip-bg-hover: rgba(0, 0, 0, 0.1);

	--gold-color: #e3b602;

	--upgrade-color-primary: #6f4db0; /* hct(303, 54, 41) */
	--upgrade-color-btn: #6f4db0; /* hct(303, 54, 41) */
	--upgrade-color-btn-hover: #6543A6; /* hct(303, 54, 37) */
	--upgrade-color-text: #5B3D8F; /* hct(303, 49, 33) */
	--upgrade-color-shadow: #9272ca40;
	--upgrade-color-light: #9272ca2b;
	--upgrade-color-bg: #F6F2F7;
	--upgrade-color-tint: #9272ca0d;
	--upgrade-color-text-darkmode: #d4bbfc; /* hct(303, 36, 80) */

	--color-help-color: #1976d2;
	--color-help-text: #1976d2;
	--color-help-color-hover: #1365b6;
	--color-help-color-hover-over-white: #1365b60d;
	--color-insights: #3F72AA;

	--color-meds: #427DCD;
	--color-vitals: #C5577F;
	--color-pdf: #ea4335;
	--color-csv: #409d52;
	--color-img: #1976d2;
	--color-report: #607d8b;
	--color-imaging: #4d4d4d;

	--profile-card-border-radius: 12px;
	--card-border-radius: 12px;

	--entry-queue-bar-z-index: 96;
	--sync-bar-z-index: 97;
	--visit-prep-status-bar-z-index: 98;
	--page-header-z-index: 100;
	--assistant-btn-z-index: 100; /* below the header menu */
	--menu-overlay-z-index: 101; /* the container capturing click-outside */
	--menu-z-index: 102; /* the actual menu */
	--search-suggest-z-index: 102;
	--bottom-nav-add-z-index: 104; /* Needs to be higher than Global Add Modal's z-index but below other modals */

	/*
	 * Modal z-index starts at 111, and is increased by one for each successive modal on top of modal.
	 * If adding a new z-index here, please reserve enough z-index range over 111 to account for multiple modals.
	 */
	--toast-z-index: 200;
	--tooltip-z-index: 1000;
	--confetti-z-index: 2000;

	--input-padding: calc(0.4em - 1px) 0.6em;
	--input-border-radius: 4px;
	--input-font-size: 16px; /* need to be minimum 16px otherwise ios will zoom in */

	/* Default Theme. Keep in sync with .theme-guava */
	--theme-color-primary: var(--guava-green);
	--theme-color-btn: var(--guava-green);
	--theme-color-btn-hover: var(--guava-green-hover);
	--theme-color-text: var(--guava-green-text);
	--theme-color-shadow: var(--guava-green-shadow);
	--theme-color-light: var(--guava-green-light);
	--theme-color-bg: var(--guava-green-bg);
	--theme-color-tint: var(--guava-green-bg-light);
	--theme-color-chart: var(--guava-green-text);

	--input-focus-border: var(--guava-green);
	--input-focus-shadow: var(--guava-green-shadow);
	--input-primary-text: var(--guava-green-text);
}

.darkmode:root {
	--guava-green: #1d9b78;
	--guava-green-text: #42b692;
	--guava-green-light: #4D92722b;
	--guava-green-shadow: #4D927240;
	--guava-green-hover-over-white: var(--guava-green-light); /* higher opacity when hovering over a dark background */
	--html-bg: #121212;
	--input-bg: #121212;
	--input-disabled: rgba(255, 255, 255, 0.38); /* according to material design */
	--input-disabled-bg: rgba(255, 255, 255, 0.07);
	--input-placeholder: rgba(255, 255, 255, 0.6);
	/* using transparency for text because it needs to work well on all surface elevations */
	--text: rgba(255, 255, 255, 0.87);  /* material design recommends 87% opacity */
	--text-muted: rgba(255, 255, 255, 0.6); /* material design recommends 60% for medium emphasis text for accessibility */
	--text-muted-hover: rgba(255, 255, 255, 0.8);
	/* surface bg color for different elevations https://material.io/design/color/dark-theme.html */
	--surface-bg: #212121; /* 2dp base surface */
	--surface-bg-8dp: #2e2e2e;
	--surface-bg-12dp: #333; /* top/bottom navs, sync bar overlay */
	--surface-bg-24dp: #383838; /* highest level of elevation, e.g. overflow menus, alerts */
	--surface-bg-muted: rgba(255, 255, 255, 0.12); /* alternating color */
	--surface-border-color: rgba(255, 255, 255, 0.07);
	--border-color: rgba(255, 255, 255, 0.14);
	--btn-border-color: rgba(255, 255, 255, 0.3);
	--logo-text: #bbb;
	--icon-gray: rgba(255, 255, 255, 0.54);
	--hover-gray: rgba(255,255,255,0.07);
	--btn-color: #555;
	--btn-color-hover: #444;
	--chip-bg: rgba(255, 255, 255, 0.08);
	--chip-bg-hover: rgba(255, 255, 255, 0.16);

	/* same hue as light color but different saturation and brightness */
	--chart-shading-green: #425c42;
	--chart-shading-green-yellow: #50603e;
	--chart-shading-yellow: #646440;
	--chart-shading-orange: #665042;
	--chart-shading-red: #664242;

	--upgrade-color-primary: #9B7AD4; /* hct(303, 49, 57) */
	--upgrade-color-btn: #7357A6; /* hct(303, 46, 43) */
	--upgrade-color-btn-hover: #7D61B1; /* hct(303, 46, 47) */
	--upgrade-color-text: var(--upgrade-color-text-darkmode);
	--upgrade-color-light: #986CE32b; /* hct(303, 61, 55), hct(303, 16, 20) on surface-bg */
	--upgrade-color-shadow: #986CE340;

	--orange-warn: #ef8c52;
	--btn-red: #D23831; /* hct(25, 80, 47) */
	--btn-red-hover: #E14239; /* hct(25, 80, 52) */
	--btn-red-text: #F96659; /* hct(25, 68, 62) */
	--color-help-color: #438ce9;
	--color-help-text: #6ca6ff;

	/* Default Theme. Keep in sync with .darkmode .theme */
	--theme-color-bg: var(--chip-bg);
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html {
	background: var(--html-bg);
}

body {
	font: 16px var(--font-stack);
	color: var(--text);
	margin: 0;
}

form {
	margin: 0; /* override browser defaults */
}

button {
	/* remove default browser styles */
	font: inherit;
	color: inherit;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
}
button:disabled {
	cursor: default;
}
button:focus {
	outline: none;
}
button:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}

a {
	color: var(--guava-green-text);
	text-decoration: none;
	cursor: pointer;
}
a.primary:not(.btn) {
	color: var(--input-primary-text);
}
a:focus {
	outline: none;
}
a:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.inline-link {
	white-space: nowrap;
	word-wrap: break-word;
}
.inline-link:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: 400;
}
/* using chrome's default header sizes */
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.5em;
}

/*** Page Structure ***/
.header-guava {
	display: flex;
	align-items: center;
	padding: 6px 20px 6px 0;
}
.header-guava a {
	display: flex;
	align-items: center;
}
.header-guava-logo {
	width: 36px;
	margin-right: 10px;
}
.header-guava-name {
	color: var(--logo-text);
	font-size: 32px;
}
.header-signin {
	flex-shrink: 0;
	margin-left: auto;
}
.header-signin .header-login {
	margin-right: 15px;
	font-size: 15px;
	color: var(--text);
}
.page {
	width: 840px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 10px 20px;
}
.page-footer {
	margin: 80px 0; /* bottom margin must be higher than SyncBar height */
	text-align: center;
	color: var(--text);
	font-size: 0.8em;
}
.page-footer-name {
	opacity: 0.4;
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px 10px 20px;
}
.page-footer a {
	margin: 3px 6px;
	color: var(--text);
	opacity: 0.4;
}

.logo-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0;
}
.logo-header-logo {
	width: 80px;
	height: 80px;
	margin-right: 12px;
}
.small .logo-header-logo {
	width: 30px;
	height: 30px;
	margin-right: 6px;
}
.logo-header-text {
	color: var(--logo-text);
	font-weight: 600;
	font-size: 51px;
}
.small .logo-header-text {
	font-size: 19px;
}

/*** Global Helpers ***/
.display-none {
	display: none !important;
}
.visibility-hidden {
	visibility: hidden;
	pointer-events: none;
}
.text-center {
	text-align: center;
}
.text-uppercase {
	text-transform: uppercase;
}
.text-muted {
	color: var(--text-muted);
}
.text-subtitle {
	font-size: 0.8em;
	color: var(--text-muted);
	font-weight: normal;
}
.text-subtitle-14 {
	font-size: clamp(14px, 0.8em, 0.8em);
	color: var(--text-muted);
	font-weight: normal;
}
.text-instructions {
	font-size: 15px;
	margin-bottom: 15px;
}
.raw-json {
	width: 100%;
	overflow-x: auto;
	background: var(--surface-bg-muted);
	font-size: 0.8em;
}
.raw-json-header {
	background: var(--guava-green-light);
	text-align: center;
	padding: 10px 15px;
}
.raw-json pre {
	margin: 0;
}

/*** Button ***/
.btn {
	--btn-text: var(--text);
	--btn-text-over-white: var(--text-muted);
	--btn-color-hover-over-white: var(--hover-gray);
	--btn-outline: var(--input-focus-shadow);
	--btn-border-width: 1px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	column-gap: 0.4em; /* spacing between icon and text */
	font-size: 15px;
	cursor: pointer;
	line-height: 1.4;
	border-radius: 3px;
	padding: 0.4em 0.8em;
	background: var(--btn-color);
	color: var(--btn-text);
	user-select: none;
	-webkit-user-select: none;
	border: none; /* override <button> defaults */
	outline: none; /* override <button> defaults */
}
.btn:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--btn-outline);
	z-index: 1; /* ensure the focused button outline stays above any elements directly next to it */
}
.btn.primary {
	--btn-color: var(--theme-color-btn);
	--btn-color-hover: var(--theme-color-btn-hover);
	--btn-text: #fff;
	--btn-border-color: var(--theme-color-btn);
	--btn-border-width: 2px;
	--btn-text-over-white: var(--input-primary-text);
	--btn-color-hover-over-white: var(--theme-color-tint);
}
.btn.green {
	--btn-color: var(--metric-green);
	--btn-color-hover: var(--metric-green-text);
	--btn-text: #fff;
	--btn-border-color: var(--metric-green);
	--btn-border-width: 2px;
	--btn-text-over-white: var(--metric-green-text);
	--btn-color-hover-over-white: var(--metric-green-light);
}
.btn.red {
	--btn-color: var(--btn-red);
	--btn-color-hover: var(--btn-red-hover);
	--btn-border-color: var(--btn-red);
	--btn-border-width: 2px;
	--btn-text: #fff;
	--btn-text-over-white: var(--btn-red-text);
}
.btn.white {
	--btn-color: #fff;
	--btn-color-hover: rgba(255, 255, 255, 0.85);
	--btn-border-color: #fff;
	--btn-border-width: 2px;
	--btn-text: #fff;
	--btn-text-over-white: #fff;
	--btn-color-hover-over-white: var(--hover-gray);
}
.darkmode .btn.red {
	/* saturated red does not look good as a border in dark mode */
	--btn-border-color: var(--btn-red-text);
}
.btn.outline {
	--btn-text: var(--btn-text-over-white);
	background: none;
	border: var(--btn-border-width) solid var(--btn-border-color);
	padding: calc(0.4em - var(--btn-border-width)) calc(0.8em - var(--btn-border-width));
}
.btn.outline.sml {
	--btn-border-width: 1px;
}
.btn.text-btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
	--btn-text: var(--btn-text-over-white);
	padding: 0;
}
.btn.round-btn {
	border-radius: 3em; /* just need to set a sufficiently high value to get "pill" shape */
	padding: 0.4em 1em;
}
.btn.round-btn.outline {
	padding: calc(0.4em - var(--btn-border-width)) calc(1em - var(--btn-border-width));
}
.btn .spinner {
	display: none;
	width: 24px;
	height: 24px;
	position: absolute;
	--spinner-color: var(--btn-text);
}
.btn-with-dot {
	position: relative;
}
.btn-dot {
	width: 10px;
	height: 10px;
	border: 1px solid var(--html-bg);
	border-radius: 50%;
	background: var(--theme-color-primary);
	position: absolute;
	top: -2px;
	right: 0;
}
.icon-btn .btn-dot {
	top: 6px;
	right: 5px;
}
.btn.loading .spinner {
	display: block;
}
.toggle-btns {
	display: flex;
}
.toggle-btns .btn {
	border-radius: 0;
}
.toggle-btns .btn:hover {
	z-index: 1; /* ensure the button's borders are visible when hovered over */
	position: relative;
}
.toggle-btns .btn:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.toggle-btns .btn:not(:last-child) {
	margin-right: -2px;
}
.toggle-btns .btn:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.btn.dismiss-btn {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	padding: 5px;
	border: 2px solid var(--surface-bg);
}
a.btn,
a.btn:hover {
	text-decoration: none;
}
.btn.lrg {
	font-size: 24px;
}
.btn.medium {
	font-size: 18px;
}
.btn.sml {
	font-size: 0.8em;
}
.btn.loading,
.btn.disabled {
	position: relative; /* for position absolute .spinner */
	opacity: 0.5;
	pointer-events: none;
}
.btn.disabled .tooltip-wrap {
	pointer-events: auto; /* Used when we want to tell people why a button is disabled */
}
.btn-svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
}
svg.btn-svg {
	fill: var(--btn-text, currentColor);
	stroke: none;
}
.btn svg {
	flex-shrink: 0;
}
.left-svg {
	margin: 0 0 0 -0.5em;
}
.icon-btn .left-svg {
	margin: 0;
}
.drop-down-svg,
.right-svg {
	margin: 0 -0.5em 0 0;
}
.btn .right-svg {
	margin-left: -0.2em; /* arrow is thinner than other icons, so decrease gap between text and icon */
}
.icon-btn .right-svg {
	margin: 0;
}
.cross-svg {
	margin: 0 -0.4em; /* undo the uneven .btn padding to make button square because there's no text */
	width: 1.4em;
	height: 1.4em; /* ensure same height as textual buttons */
}

.up-stem-svg path,
.down-stem-svg path,
.minus-svg path,
.cross-svg path,
.plus-svg path,
.forward-svg path,
.back-svg path,
.left-svg path,
.right-svg path,
.up-svg path,
.down-svg path,
.menu-svg path,
.warn-svg path,
.check-svg path {
	fill: none;
	stroke: var(--btn-text, currentColor);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 12;
}

.menu-svg path,
.check-svg path,
.minus-svg path {
	stroke-width: 2px;
}
.up-stem-svg path,
.down-stem-svg path {
	stroke-width: 10px;
}
.forward-svg path,
.back-svg path {
	fill: none !important;
	stroke: currentColor;
	stroke-width: 8px;
}
.warn-svg path {
	stroke-width: 8;
	stroke-linecap: butt;
}
.card-svg.btn-svg {
	stroke-width: 2;
	margin: -0.2em 0.4em -0.2em 0;
	width: 1.8em;
	height: 1.8em;
}
.icon-arrow {
	flex-shrink: 0;
	fill: none;
	width: 32px;
	height: 32px;
	stroke: var(--text-muted);
	stroke-width: 7px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.icon-check {
	--icon-color: var(--guava-green);
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 3px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	border: 2px solid var(--icon-color);
	border-radius: 50%;
	stroke: var(--icon-color);
	stroke-width: 2;
}
.icon-btn {
	width: 40px;
	height: 40px;
	padding: 8px;
	--btn-text: var(--text-muted);
	--btn-color-hover: var(--hover-gray);
	fill: currentColor;
	border-radius: 50%;
	background: none;
	flex-shrink: 0;
}
.dismiss-btn svg,
.icon-btn svg {
	width: 100%;
	height: 100%;
	flex-shrink: 0; /* icons should never be shrunk */
}
.icon-btn.dark-bg {
	--btn-text: #fff;
}

@media (hover: hover) {
	.btn:hover {
		background: var(--btn-color-hover);
	}
	.btn.outline:hover {
		background: var(--btn-color-hover-over-white);
	}
	.icon-btn:hover {
		--btn-text: var(--text-muted-hover);
		color: var(--text-muted-hover);
	}
	.icon-btn.dark-bg:hover {
		color: #fff;
		--btn-text: #fff;
		background: rgba(255, 255, 255, 0.15);
	}
	.text-btn:hover {
		text-decoration: underline;
	}
}

/*** Forms ***/
.form .text-input {
	width: 100%;
}
.form-label {
	display: block; /* override if used with <label> instead of <div> */
	margin: 20px 0 5px;
}
.form-label.optional {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.form-label-inline-wrapper {
	margin-top: 20px; /* need wrapper to put line break before label and input */
}
.form-label-inline {
	/*
	 * need inline block so entire space to right of label doesn't become clickable label
	 * currently only works when the input following it has display block
	 */
	display: inline-block;
	margin-bottom: 5px;
}
.form-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin: 3px 0;
}
.form-description {
	font-size: 0.8em;
	color: var(--text-muted);
	margin: 15px 0;
}
.form-show-password-btn {
	float: right;
	margin-top: 2px;
}
.form-checkbox {
	margin: 20px 0 20px 3px; /* inlay checkbox same amount as border radius of inputs */
}
.form-checkbox + .form-checkbox {
	margin-top: -5px;
}
.form-error {
	margin: 20px 0;
	color: var(--red-error);
}
.form-error:empty {
	display: none;
}
.form-error:last-child {
	margin-bottom: 0;
}
.form-blocks {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 5px -15px 5px 0;
}
.form-block {
	margin: 15px 15px 0 0;
}
.form-block.grow {
	flex-grow: 1;
}
.form-block > .form-label {
	margin-top: 0;
}
.form-btns {
	margin: 25px 0 0;
}
.form-btns.flex-row {
	display: flex;
	align-items: center;
	gap: 15px;
}
.card-header.space-between,
.form-btns.space-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.form-btns.align-right {
	display: flex;
	justify-content: flex-end;
}
.form-btns.align-center {
	display: flex;
	justify-content: center;
}
/* increase minimum click area, but don't affect .text-btn */
.form-btns .round-btn {
	min-width: 100px;
}
.form-btns .round-btn.medium {
	min-width: 200px;
}
.form-btns.full-width .btn {
	width: 100%;
}
/* should align with width where card-modal becomes fullscreen */
@media (max-width: 500px) {
	.form-btns.fixed {
		height: 3em; /* reserve roughly enough height for height+padding since button is fixed and won't affect layout */
	}
	.form-btns.fixed .btn {
		position: fixed;
		bottom: 10px;
		left: 15%;
		width: 70%;
		font-size: 1.3em;
		box-shadow: 0 0 10px 3px var(--surface-bg);
	}
}
/*** Text Input ***/
.text-input,
.time-input,
.number-input {
	display: inline-block;
	padding: var(--input-padding);
	width: 200px;
	font-family: var(--font-stack);
	font-size: var(--input-font-size);
	line-height: 1.4;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	transition: var(--input-focus-transition);
	-webkit-appearance: none; /* prevent ios safari from forcing inset shadow and border-radius */
}
.time-input {
	display: inline-flex; /* On Safari, inline-block makes time-input is not vertically aligned */
}
.text-input:focus,
.time-input:focus,
.number-input:focus,
.textarea-input:focus {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.text-input::placeholder,
.time-input::placeholder,
.number-input::placeholder,
.textarea-input::placeholder {
	color: var(--input-placeholder);
}
.text-input:disabled,
.time-input:disabled,
.number-input:disabled,
.textarea-input:disabled {
	background: var(--input-disabled-bg);
	color: var(--input-disabled);
}
.text-input.lrg,
.time-input.lrg,
.number-input.lrg {
	border-radius: 5px;
	font-size: 1.2em;
	padding: calc(0.675em - 1px) 0.6em; /* to achieve equivalent height as if font-size 1.5em were used */
}
.time-input {
	width: 130px;
	min-height: 35px; /* bug in iOS chrome and safari where height is shrunken if time inputs are empty */
}
.number-input {
	width: 100px; /* numbers are almost never 200px long, save some space */
}
.number-input.lrg {
	width: 120px;
}
.number-input-unit-suffix {
	font-size: 0.8em;
	color: var(--text-muted);
	margin-left: 10px;
}

/*** Text Area ***/
.textarea-input {
	resize: none;
	width: 100%;
	height: 10em;
	font-size: var(--input-font-size);
	padding: var(--input-padding);
	line-height: 1.4;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	transition: var(--input-focus-transition);
	font-family: var(--font-stack);
	-webkit-appearance: none; /* prevent ios safari from adding inset shadow */
	vertical-align: top; /* remove random extra below input when used as inline-block */
}
.textarea-input.lrg {
	font-size: 18px;
}
.textarea-input.short {
	height: 5em;
}
.textarea-input.two-line {
	height: 3.6em;
}
.textarea-input.single-line {
	height: 2.2em;
}
.textarea-input.expandable {
	resize: vertical;
}
.textarea-input.error {
	border-color: var(--red-error);
}


/*** Select Dropdowns ***/
.select {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
}
/* triangle icon */
.select:after {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	top: 50%;
	margin-top: -2px; /* 1 pixel below vertically centered because it looks cleaner */
	right: 9px;
	border: solid transparent;
	border-width: 6px 5px;
	border-top-color: var(--icon-gray);
	pointer-events: none;
}
.select select {
	width: 100%; /* to prevent a long label from pushing the select off screen */
	/* Similar style as text-input */
	padding: var(--input-padding);
	font-size: var(--input-font-size);
	line-height: 1.4;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	transition: var(--input-focus-transition);

	padding-right: 24px; /* account for the triangle icon */
	text-align: left;
	cursor: pointer;
	-moz-appearance: none; /* hiding the default arrow */
	-webkit-appearance: none;
	margin: 0; /* otherwise safari adds top and bottom margin... */
}
.select.lrg select {
	border-radius: 5px;
	font-size: 1.5em;
}
.select.round:after {
	right: 12px;
}
.select.round select {
	padding-left: 0.8em;
	padding-right: 27px;
	border-radius: 50px;
}
.select.center select {
	text-align: center;
}
.select select:focus {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.select.loading,
.select.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.select .spinner {
	position: absolute;
	width: 25px;
	height: 25px;
	--spinner-color: currentColor;
}

/*** Radio Buttons ***/
.radio-group-label {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.radio-input {
	margin: 10px;
}

/*** Spinner ***/
.spinner {
	--spinner-color: var(--guava-green);
	--spinner-stroke: 5px;

	flex-shrink: 0;
	position: relative;
	width: 30px;
	height: 30px;
	display: inline-block;
}
.spinner.thin {
	--spinner-stroke: 3px;
}
.spinner.primary {
	--spinner-color: var(--theme-color-primary);
}
.spinner:before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	margin-top: -50%;
	margin-left: -50%;
	border-radius: 50%;
	border-top: var(--spinner-stroke) solid var(--spinner-color);
	border-right: var(--spinner-stroke) solid transparent;
	animation: spinner 0.7s linear infinite;
}
.spinner-wrap {
	text-align: center;
	padding: 20px;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

.spinner.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	z-index: 1;
}
.spinner.small {
	width: 30px;
	height: 30px;
}

.container-loading {
	opacity: 0.5;
	pointer-events: none;
}

/*** Card ***/
.card {
	position: relative;
	background: var(--surface-bg);
	border-radius: var(--card-border-radius);
	margin-bottom: 10px; /* TODO shouldn't be here? */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	/*overflow: hidden; !* overflow hidden will clip popup menu *!*/
}

.card-header {
	padding: 15px;
	font-size: 20px;
	border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

/* Card Title + action button */
.card-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.card-header-subtitle {
	font-size: 14px;
	color: #888;
}

/* Header with dark bg */
.card-header-dark {
	background: #3962ad;
	color: #fff;
	border: none;
}

.card-header-dark .card-header-subtitle {
	color: rgba(255,255,255,0.8);
}

.card-header-dark .card-header-action-btn {
	background: rgba(0,0,0,0.25);
	color: #fff;
}
.card-header-dark .card-header-action-btn:hover {
	background: rgba(0,0,0,0.4);
}

/* Header with theme primary color bg */
.card-header-primary {
	background: var(--theme-color-primary);
	color: #fff;
	border: none;
}
.card-header-primary .card-header-subtitle {
	color: rgba(255,255,255,0.8);
}

.card-header-primary .btn.outline {
	--btn-text: #fff;
	--btn-color: #fff;
}

.card-header-primary .btn.outline:hover {
	background: #ffffff20;
}

.card-section {
	position: relative;
	padding: 15px;
}

.card-section:not(:first-child) {
	border-top: var(--card-separator);
}

.card-section > p:first-child,
.card-section > .form-label:first-child {
	margin-top: 0;
}
.card-section-header {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.card-section-header .btn-svg {
	--btn-text: var(--theme-color-primary);
}
.card-section-header.themed {
	color: var(--theme-color-text);
}

/* Card Forms */
.modal .card-section-form.card-section, /* need to define this to win specificity against ".modal .card-section" */
.card-section-form.card-section {
	padding-top: 0; /* need to remove padding due to margin-top in form labels */
}

.card-sec-title {
	font-size: 20px;
}

.card-footer {
	padding: 5px 15px;
	border-top: var(--card-separator);
}

.card-error {
	display: flex;
	padding: 15px;
	justify-content: space-between;
	align-items: center;
	color: var(--red-error);
}
.card.info-card {
	padding: 60px;
}
@media (max-width: 550px) {
	.card.info-card {
		padding: 20px;
	}
}
.detail-modal-section-card {
	padding: 20px;
	margin: 15px 10px;
	background: var(--portal-surface-bg);
	border-radius: var(--card-border-radius);
}
@media (max-width: 360px) {
	.detail-modal-section-card {
		margin-left: 5px;
		margin-right: 5px;
	}
}

.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: var(--menu-overlay-z-index);
}

.has-tooltip {
	border-bottom: 1px dashed var(--border-color);
}

.help-btn {
	font-size: 14px;
	color: var(--text-muted);
}

.notice {
	padding: 15px;
	border: 1px solid var(--notice-primary);
	border-radius: var(--card-border-radius);
	background: var(--notice-bg);
	color: var(--notice-text);
}
.notice.with-icon {
	display: flex;
	align-items: center;
}
.notice.success {
	--notice-primary: #4caf50;
	--notice-text: var(--dark-green-text);
	--notice-bg: #edf7ed;
}
.darkmode .notice.success {
	--notice-primary: #31AB5A;
	--notice-bg: #252b24;
}
.notice.info {
	--notice-bg: #e8f4fd;
	--notice-text: #0d3c61;
	--notice-primary: #2196f3;
}
.darkmode .notice.info {
	--notice-bg: #212a32;
}
.notice.warning {
	--notice-bg: #fef4e5;
	--notice-text: #663c00;
	--notice-primary: #ff9800;
}
.darkmode .notice.warning {
	--notice-bg: #332928;
	--notice-primary: #EC8C00;
}
.notice.error {
	--notice-bg: #fdecea;
	--notice-text: #611a15;
	--notice-primary: #f44336;
}
.darkmode .notice.error {
	--notice-bg: #332928;
	--notice-primary: #FF6151;
}
.notice.primary {
	border: none;
	--notice-bg: var(--theme-color-light);
	--notice-text: var(--text);
	--notice-primary: var(--theme-color-primary);
}
.darkmode .notice {
	--notice-text: var(--text);
}
.notice .toast-icon {
	stroke: var(--notice-primary);
}
.notice .spinner {
	--spinner-color: var(--notice-primary);
}
.notice .spinner:last-child {
	margin-left: 10px;
}
.site-banner {
	padding: 10px;
	color: #fff;
	text-align: center;
}
.site-banner.error {
	background: #8b0000;
}

.tag-labels {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 5px 0;
	flex-wrap: wrap;
}
.tag-label {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	border-radius: 20px;
	font-size: 14px;
	border: var(--card-separator);
	background: var(--input-disabled-bg);
	color: var(--text);
	white-space: nowrap;
}
.tag-label.red {
	color: var(--btn-red-text);
	border-color: var(--btn-red);
	background: none;
}
.darkmode .tag-label.red {
	/* saturated red does not look good as a border in dark mode */
	border-color: var(--btn-red-text);
}

.beta-label {
	text-transform: uppercase;
	font-size: 0.7em;
	font-weight: 600;
	margin-left: 5px;
	opacity: 0.65;
}
.tag-label.new-label {
	font-weight: 600;
	font-size: 10px;
	height: 2em;
	padding: 3px 9px;
	border: none;
}
.tag-label-text-wrap {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.tag-label.new-label.primary {
	background: var(--theme-color-light);
	color: var(--theme-color-text);
}
.tag-label.premium-label {
	font-weight: 400;
	font-size: 10px;
	height: 2em;
	letter-spacing: 1px;
	padding: 3px 9px 3px 10px; /* to account for letter spacing */
	background: var(--upgrade-color-btn);
	color: #fff;
	border: none;
}

/*
Themes

Keep in sync with EmailSummary.php for backend colors
Use HCT color mode to ensure colors have similar colorfulness and contrast https://material-foundation.github.io/material-theme-builder/
Some dark mode text should have less chroma to avoid the "neon" look for colorful light text on dark background (e.g. red, yellow, green)

--theme-color-primary: used for icons against surface, or large surfaces in light mode like card header
--theme-color-btn: button background, or anything that needs to contrast against white on it
    Preferred tone ~50 for 5:1 contrast with white text on both light and dark mode
--theme-color-btn-hover: 8% darker / lighter than btn
--theme-color-text: text on surface.
    Tone is 40 for light and 70 for dark for 6:1 contrast
--theme-color-chart: chart background. Default to text if not given
--theme-color-bg: very faint colored background. Use as a surface (e.g. a card background)
    Set the primary color with 8% opacity, then copy the copy into HCT picker and make the tone 96%. Adjust the chroma and hue until it looks nice.
    The chroma should not be above 6, and in some cases may have to be drastically lowered (e.g. reds). Compare on insights modal to make sure visual coherence with other themes
--theme-color-light: light background for buttons, notice, banners
    Opacity 2b (16%) for light mode. For dark mode, first find the color that looks good on surface-bg, then find the color with opacity 16% to handle surface elevations
*/
.theme {
	--theme-color-primary: var(--theme-color-primary-lightmode);
	--theme-color-btn: var(--theme-color-btn-lightmode);
	--theme-color-btn-hover: var(--theme-color-btn-hover-lightmode);
	--theme-color-text: var(--theme-color-text-lightmode);
	--theme-color-chart: var(--theme-color-chart-lightmode);
	--theme-color-shadow: var(--theme-color-shadow-lightmode);
	--theme-color-light: var(--theme-color-light-lightmode);
	--theme-color-bg: var(--theme-color-bg-lightmode);
	--theme-color-tint: var(--theme-color-tint-lightmode);
	--input-focus-border: var(--theme-color-primary);
	--input-focus-shadow: var(--theme-color-shadow);
	--input-primary-text: var(--theme-color-text);
	/* default fallback themes */
	--theme-color-chart-lightmode: var(--theme-color-text);
	--theme-color-chart-darkmode: var(--theme-color-text);
}
.theme.theme-genetics,
.theme.theme-guava {
	/* Keep in sync with default theme. Defined here so we can override a differently-themed parent */
	--theme-color-primary-lightmode: var(--guava-green);
	--theme-color-btn-lightmode: var(--guava-green);
	--theme-color-btn-hover-lightmode: var(--guava-green-hover);
	--theme-color-text-lightmode: var(--guava-green-text);
	--theme-color-shadow-lightmode: var(--guava-green-shadow);
	--theme-color-light-lightmode: var(--guava-green-light);
	--theme-color-bg-lightmode: var(--guava-green-bg);
	--theme-color-tint-lightmode: var(--guava-green-bg-light);
	--theme-color-primary-darkmode: var(--guava-green);
	--theme-color-btn-darkmode: var(--guava-green);
	--theme-color-btn-hover-darkmode: var(--guava-green-hover);
	--theme-color-text-darkmode: var(--guava-green-text);
	--theme-color-light-darkmode: var(--guava-green-light);
	--theme-color-shadow-darkmode: var(--guava-green-shadow);
}
.theme.theme-insights {
	--theme-color-primary-lightmode: var(--color-insights); /* hct(255, 41, 47) */
	--theme-color-btn-lightmode: var(--color-insights); /* hct(255, 41, 47) */
	--theme-color-btn-hover-lightmode: #34689F; /* hct(255, 41, 43) */
	--theme-color-text-lightmode: #1A558B; /* hct(255, 41, 35) */
	--theme-color-shadow-lightmode: #366aa140;
	--theme-color-light-lightmode: #366aa12b;
	--theme-color-bg-lightmode: #F0F4F9;
	--theme-color-tint-lightmode: #366aa10d;
	--theme-color-primary-darkmode: #5B8CC5; /* hct(255, 41, 57) */
	--theme-color-btn-darkmode: #3F72AA; /* hct(255, 41, 47) */
	--theme-color-btn-hover-darkmode: #4A7CB5; /* hct(255, 41, 51) */
	--theme-color-text-darkmode: #A1C9FF; /* hct(255, 41, 80) */
	--theme-color-light-darkmode: #4085E92b; /* hct(263, 59, 56), hct(255, 16, 20) on surface-bg */
	--theme-color-shadow-darkmode: #4085E940;
}
.theme.theme-sleep {
	--theme-color-primary-lightmode: #7175C6; /* hct(284, 46, 52) */
	--theme-color-btn-lightmode: #7175C6; /* hct(284, 46, 52) */
	--theme-color-btn-hover-lightmode: #676ABA; /* hct(284, 46, 48) */
	--theme-color-text-lightmode: #4C4F9C; /* hct(284, 46, 37) */
	--theme-color-shadow-lightmode: #3641a140;
	--theme-color-light-lightmode: #3641a12b;
	--theme-color-bg-lightmode: #F2F3F9;
	--theme-color-tint-lightmode: #3641a10d;
	--theme-color-primary-darkmode: #8181D1; /* hct(284, 46, 57) */
	--theme-color-btn-darkmode: #7174C5; /* hct(284, 46, 52) */
	--theme-color-btn-hover-darkmode: #7B7FD1; /* hct(284, 46, 56) */
	--theme-color-text-darkmode: #C0C1FF; /* hct(284, 40, 80) */
	--theme-color-light-darkmode: #7278EF2b; /* hct(84, 61, 55), hct(284, 16, 20) on surface-bg */
	--theme-color-shadow-darkmode: #7278EF40;
}
.theme.theme-pee,
.theme.theme-vaccination,
.theme.theme-sauna,
.theme.theme-activity {
	--theme-color-primary-lightmode: #D2A528; /* hct(88, 49, 70) */
	--theme-color-btn-lightmode: #D2A528; /* hct(88, 49, 70) */
	--theme-color-btn-hover-lightmode: #BA900F; /* hct(88, 48, 62) */
	--theme-color-text-lightmode: #99771D; /* hct(88, 40, 52) */
	--theme-color-chart-lightmode: #C0951C; /* hct(88, 48, 64) */
	--theme-color-shadow-lightmode: #e2ad3840;
	--theme-color-light-lightmode: #e2ad382b;
	--theme-color-bg-lightmode: #FCF8EE;
	--theme-color-tint-lightmode: #e2ad380d;
	--theme-color-primary-darkmode: #D2A528; /* hct(88, 49, 70) */
	--theme-color-btn-darkmode: #BA900F; /* hct(88, 48, 62) */
	--theme-color-btn-hover-darkmode: #AB8300; /* hct(88, 48, 57) */
	--theme-color-text-darkmode: #E2C37C; /* hct(88, 30, 80) */
	--theme-color-light-darkmode: #917F592b; /* hct(88, 19, 54), hct(88, 4, 20) on surface-bg */
	--theme-color-shadow-darkmode: #917F5940;
}
.theme.theme-water {
	--theme-color-primary-lightmode: #3592ca; /* hct(242, 46, 57) */
	--theme-color-btn-lightmode: #3592ca; /* hct(242, 46, 57) */
	--theme-color-btn-hover-lightmode: #2286BD; /* hct(242, 46, 53) */
	--theme-color-text-lightmode: #0076AC; /* hct(242, 46, 47) */
	--theme-color-shadow-lightmode: #3592ca40;
	--theme-color-light-lightmode: #3592ca2b;
	--theme-color-bg-lightmode: #EFF4F7;
	--theme-color-tint-lightmode: #3592ca0d;
	--theme-color-primary-darkmode: #3592ca; /* hct(242, 46, 57) */
	--theme-color-btn-darkmode: #1D83BA; /* hct(242, 46, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #8DCDFF; /* hct(242, 46, 80) */
	--theme-color-chart-darkmode: #4EA3DB; /* hct(242, 46, 64) */
	--theme-color-light-darkmode: #3A8BD02b; /* hct(251, 50, 56), hct(242, 14, 20) on surface-bg */
	--theme-color-shadow-darkmode: #3A8BD040;
}
.theme.theme-caffeine {
	--theme-color-primary-lightmode: #98786d; /* hct(38, 14, 52) */
	--theme-color-btn-lightmode: #98786d; /* hct(38, 14, 52) */
	--theme-color-btn-hover-lightmode: #8A6B60; /* hct(38, 14, 48) */
	--theme-color-text-lightmode: #75584E; /* hct(38, 14, 40) */
	--theme-color-shadow-lightmode: #8d6e6340;
	--theme-color-light-lightmode: #8d6e632b;
	--theme-color-bg-lightmode: #F7F3F2;
	--theme-color-tint-lightmode: #8d6e630d;
	--theme-color-primary-darkmode: #AA8A7E; /* hct(38, 14, 60) */
	--theme-color-btn-darkmode: #98786d; /* hct(38, 14, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #E3BFB3; /* hct(38, 14, 70) */
	--theme-color-light-darkmode: #987F772b; /* hct(38, 11, 55), hct(38, 2, 20) on surface-bg */
	--theme-color-shadow-darkmode: #987F7740;
}
.theme.theme-encounter,
.theme.theme-alcohol {
	--theme-color-primary-lightmode: #8B6CC2; /* hct(303, 49, 52) */
	--theme-color-btn-lightmode: #8B6CC2; /* hct(303, 49, 52) */
	--theme-color-btn-hover-lightmode: #8162B7; /* hct(303, 49, 48) */
	--theme-color-text-lightmode: #6D4EA3; /* hct(303, 49, 40) */
	--theme-color-shadow-lightmode: #9272ca40;
	--theme-color-light-lightmode: #9272ca2b;
	--theme-color-bg-lightmode: #f6f4fa;
	--theme-color-tint-lightmode: #9272ca0d;
	--theme-color-primary-darkmode: #997BCD; /* hct(303, 46, 57) */
	--theme-color-btn-darkmode: #8568B9; /* hct(303, 46, 50) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #d4bbfc; /* hct(303, 36, 80) */
	--theme-color-light-darkmode: #9272CA2b; /* hct(303, 49, 54), hct(303, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #9272CA40;
}
.theme.theme-mood {
	--theme-color-primary-lightmode: #a76ab2; /* hct(325, 46, 54) */
	--theme-color-btn-lightmode: #a76ab2; /* hct(325, 46, 54) */
	--theme-color-btn-hover-lightmode: #9D61A8; /* hct(325, 46, 50) */
	--theme-color-text-lightmode: #864D92; /* hct(325, 46, 42) */
	--theme-color-shadow-lightmode: #aa68b640;
	--theme-color-light-lightmode: #aa68b62b;
	--theme-color-bg-lightmode: #F8F2F5;
	--theme-color-tint-lightmode: #aa68b60d;
	--theme-color-primary-darkmode: #B57DBE; /* hct(325, 42, 60) */
	--theme-color-btn-darkmode: #a76ab2; /* hct(325, 46, 54) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #F2AFFD; /* hct(325, 46, 80) */
	--theme-color-light-darkmode: #B16CB72b; /* hct(325, 49, 56), hct(325, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B16CB740;
}
.theme.theme-energy {
	--theme-color-primary-lightmode: #3BA08F; /* hct(181, 40, 60) */
	--theme-color-btn-lightmode: #319887; /* hct(181, 40, 57) */
	--theme-color-btn-hover-lightmode: #1E8B7A; /* hct(181, 40, 52) */
	--theme-color-text-lightmode: #007E6E; /* hct(181, 40, 47) */
	--theme-color-shadow-lightmode: #32c4ae40;
	--theme-color-light-lightmode: #32c4ae2b;
	--theme-color-bg-lightmode: #EFF5F2;
	--theme-color-tint-lightmode: #32c4ae0d;
	--theme-color-primary-darkmode: #42A693; /* hct(181, 40, 62) */
	--theme-color-btn-darkmode: #329887; /* hct(181, 40, 57) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #89D5C4; /* hct(181, 34, 80) */
	--theme-color-light-darkmode: #538B7F2b; /* hct(181, 28, 53), hct(181, 8, 20) on surface-bg */
	--theme-color-shadow-darkmode: #538B7F40;
}
.theme.theme-respiratory-rate,
.theme.theme-glucose,
.theme.theme-blood-oxygen,
.theme.theme-body-temp,
.theme.theme-peak-flow,
.theme.theme-heart {
	--theme-color-primary-lightmode: var(--color-vitals); /* hct(0.4, 55, 52) */
	--theme-color-btn-lightmode: var(--color-vitals); /* hct(0.4, 55, 52) */
	--theme-color-btn-hover-lightmode: #B84D75; /* hct(0.4, 55, 48) */
	--theme-color-text-lightmode: #A03A60; /* hct(0.4, 55, 40) */
	--theme-color-shadow-lightmode: #ca537f40;
	--theme-color-light-lightmode: #ca537f2b;
	--theme-color-bg-lightmode: #F8F2F2;
	--theme-color-tint-lightmode: #ca537f0d;
	--theme-color-primary-darkmode: #D1658C; /* hct(0.4, 53, 57) */
	--theme-color-btn-darkmode: #B54B72; /* hct(0.4, 55, 47) */
	--theme-color-btn-hover-darkmode: #C4577E; /* hct(0.4, 55, 52) */
	--theme-color-text-darkmode: #FFB1C7; /* hct(0.4, 40, 80) */
	--theme-color-chart-darkmode: #E47A9E; /* hct(0.4, 50, 64) */
	--theme-color-light-darkmode: #BB6C862b; /* hct(0.4, 39, 55), hct(0.4, 8, 20) */
	--theme-color-shadow-darkmode: #BB6C8640;
}
.theme.theme-meds {
	--theme-color-primary-lightmode: var(--color-meds); /* hct(261, 50, 52) */
	--theme-color-btn-lightmode: var(--color-meds); /* hct(261, 50, 52) */
	--theme-color-btn-hover-lightmode: #3572C2; /* hct(261, 50, 48) */
	--theme-color-text-lightmode: #1D5EAA; /* hct(261, 50, 40) */
	--theme-color-shadow-lightmode: #4a84d440;
	--theme-color-light-lightmode: #4a84d42b;
	--theme-color-bg-lightmode: #EFF4FA;
	--theme-color-tint-lightmode: #4a84d40d;
	--theme-color-primary-darkmode: #5892E3; /* hct(261, 51, 60) */
	--theme-color-btn-darkmode: #3C78C7; /* hct(261, 50, 50) */
	--theme-color-btn-hover-darkmode: #4882D2; /* hct(261, 50, 54) */
	--theme-color-text-darkmode: #A7C8FF; /* hct(261, 50, 80) */
	--theme-color-light-darkmode: #3A87E72b; /* hct(261, 58, 56), hct(261 16, 20) on surface-bg */
	--theme-color-shadow-darkmode: #3A87E740;
}
.theme.theme-doctor,
.theme.theme-weather,
.theme.theme-weight,
.theme.theme-height {
	--theme-color-primary-lightmode: #2697a6; /* hct(209, 41, 57) */
	--theme-color-btn-lightmode: #038998; /* hct(209, 41, 52) */
	--theme-color-btn-hover-lightmode: #007E8C; /* hct(209, 41, 48) */
	--theme-color-text-lightmode: #006973; /* hct(209 41, 40) */
	--theme-color-shadow-lightmode: #2697a640;
	--theme-color-light-lightmode: #2697a62b;
	--theme-color-bg-lightmode: #f0f7f8;
	--theme-color-tint-lightmode: #2697a60d;
	--theme-color-primary-darkmode: #3C96A3; /* hct(209, 37, 57) */
	--theme-color-btn-darkmode: #008998; /* hct(209, 41, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #93D0DB; /* hct(209, 30, 80) */
	--theme-color-light-darkmode: #2B93A02b; /* hct(209, 39, 56), hct(209, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #2B93A040;
}
.theme.theme-food {
	--theme-color-primary-lightmode: #44995B; /* hct(152, 48, 57) */
	--theme-color-btn-lightmode: #368C4F; /* hct(152, 48, 52) */
	--theme-color-btn-hover-lightmode: #2A8246; /* hct(152, 48, 48) */
	--theme-color-text-lightmode: #1F6C38; /* hct(152, 48, 40) */
	--theme-color-chart-lightmode: #368C4F; /* hct(152, 48, 52) */
	--theme-color-shadow-lightmode: #4a9f6040;
	--theme-color-light-lightmode: #4a9f602b;
	--theme-color-bg-lightmode: #F0F5EE;
	--theme-color-tint-lightmode: #4a9f600d;
	--theme-color-primary-darkmode: #46995B; /* hct(152, 48, 57) */
	--theme-color-btn-darkmode: #368C4F; /* hct(152, 48, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #93D69C; /* hct(152, 40, 80) */
	--theme-color-chart-darkmode: #69A974; /* hct(152, 40, 64) */
	--theme-color-light-darkmode: #608B602b; /* hct(148, 32, 54), hct(152, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #608B6040;
}
.theme.theme-head-circumference {
	--theme-color-primary-lightmode: #BD8274; /* hct(31, 26, 60) */
	--theme-color-btn-lightmode: #BD8274; /* hct(31, 26, 60) */
	--theme-color-btn-hover-lightmode: #B2786A; /* hct(31, 26, 56) */
	--theme-color-text-lightmode: #996155; /* hct(31, 26, 47) */
	--theme-color-shadow-lightmode: #ce918340;
	--theme-color-light-lightmode: #ce91832b;
	--theme-color-bg-lightmode: #F7F2F1;
	--theme-color-tint-lightmode: #ce91830d;
	--theme-color-primary-darkmode: #C38779; /* hct(31, 26, 62) */
	--theme-color-btn-darkmode: #BD8274; /* hct(31, 26, 60) */
	--theme-color-btn-hover-darkmode: #CF9283; /* hct(31, 26, 66) */
	--theme-color-text-darkmode: #E5BEB4; /* hct(31, 15, 80) */
	--theme-color-light-darkmode: #9378732b; /* hct(31, 12, 53), hct(31, 2, 20) on surface-bg */
	--theme-color-shadow-darkmode: #93787340;
}
.theme.theme-symptoms {
	--theme-color-primary-lightmode: #649470; /* hct(155, 31, 57) */
	--theme-color-btn-lightmode: #578763; /* hct(155, 31, 52) */
	--theme-color-btn-hover-lightmode: #4D7C59; /* hct(155, 31, 48) */
	--theme-color-text-lightmode: #467552; /* hct(155, 31, 45) */
	--theme-color-shadow-lightmode: #64947040;
	--theme-color-light-lightmode: #6494702b;
	--theme-color-bg-lightmode: #F1F5EF;
	--theme-color-tint-lightmode: #6494700d;
	--theme-color-primary-darkmode: #649470; /* hct(155, 31, 57) */
	--theme-color-btn-darkmode: #578763; /* hct(155, 31, 52) */
	--theme-color-btn-hover-darkmode: #649470;
	--theme-color-text-darkmode: #9FD3AA; /* hct(155, 31, 80) */
	--theme-color-light-darkmode: #558B642b; /* hct(155, 34, 53), hct(155, 8, 20) on surface-bg */
	--theme-color-shadow-darkmode: #558B6440;
}
.theme.theme-basic-info,
.theme.theme-charcoal {
	--theme-color-primary-lightmode: #757575;
	--theme-color-btn-lightmode: #757575;
	--theme-color-btn-hover-lightmode: #686868;
	--theme-color-text-lightmode: #4B4B4B;
	--theme-color-shadow-lightmode: #75757540;
	--theme-color-light-lightmode: #7575752b;
	--theme-color-bg-lightmode: #F4F4F4;
	--theme-color-tint-lightmode: #7575750d;
	--theme-color-primary-darkmode: #757575;
	--theme-color-btn-darkmode: #757575;
	--theme-color-btn-hover-darkmode: #848484;
	--theme-color-text-darkmode: #C6C6C6;
	--theme-color-light-darkmode: #7575752b;
	--theme-color-shadow-darkmode: #75757540;
}
.theme.theme-labs {
	--theme-color-primary-lightmode: #008C7E; /* hct(185, 44, 52) */
	--theme-color-btn-lightmode: #008C7E; /* hct(185, 44, 52) */
	--theme-color-btn-hover-lightmode: #008073; /* hct(185, 44, 48) */
	--theme-color-text-lightmode: #006A60; /* hct(185, 44, 40) */
	--theme-color-shadow-lightmode: #00968840;
	--theme-color-light-lightmode: #0096882b;
	--theme-color-bg-lightmode: #eef7f6;
	--theme-color-tint-lightmode: #0096880d;
	--theme-color-primary-darkmode: #089A8B; /* hct(185, 44, 57) */
	--theme-color-btn-darkmode: #008C7E; /* hct(185, 44, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #82D5C8; /* hct(185, 36, 80) */
	--theme-color-light-darkmode: #3F92862b; /* hct(185, 35, 55), hct(185, 10, 20) on surface-bg */
	--theme-color-shadow-darkmode: #3F928640;
}
/* Same as alcohol / encounter theme with slight tweaks (darker to give a more premium vibe) */
.theme.theme-upgrade {
	--theme-color-primary-lightmode: var(--upgrade-color-primary);
	--theme-color-btn-lightmode: var(--upgrade-color-btn);
	--theme-color-btn-hover-lightmode: var(--upgrade-color-btn-hover);
	--theme-color-text-lightmode: var(--upgrade-color-text);
	--theme-color-shadow-lightmode: var(--upgrade-color-shadow);
	--theme-color-light-lightmode: var(--upgrade-color-light);
	--theme-color-bg-lightmode: var(--upgrade-color-bg);
	--theme-color-tint-lightmode: var(--upgrade-color-tint);
	--theme-color-primary-darkmode: var(--upgrade-color-primary);
	--theme-color-btn-darkmode: var(--upgrade-color-btn);
	--theme-color-btn-hover-darkmode: var(--upgrade-color-btn-hover);
	--theme-color-text-darkmode: var(--upgrade-color-text);
	--theme-color-light-darkmode: var(--upgrade-color-light);
	--theme-color-shadow-darkmode: var(--upgrade-color-shadow);
}
.theme.theme-cycle {
	--theme-color-primary-lightmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-lightmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-hover-lightmode: #B26480; /* hct(359, 40, 52) */
	--theme-color-text-lightmode: #904762; /* hct(259, 40, 40) */
	--theme-color-shadow-lightmode: #cc799640;
	--theme-color-light-lightmode: #cc79962b;
	--theme-color-bg-lightmode: #F8F2F4;
	--theme-color-tint-lightmode: #cc79960d;
	--theme-color-primary-darkmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-darkmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-hover-darkmode: #CD7A98; /* hct(359, 40, 61) */
	--theme-color-text-darkmode: #FFB0CA; /* hct(359, 40, 80) */
	--theme-color-light-darkmode: #D4608D2b; /* hct(359. 57, 56), hct(259, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #D4608D40;
}
.theme.theme-covid,
.theme.theme-insurance {
	--theme-color-primary-lightmode: #CF8533; /* hct(64, 45, 62) */
	--theme-color-btn-lightmode: #C9802E; /* hct(64, 45, 60) */
	--theme-color-btn-hover-lightmode: #BD7624; /* hct(64, 45, 56) */
	--theme-color-text-lightmode: #8B5000; /* hct(64, 45, 40) */
	--theme-color-shadow-lightmode: #e6994540;
	--theme-color-light-lightmode: #e699452b;
	--theme-color-bg-lightmode: #F9F3EE;
	--theme-color-tint-lightmode: #e699450d;
	--theme-color-primary-darkmode: #C07825; /* hct(64, 45, 57) */
	--theme-color-btn-darkmode: #C07825; /* hct(64, 45, 57) */
	--theme-color-btn-hover-darkmode: #CC8331; /* hct(64, 45, 61) */
	--theme-color-text-darkmode: #E39C53; /* hct(64, 40, 80) */
	--theme-color-light-darkmode: #A575452b; /* hct(64, 29, 53), hct(84, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #A5754540;
}
.theme.theme-condition {
	--theme-color-primary-lightmode: #AA8C5C; /* hct(80, 24, 60) */
	--theme-color-btn-lightmode: #AA8C5C; /* hct(80, 24, 60) */
	--theme-color-btn-hover-lightmode: #9F8253; /* hct(80, 24, 56) */
	--theme-color-text-lightmode: #866B3E; /* hct(80, 24, 47) */
	--theme-color-shadow-lightmode: #b6976540;
	--theme-color-light-lightmode: #b697652b;
	--theme-color-bg-lightmode: #F6F3F0;
	--theme-color-tint-lightmode: #b697650d;
	--theme-color-primary-darkmode: #AC987D; /* hct(80, 14, 64) */
	--theme-color-btn-darkmode: #8B7A60; /* hct(80, 14, 52) */
	--theme-color-btn-hover-darkmode: #9F8253; /* hct(80, 14, 56) */
	--theme-color-text-darkmode: #D9C3A6; /* hct(80, 14, 80) */
	--theme-color-light-darkmode: #987F592b; /* hct(80, 20 55), hct(80, 4, 20) on surface-bg */
	--theme-color-shadow-darkmode: #987F5940;
}
.theme.theme-kcp,
.theme.theme-allergy {
	--theme-color-primary-lightmode: #C65B57; /* hct(22, 51, 52) */
	--theme-color-btn-lightmode: #C65B57; /* hct(22, 51, 52) */
	--theme-color-btn-hover-lightmode: #B9514E; /* hct(22, 51, 48) */
	--theme-color-text-lightmode: #A03E3C; /* hct(2, 51, 40) */
	--theme-color-shadow-lightmode: #d4666240;
	--theme-color-light-lightmode: #d466622b;
	--theme-color-bg-lightmode: #F9F2F2;
	--theme-color-tint-lightmode: #d466620d;
	--theme-color-primary-darkmode: #D56863; /* hct(22, 51, 57) */
	--theme-color-btn-darkmode: #B64F4C; /* hct(22, 51, 47) */
	--theme-color-btn-hover-darkmode: #C65B57; /* hct(22, 51, 52) */
	--theme-color-text-darkmode: #FFB3AF; /* hct(22, 40, 80) */
	--theme-color-light-darkmode: #B1726E2b; /* hct(22, 29, 55), hct(22, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B1726E40;
}
.theme.theme-procedure {
	--theme-color-primary-lightmode: #B66746; /* hct(40, 40, 52) */
	--theme-color-btn-lightmode: #B66746; /* hct(40, 40, 52) */
	--theme-color-btn-hover-lightmode: #A75B3B; /* hct(40, 40, 47) */
	--theme-color-text-lightmode: #924A2C; /* hct(40, 40, 40) */
	--theme-color-shadow-lightmode: #be605e40;
	--theme-color-light-lightmode: #be605e2b;
	--theme-color-bg-lightmode: #F9F2F0;
	--theme-color-tint-lightmode: #be605e0d;
	--theme-color-primary-darkmode: #C67352; /* hct(40, 40, 57) */
	--theme-color-btn-darkmode: #A75B3B; /* hct(40, 40, 47) */
	--theme-color-btn-hover-darkmode: #B66746; /* hct(40, 40, 52) */
	--theme-color-text-darkmode: #FEB599; /* hct(40, 30, 80) */
	--theme-color-light-darkmode: #B172592b; /* hct(40, 30, 54), hct(40, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B1725940;
}
.theme.theme-custom,
.theme.theme-event,
.theme.theme-lifestyle {
	--theme-color-primary-lightmode: #7486C8; /* hct(274, 40, 57) */
	--theme-color-btn-lightmode: #7486C8; /* hct(274, 40, 57) */
	--theme-color-btn-hover-lightmode: #6779BA; /* hct(274, 40, 52) */
	--theme-color-text-lightmode: #495B99; /* hct(274, 40, 40) */
	--theme-color-chart-lightmode: #6274B4; /* hct(274, 40, 50) */
	--theme-color-shadow-lightmode: #798bcc40;
	--theme-color-light-lightmode: #798bcc2b;
	--theme-color-bg-lightmode: #F1F4F9;
	--theme-color-tint-lightmode: #798bcc0d;
	--theme-color-primary-darkmode: #7F8EC8; /* hct(274, 35, 60) */
	--theme-color-btn-darkmode: #7486C8; /* hct(274, 40, 57) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #B5C4FF; /* hct(274, 35, 80) */
	--theme-color-chart-darkmode: #8698DB; /* hct(274, 40, 64) */
	--theme-color-light-darkmode: #6980D02b; /* hct(274, 47, 55), hct(274, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #6980D040;
}
.theme.theme-poop {
	--theme-color-primary-lightmode: #9e6961; /* hct(27, 25, 50) */
	--theme-color-btn-lightmode: #9e6961; /* hct(27, 25, 50) */
	--theme-color-btn-hover-lightmode: #936058; /* hct(27, 25, 46) */
	--theme-color-text-lightmode: #83524A; /* hct(27, 25, 40) */
	--theme-color-shadow-lightmode: #9e696140;
	--theme-color-light-lightmode: #9e69612b;
	--theme-color-bg-lightmode: #F7F3F2;
	--theme-color-tint-lightmode: #9e69610d;
	--theme-color-primary-darkmode: #B37B72; /* hct(27, 25, 57) */
	--theme-color-btn-darkmode: #9e6961; /* hct(27, 25, 50) */
	--theme-color-btn-hover-darkmode: #AA736B; /* hct(27, 25, 54) */
	--theme-color-text-darkmode: #EFBAB4; /* hct(27, 20, 80) */
	--theme-color-light-darkmode: #B772662b; /* hct(28, 32, 55), hct(38, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B7726640;
}
.darkmode .theme {
	--theme-color-primary: var(--theme-color-primary-darkmode);
	--theme-color-btn: var(--theme-color-btn-darkmode);
	--theme-color-btn-hover: var(--theme-color-btn-hover-darkmode);
	--theme-color-text: var(--theme-color-text-darkmode);
	--theme-color-chart: var(--theme-color-chart-darkmode);
	--theme-color-shadow: var(--theme-color-shadow-darkmode);
	--theme-color-light: var(--theme-color-light-darkmode);
	--theme-color-bg: var(--chip-bg);
}
:root {
	--html-bg: #fafcfd;
}

.em-gift-checkout .header-guava {
	justify-content: center;
}
.em-gift-checkout h2 {
	margin-bottom: 10px;
}
.em-gift-checkout h4 {
	margin-bottom: 20px;
}
.em-gift-checkout-card-style-img {
	height: 120px;
	margin: 20px auto;
	display: block;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
	border-radius: 3px;
}

.em-gift-checkout .card {
	padding: 20px;
	margin-bottom: 20px;
}
.em-gift-inputs {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}
.em-gift-inputs label {
	flex: 1 1 300px;
}
.em-gift-add {
	text-align: center;
	margin: 20px 0;
}
.em-gift-product {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 18px;
}
.em-gift-product-name {
	font-weight: 600;
	flex-grow: 1;
	max-width: calc(100% - 55px);
	position: relative;
}
.card:first-child .em-gift-product-name {
	max-width: none;
}
.em-gift-product-name canvas {
	width: 120px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
	border-radius: 3px;
	position: absolute;
	top: 0;
	right: 0;
}
.em-gift-price-old {
	color: var(--text-muted);
	text-decoration: line-through;
	padding-left: 10px;
	font-size: 16px;
	font-weight: 400;
}
.em-gift-price-new {
	color: var(--metric-green-text);
	padding-left: 10px;
	font-size: 16px;
}
.em-gift-checkout .street-input {
	height: auto;
}
.em-gift-checkout .state-input,
.em-gift-checkout .zip-input {
	width: 115px;
}
.em-gift-discount-row {
	text-align: right;
	margin-bottom: 20px;
}
.em-gift-discount-row .notice {
	display: inline-flex;
	text-align: center;
}
.em-gift-cost-rows {
	margin: 40px 0;
}
.em-gift-cost-row {
	display: flex;
	align-items: center;
	justify-content: right;
	font-size: 18px;
	margin-bottom: 10px;
}
.em-gift-cost {
	flex: 0 1 150px;
	text-align: right;
}
.em-gift-cost-row.saved {
	color: var(--metric-green-text);
}
.em-gift-cost-row.total {
	font-weight: 600;
}
.em-gift-form-note {
	margin: 20px 0;
	color: var(--text-muted);
}
.em-gift-checkout .form-error {
	text-align: right;
}

.em-gift-checkout-success-card {
	max-width: 500px;
	margin: auto;
}

.em-guarantee {
	margin: 20px 15px 0 auto;
	display: flex;
	align-items: center;
	font-size: 0.8em;
	justify-content: center;
	max-width: 300px;
	color: var(--text-muted);
}
.em-guarantee svg {
	border: 2px solid var(--guava-green);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	margin-right: 10px;
	--btn-text: var(--guava-green);
	padding: 4px;
}
.admin-header {
	display: flex;
	flex-wrap: wrap;
	background: var(--guava-green);
}
.admin-header svg {
	width: 25px;
	height: 25px;
	vertical-align: top;
}
.admin-header a {
	padding: 3px 8px;
	color: #fff;
	font-weight: bold;
}
.admin-header a:hover {
	opacity: 0.8;
}
.admin-header a.active {
	border-bottom: 1px solid #fff;
}
.modal > .card.alert-modal {
	width: 360px;
	background: var(--surface-bg-24dp);
}
.alert-modal .toast {
	box-shadow: none;
	border-radius: var(--card-border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	display: flex;
	max-width: none;
}
.alert-modal .form-btns {
	align-items: stretch;
}
.alert-modal .btn {
	width: 100%;
}
.modal {
 	position: fixed;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
	background: rgba(0,0,0,0.7);
	overflow-y: auto;
	padding-top: 56px; /* for the header */
}
.darkmode .modal {
	background: rgba(0,0,0,0.65);
}
.modal.modal-no-overlay,
.darkmode .modal.modal-no-overlay {
	background: none;
}
.modal-header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 56px;
	padding: 0 8px;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	color: #fff;
	z-index: 1;
}
.darkmode .modal-header {
	background: var(--surface-bg-8dp);
}
.modal-title {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 10px;
	flex-grow: 1;
}
.modal-icons {
	display: flex;
}
.modal > .card {
	width: 500px;
	max-width: calc(100% - 10px); /* need to utilize as much phone width as we can, they can be pretty skinny */
	margin: 20px auto;
	background: var(--surface-bg-12dp);
	box-shadow: var(--overlay-card-shadow);
}
.modal .card-header {
	padding: 15px 20px;
}
.modal .card-section {
	padding: 20px;
}
.toast-wrap {
	position: fixed;
	z-index: var(--toast-z-index);
	width: 100%;
	top: 20px;
	left: 0;
	pointer-events: none;
	text-align: center;
	transform: translateY(-30px);
	opacity: 0;
	transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.toast-wrap.show {
	opacity: 1;
	transform: translateY(0);
}
.toast-wrap.hide {
	opacity: 0;
	transform: translateY(-30px);
}
.toast {
	display: inline-flex;
	align-items: center;
	max-width: 90%;
	padding: 8px 15px;
	border-radius: 8px;
	font-size: 20px;
	text-align: left;
	background: var(--toast-bg);
	color: var(--toast-text);
	stroke: var(--toast-icon-color);
	box-shadow: 0 0 6px var(--toast-icon-color);
}
.darkmode .toast {
	background: var(--surface-bg-24dp);
	color: var(--text);
	border: 1px solid var(--toast-icon-color);
	box-shadow: none;
}
.toast-icon {
	width: 30px;
	margin-right: 10px;
	fill: none;
	stroke-width: 10px;
	flex-shrink: 0;
}
.toast-success {
	--toast-bg: #edf7ed;
	--toast-text: var(--dark-green-text);
	--toast-icon-color: #4caf50;
}
.toast-error {
	--toast-bg: #fdecea;
	--toast-text: #611a15;
	--toast-icon-color: #f44336;
}
.toast-info {
	--toast-bg: #e8f4fd;
	--toast-text: #0d3c61;
	--toast-icon-color: #2196f3;
}
.toast-warning {
	--toast-bg: #fef4e5;
	--toast-text: #663c00;
	--toast-icon-color: #ff9800;
}
@media (max-width: 600px) {
	.toast {
		font-size: 16px;
	}
}
.date-input {
	--date-input-width: 185px; /* just enough to perfectly fit all placeholder text plus time input and fit on 375px phone */
	display: inline-flex;
	width: var(--date-input-width);
	font-size: 15px;
	line-height: 1.4;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	color: var(--input-placeholder);
	background: var(--input-bg);
	transition: var(--input-focus-transition);
	position: relative;
	flex-shrink: 0;
}
.date-input.no-picker {
	width: calc(var(--date-input-width) - 35px);
}
.date-input.lrg {
	--date-input-width: 265px;
	font-size: 1.5em;
}
.date-input.lrg .date-input-input {
	font-size: 1em;
}
.date-input.active {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
	color: var(--input-primary-text);
}
.date-input.disabled {
	pointer-events: none;
	background: var(--input-disabled-bg);
}

.date-input-input {
	padding: 0.4em 0.3em;
	border: none;
	width: 0;
	flex-grow: 1;
	font-size: var(--input-font-size);
	font-family: var(--font-stack);
	line-height: 1.4;
	color: var(--text);
	background: transparent;
	border-radius: 4px; /* otherwise it overlaps slightly outside of .date-input at the corners */
}
.date-input-input:disabled {
	color: var(--input-disabled);
}
input + .date-input-input {
	padding-left: 0.6em;
}
.date-input-input.year-input {
	flex-grow: 1.7;
	padding-right: 0;
}
.date-input-input:focus {
	outline: none;
}
.date-input-input::placeholder {
	color: var(--input-placeholder);
}
.date-input-separator {
	user-select: none;
	-webkit-user-select: none;
}
.date-input-picker-btn.btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
}
.date-input .date-picker {
	margin-left: -1px; /* account for border */
}
.date-input .date-picker.align-right {
	margin-right: -1px; /* account for border */
}
.date-picker {
	--day-width: 40px;
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	margin-top: 5px;
	background: var(--surface-bg-24dp);
	border: var(--card-separator);
	border-radius: 5px;
	padding: 10px;
	width: 302px; /* 7 * 40px + 20px padding + 2px border */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	font-size: initial; /* avoid bigger text within lrg date-input */
}
.date-picker.align-right {
	left: auto;
	right: 0;
}
.date-picker-nav {
	display: flex;
}
.date-picker-year-btn.btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
	position: relative;
}
.date-picker-year-btn .select {
	position: absolute;
	opacity: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.date-picker-prev-btn {
	margin-left: auto;
}
.date-picker-day-labels,
.date-picker-days {
	display: flex;
	flex-wrap: wrap;
}
.date-picker-day-label,
.date-picker-day {
	width: var(--day-width);
	height: var(--day-width);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	--btn-color: transparent;
}
.date-picker-day-label {
	color: var(--text-muted);
}
.date-picker-day.today {
	border: 1px solid var(--input-focus-border);
}
.checkbox {
	--checkbox-fill: var(--icon-gray);
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	justify-content: center; /* for centered spinner */
	text-align: left;
	line-height: 1.6;
}
.darkmode .checkbox.checked:not(.primary) {
	--checkbox-fill: var(--btn-color);
}
.checkbox.primary {
	--checkbox-fill: var(--theme-color-primary);
}
.checkbox svg {
	flex-shrink: 0;
	width: 1.3em;
	height: 1.3em;
	margin: 0.15em 8px auto 0;
	border: 2px solid var(--checkbox-fill);
	background: var(--input-bg);
	border-radius: 6px;
	transition: var(--input-focus-transition);
	padding: 1px;
}
.checkbox:focus-visible {
	box-shadow: none; /* override button */
}
.checkbox:focus-visible svg {
	box-shadow: 0 0 0 0.2rem var(--guava-green-shadow);
}
.checkbox path {
	fill: none;
	stroke: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 2;
}
.checkbox.checked svg {
	background: var(--checkbox-fill);
	border-width: 0;
	padding: 3px;
}
.checkbox.checked path {
	stroke: #fff;
}
.checkbox.loading,
.checkbox.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.checkbox.right {
	flex-direction: row-reverse;
}
.checkbox .spinner {
	width: 24px;
	height: 24px;
	position: absolute;
	--spinner-color: currentColor;
}
#tooltip-root {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: var(--tooltip-z-index);
	width: 100%;
}
.tooltip-wrap {
	display: inline-flex; /* align svg icon, remove excess inline space */
	align-items: center;
}
.tooltip-wrap.has-tooltip {
	margin-bottom: -1px; /* remove extra 1px block height added by has-tooltip border-bottom */
}
.tooltip {
	position: absolute;
	color: #fff;
	background: #616161;
	border-radius: 2px;
	white-space: normal;
	padding: 5px 8px;
	min-width: 56px;
	max-width: min(80vw, 350px);
	text-align: center;
	font-size: 12px;
	pointer-events: none;
}
.tooltip-wrap .help-svg,
.tooltip-info-svg {
	width: 16px;
	height: 16px;
	margin-left: 5px;
	flex-shrink: 0;
	border-radius: 50%;
	cursor: pointer;
}
.tooltip-info-svg {
	background: #bbb;
	stroke: var(--surface-bg);
	stroke-width: 3px;
}
.darkmode .tooltip-info-svg {
	background: rgba(255, 255, 255, 0.4);
}
@media (hover: hover) {
	.tooltip-info-svg:hover {
		background: #999;
	}
	.darkmode .tooltip-info-svg:hover {
		background: rgba(255, 255, 255, 0.54);
	}
}
.order-card-form-header {
	margin-top: 40px;
	border-bottom: 1px solid var(--border-color);
}
.order-card-preview {
	margin: 25px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.order-card-preview-front,
.order-card-preview-back {
	position: relative;
	display: block;
	width: 60%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,0.15);
	z-index: 1;
	margin: -5% 0 0 0;
}
.order-card-preview-back {
	margin: 5% 0 0 -20%;
	z-index: 0;
	height: auto;
}
.order-card-page .textarea-input {
	height: auto;
}
.state-input,
.zip-input {
	width: 115px;
}
.urgent-note-input {
	width: 100%;
}
.order-card-mail-preview {
	display: block;
	margin: 20px auto;
	width: 90%;
	max-width: 360px;
	box-shadow: 0 0 5px rgba(0,0,0,0.15);
	border-radius: 3px;
}
.upgrade-form.card-modal-card .card-header {
	border-color: transparent;
}
.upgrade-form.card {
	text-align: left;
}
.card.card-modal-card.upgrade-form.benefits-only {
	background: var(--theme-color-text);
	overflow: hidden;
}
.darkmode .card.card-modal-card.upgrade-form.benefits-only {
	background: var(--surface-bg-24dp);
}
.upgrade-form-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to top, var(--theme-color-text), var(--theme-color-primary));
	color: #fff;
	padding-bottom: 20px;
}
.darkmode .upgrade-form-card {
	background: linear-gradient(to top, var(--surface-bg-24dp), var(--surface-bg-8dp));
}
.upgrade-form-header-logo {
	position: absolute;
	width: 280px;
	top: 0;
	left: -120px;
	opacity: 0.15;
}
.upgrade-form-header {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-right: -140px;
	padding: 20px;
}
.upgrade-form-header-name {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 4px;
}
.upgrade-form-header-premium {
	background: #fff;
	color: var(--theme-color-btn);
	padding: 0 16px 0 20px; /* -4px on the right to account for letter-spacing */
	border-radius: 3em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	letter-spacing: 4px;
	font-size: 20px;
}
.upgrade-form-highlight {
	position: relative; /* to display above the logo */
	padding: 20px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--theme-color-text);
	margin: 20px 0 30px;
	font-size: 18px;
}
.darkmode .upgrade-form-highlight {
	color: var(--text);
	background: rgba(40, 40, 40, 0.85);
}
.upgrade-form-features-header {
	text-align: center;
	font-weight: 600;
	margin-bottom: -10px;
}
.upgrade-form-features {
	position: relative; /* position in front of logo */
	padding: 25px 15px 0;
}
.upgrade-form-feature {
	width: 100%;
	background: var(--theme-color-text);
	border-radius: var(--card-border-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.upgrade-form-feature-inner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	--btn-text: #fff;
}
.upgrade-form-feature-arrow {
	height: 24px;
}
.upgrade-form-feature:not(:last-child) {
	margin-bottom: 15px;
}
.darkmode .upgrade-form-feature {
	background: var(--surface-bg);
	border-color: var(--theme-color-text);
}
.upgrade-form-feature-text {
	flex-grow: 1;
	margin-left: 4px;
}
.upgrade-form-feature-description {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 15px;
	padding: 8px 20px 20px 48px;
}
.btn.upgrade-form-feature-learn-btn {
	--btn-text: #fff;
}
.upgrade-form-feature-icon-bg {
	background: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	margin: -2px;
	--btn-text: var(--theme-color-text);
}
.upgrade-form-feature-icon {
	width: 100%;
	height: 100%;
	padding: 4px;
}
.darkmode .upgrade-form-feature-icon-bg {
	background: var(--theme-color-text);
	--btn-text: var(--surface-bg);
}
.btn.upgrade-form-feature-more {
	--btn-border-color: rgba(255, 255, 255, 0.5);
	--btn-border-width: 1px;
}
.upgrade-form-plan-toggle {
	padding: 25px 15px 0;
	text-align: center;
}
.upgrade-form-family {
	margin: 25px 20px;
	text-align: center;
}
.upgrade-form-family-option {
	position: relative;
	background: var(--theme-color-bg);
	border-radius: var(--card-border-radius);
	padding-top: 15px;
	overflow: hidden;
	border: 3px solid var(--theme-color-primary);
	margin-top: 15px;
}
.darkmode .upgrade-form-family-option {
	background: var(--theme-color-tint);
}
.upgrade-form-family-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	color: var(--theme-color-text);
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
}
.upgrade-form-family-price-per {
	font-size: 16px;
	font-weight: 400;
	opacity: 0.85;
}
.upgrade-form-family-icon {
	position: absolute;
	right: -15px;
	bottom: 9px;
	width: 96px;
	height: 96px;
	--btn-text: var(--theme-color-primary);
	opacity: 0.4;
}
.upgrade-form-family-discount {
	background: var(--theme-color-primary);
	color: #fff;
	margin-top: 15px;
}
.darkmode .upgrade-form-family-discount {
	background: none;
	color: var(--theme-color-text);
}
.upgrade-form-billing-options {
	display: flex;
	align-items: stretch;
	gap: 15px;
	padding: 25px 15px;
	max-width: 400px;
	margin: auto;
}
.upgrade-form-billing-option {
	--billing-option-color: var(--text);
	--billing-option-text: var(--text);
	flex-basis: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	border-radius: var(--card-border-radius);
	border: 3px solid var(--billing-option-color);
	overflow: hidden;
	color: var(--billing-option-text);
	opacity: 0.4;
}
.upgrade-form-billing-option-label {
	padding: 2px 0;
	font-size: 18px;
	font-weight: 600;
}
.upgrade-form-billing-option.active {
	opacity: 1;
	--billing-option-color: var(--theme-color-primary);
	--billing-option-text: var(--theme-color-text);
	background: var(--theme-color-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.darkmode .upgrade-form-billing-option.active {
	background: var(--theme-color-tint);
}
.upgrade-form-billing-option-price {
	font-size: 32px;
	font-weight: 600;
	padding: 15px 0;
}
.upgrade-form-billing-option-price-cross {
	color: var(--text-muted);
	text-decoration: line-through;
	font-size: 18px;
	margin-top: -15px;
	margin-bottom: 15px;
}
.upgrade-form-billing-option-discount {
	background: var(--billing-option-color);
	color: #fff;
	width: 100%;
	text-align: center;
}
.darkmode .upgrade-form-billing-option-discount {
	color: var(--billing-option-text);
	background: none;
}
.upgrade-form-billing-provider-discount {
	font-size: 15px;
	font-weight: 600;
	color: var(--theme-color-text);
	text-align: center;
	padding: 0 15px 20px;
}
.form-btns.upgrade-form-upgrade-btn {
	margin: 0 15px 25px;
}
.upgrade-form-upgrade-btn .btn {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.upgrade-form-add-to-family-plan-title {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 600;
}
.upgrade-form-add-to-family-plan-subtitle {
	font-size: 15px;
	color: var(--text-muted);
	margin-top: 4px;
}
.upgrade-form-disable-notice {
	margin: 0 15px 20px;
}
/* should align with width where card-modal because fullscreen */
@media (max-width: 500px) {
	.form-btns.upgrade-form-upgrade-btn {
		position: sticky;
		bottom: 25px;
	}
	.upgrade-form-upgrade-btn .btn {
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	}
}
@media (hover: hover) {
	.upgrade-form-feature-inner:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	.upgrade-form-billing-option:not(.active):hover {
		background: var(--hover-gray);
	}
}
.plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}
.plan {
	--plan-color: var(--text-muted);
	--plan-text-color: var(--text);
	--plan-bg-color: none;
	--plan-shadow: 0 1px 3px rgba(63, 63, 63, 0.12), 0 1px 2px rgba(63, 63, 63, 0.24);

	flex: 1 0 340px;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	border: 2px solid var(--plan-color);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--plan-shadow);
}
.plan.premium {
	--plan-color: var(--upgrade-color-primary);
	--plan-text-color: var(--upgrade-color-text);
	--plan-color-btn-hover: var(--upgrade-color-btn-hover);
	--plan-bg-color: var(--upgrade-color-bg);
	--plan-shadow: 0 1px 3px var(--upgrade-color-light), 0 1px 2px var(--upgrade-color-shadow);
}
.plan-header {
	padding: 15px 20px;
	background: var(--plan-bg-color);
	color: var(--plan-text-color);
	border-bottom: var(--card-separator);
}
.plan-title {
	display: flex;
	justify-content: space-between;
	font-size: 1.6em;
	font-weight: 600;
}
.plan-price-per {
	font-size: 16px;
	font-weight: 400;
}
.plan-summary {
	margin-top: 15px;
	min-height: 3em; /* 2 lines */
}
.plan .icon-check {
	--icon-color: var(--plan-color);
}
.plan-features {
	flex-grow: 1;
	margin: 0;
	padding: 25px;
}
.plan-features li {
	list-style: none;
	display: flex;
	gap: 15px;
}
.plan-features li:not(:last-child) {
	margin-bottom: 15px;
}
.plan-submit-btn {
	display: flex;
	width: 320px;
	max-width: 100%;
	margin: 25px auto;
	font-size: 20px;
}
.plan-feature-subset {
	color: var(--plan-text-color);
}
.plan-features-expand-btn {
	align-self: center;
}
.plan-yearly-toggle {
	margin: 20px 0;
	font-size: 18px;
	text-align: center;
}
.plan-yearly-toggle-switch {
	display: inline-flex;
	gap: 15px;
	align-items: center;
	justify-content: center;
}
.plan-discount {
	color: var(--guava-green-text);
}
.card-modal.modal {
	display: flex;
	align-items: flex-start;
	padding: 0;
}
.modal > .card.card-modal-card {
	--card-modal-margin-top: 80px;
	margin: var(--card-modal-margin-top) auto;
	display: flex;
	flex-direction: column;
}
.card.card-modal-card.full-screen {
	background: var(--surface-bg);
}
.card-modal-card.full-screen .card-header:not(.card-header-primary),
.darkmode .card-modal-card.full-screen .card-header-primary {
	background: var(--surface-bg-8dp);
}
.card.card-modal-card .card-header {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 5px;
	border-bottom: var(--surface-border);
}
.darkmode .card-header.card-header-primary {
	background: var(--surface-bg-24dp);
}
.card-modal-back {
	align-self: flex-start;
}
.card-modal-back .btn-svg.cross-svg {
	height: 1.4em;
	width: 1.4em;
	--btn-text: currentColor;
}
.darkmode .card-modal-back {
	color: #fff;
}
.darkmode .card-header.card-header-primary {
	color: var(--theme-color-text);
}
.darkmode .card-header.card-header-primary .card-modal-back {
	color: var(--theme-color-text);
}
.darkmode .card-header.card-header-primary .overflow-menu-btn,
.darkmode .card-header.card-header-primary .card-modal-header-btns .btn {
	--btn-text: var(--theme-color-text);
}
.card-header-primary .card-modal-header-btns .text-btn {
	--btn-text: #fff;
}
.darkmode .card-header-primary .card-modal-header-btns .text-btn {
	--btn-text: var(--theme-color-text);
}
.darkmode .card-header-primary .card-header-subtitle {
	color: var(--text-muted);
}
.card-modal-body {
	border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
}
.card-modal-body.html-bg {
	background: var(--html-bg);
}

.card-modal-title {
	flex-grow: 1;
	overflow: hidden; /* so text-overflow works */
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
}
.card-modal-back + .card-modal-title {
	padding-left: 0;
}
.card-modal-header-with-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.card-modal-header-title {
	flex-grow: 1;
	overflow: hidden; /* so text-overflow works */
	text-align: left;
}
.card-modal-header-btns {
	flex-shrink: 0;
	margin-right: -15px;
}
.card-modal-header-btns .text-btn {
	margin-right: 10px;
}
.card-modal-header-truncate {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.card-header .overflow-menu-wrap {
	margin-left: -5px; /* remove the gap from card-header */
}
@media (max-height: 700px) {
	.modal > .card-modal-card.card {
		--card-modal-margin-top: 40px;
	}
}
@media (max-width: 500px) {
	.card.card-modal-card.full-screen {
		--card-modal-margin-top: 0;
		height: 100vh;
		max-width: 100vw;
		border-radius: 0;
	}
	.card.card-modal-card.full-screen > .card-header {
		border-radius: 0;
	}
	/* Only add overflow-y when full-screen otherwise datepicker could be cutoff */
	.card.card-modal-card.full-screen > .card-modal-body {
		overflow-y: auto;
		flex-grow: 1;
		border-radius: 0;
	}
}
.overflow-menu-wrap {
	position: relative;
}
.overflow-menu-btn {
	display: flex; /* otherwise there's extra margin when used inline, such as in card header */
}
.overflow-menu-btn .overflow-menu-svg {
	width: 30px;
	height: 30px;
}
.overflow-menu {
	position: absolute;
	background: var(--surface-bg-24dp);
	border: var(--surface-border);
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	z-index: var(--menu-z-index);
	width: max-content;
	max-width: calc(min(500px, 100vw - 40px));
}
.overflow-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 15px 20px;
	font-size: 16px;
	color: var(--text); /* override Link.jsx color */
	cursor: pointer;
}
.overflow-menu-item:hover {
	background: var(--hover-gray);
}
.overflow-menu-item-red {
	color: var(--red-error);
}
.overflow-menu-item-with-icon {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: -4px;
	--btn-text: var(--icon-gray);
	color: var(--text); /* override Link.jsx color */
}
.overflow-menu-wrap.primary .overflow-menu-btn,
.overflow-menu-wrap.primary .overflow-menu-item-with-icon {
	--btn-text: var(--theme-color-primary);
}
.darkmode .overflow-menu-wrap.primary .overflow-menu-btn {
	--btn-text: var(--theme-color-text);
}
@media (hover: hover) {
	.overflow-menu-wrap.primary .overflow-menu-btn:hover {
		--btn-text: var(--theme-color-primary);
		background: var(--theme-color-light);
	}
}
.radio {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.radio:focus {
	outline: none;
}
.radio:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.radio .spinner {
	position: absolute;
	width: 25px;
	height: 25px;
	left: 50%;
	top: 50%;
	margin-left: -12.5px;
	margin-top: -12.5px;
	--spinner-color: currentColor;
}
.radio .btn {
	min-width: 34px; /* width of the widest single character with our font, so 1-character buttons are consistent */
}
.radio.full-width .btn {
	width: 100%;
	justify-content: start;
}
.radio.toggle {
	background: var(--chip-bg);
	padding: 3px;
	border-radius: 32px;
	gap: 0;
}
.radio.toggle .btn {
	border-radius: 32px;
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
	--btn-text: var(--text-muted);
}
.radio.toggle .btn.primary {
	--btn-text: var(--theme-color-text);
	--btn-color: var(--surface-bg);
	--btn-color-hover: var(--surface-bg);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.darkmode .radio.toggle {
	background: rgba(0, 0, 0, 0.4);
}
.darkmode .radio.toggle .btn.primary {
	--btn-color: var(--chip-bg-hover);
	--btn-color-hover: var(--chip-bg-hover);
	box-shadow: none;
}
.radio-icon-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	padding: 4px 0;
}
.radio-icon-btn-icon {
	width: 60px;
	height: 60px;
	padding: 6px;
	fill: var(--theme-color-primary);
	border-radius: 50%;
	background: var(--theme-color-bg, var(--btn-color));
	border:	3px solid transparent;
}
.radio-icon-btn.selected .radio-icon-btn-icon {
	border-color: var(--theme-color-primary, var(--icon-gray));
}
.radio-icon-btn.unselected {
	opacity: 0.6;
}
.radio-icon-btn-label {
	font-size: 13px;
}
@media (hover: hover) {
	.radio-icon-btn:hover .radio-icon-btn-icon {
		background: var(--theme-color-light, var(--btn-color-hover));
	}
	.darkmode .radio-icon-btn:hover .radio-icon-btn-icon {
		background: var(--chip-bg-hover, var(--btn-color-hover));
	}
}
.setup-card-page {
	width: 650px;
}
.setup-card-page .info-card {
	background: var(--portal-surface-bg);
}
.setup-card-success-title {
	display: flex;
	font-size: 1.7em;
}
.setup-card-success-title .toast-icon {
	width: 1.7em;
	margin-right: 15px;
	stroke: var(--guava-green);
}
.setup-card-success-msg {
	margin: 25px 0;
}
.setup-card-page-title {
	margin-bottom: 15px;
}
.setup-card-page-subtitle {
	font-size: 18px;
}
.setup-card-edit-btn-wrap {
	margin: -25px 0 10px;
}
.setup-card-status {
	margin-bottom: 10px;
}
.setup-card-action-btns {
	flex-wrap: wrap;
	justify-content: center;
}
.setup-card-action-btns .btn {
	font-size: 18px;
}
.setup-card-order-more-input {
	display: inline-flex; /* to make the button the same height as input */
}
.setup-card-order-more input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-left: 10px;
	width: 62px;
}
.setup-card-order-more .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	width: 62px;
}
.setup-card-page-free-shipping {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	margin-top: 25px;
	--btn-text: var(--theme-color-primary);
}
.setup-card-btn {
	width: 100%;
	margin: 15px 0;
}
.card.setup-card-preview-modal {
	width: 720px;
}

.em-info-preview-disclaimer {
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 600;
}
.em-info-critical-note {
	font-weight: 600;
	margin: 15px 0;
}
.em-section {
	padding: 15px 12px;
	margin: 15px 0;
	border: 3px solid var(--theme-color-primary);
	border-radius: var(--card-border-radius);
}
.em-section-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 22px;
	border-bottom: 2px solid var(--theme-color-primary);
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.em-section-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	--btn-text: #fff;
	background: var(--theme-color-btn);
	padding: 8px;
	flex-shrink: 0;
	margin-right: 12px;
	overflow: visible;
}
.em-section-count {
	font-size: 15px;
	margin-left: auto;
}
.em-section-notes {
	white-space: pre-wrap;
}
.em-row-title {
	font-size: 18px;
	font-weight: 600;
}
.em-row {
	margin: 1em 0;
}
.em-row-user-note {
	color: var(--text-muted);
	font-size: 15px;
}
.em-no-data {
	font-size: 18px;
	color: var(--text-muted);
	margin: 10px 0;
}
.em-inactive-header {
	font-weight: 600;
	border-bottom: var(--card-separator);
	margin-top: 30px;
	margin-bottom: 10px;
	color: var(--text-muted);
}
.em-show-inactive-btn {
	margin-top: 20px;
}
.em-info-accuracy-note {
	margin: 10px 0 5px;
	font-size: 14px;
}
.em-info-name {
	font-size: 26px;
	font-weight: 600;
}
.em-row-subtitle {
	font-size: 15px;
}
@media (max-width: 600px) {
	.em-section {
		margin-left: -8px;
		margin-right: -8px;
	}
}
#setup-page {
	width: 650px;
}
.setup-page-card.card {
	position: relative;
	padding: 60px;
	background: var(--portal-surface-bg);
}
.setup-page-back {
	position: absolute;
	top: 15px;
	left: 15px;
}
.setup-page-prompt {
	font-size: 36px;
	text-align: center;
	margin-bottom: 10px;
}
.setup-page-waiting {
	font-size: 32px;
	text-align: center;
}
.setup-page-no-permission {
	font-size: 24px;
}
.setup-page-help {
	display: flex;
	align-items: center;
	margin-top: 40px;
	font-size: 14px;
	color: #666;
}
.setup-page-help-btns {
	display: flex;
	margin-top: 3px;
	gap: 25px;
}
.setup-page-help-btn {
	--btn-text-over-white: var(--color-help-color);
	font-size: 13px;
	text-decoration: underline;
}
.setup-page-help-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-right: 10px;
	--btn-text: var(--color-help-color);
}

@media (max-width: 650px) {
	#setup-page {
		padding: var(--page-margin-top) 0 0;
	}
	.setup-page-card.card {
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 0;
	}
	.setup-page-prompt {
		font-size: 32px;
		margin-bottom: 7px;
	}
}
@media (max-width: 360px) {
	.setup-page-card.card {
		padding-left: 10px;
		padding-right: 10px;
	}
	.setup-page-prompt {
		font-size: 28px;
		margin-bottom: 5px;
	}
}
.feedback-form {
	text-align: left;
}
.feedback-form-length-counter {
	color: var(--text-muted);
	text-align: right;
	font-size: 0.85em;
	margin-top: 3px;
}
.feedback-email-msg {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 15px;
}
.feedback-btn.btn {
	--btn-text: var(--color-help-text);
	--btn-color: var(--color-help-color);
	--btn-color-hover-over-white: var(--color-help-color-hover-over-white);
}
.feedback-form .notice.primary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: -1px;
	z-index: 2;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	--btn-text: var(--theme-color-primary);
	padding: 7px 15px;
}
.feedback-form .notice .btn,
.feedback-form .notice .tooltip-wrap {
	margin-left: auto;
}
.feedback-form .notice .tooltip-info-svg {
	background: var(--theme-color-primary);
}
.feedback-form .textarea-input {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.feedback-guide-btn {
	font-size: 1em;
}
.animated-placeholders {
	height: 60px;
	margin-bottom: -60px;
	padding: 0.8em 1.2em;
	color: var(--input-placeholder);
	line-height: 1.4; /* copy .textarea-input so height matches perfectly */
	z-index: 1;
	pointer-events: none;
}
.guides-modal-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 0 10px 10px;
}
.video-modal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	pointer-events: none;
}
.video-modal-wrap {
	pointer-events: auto;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16/9;
}
.video-modal-video {
	width: 100%;
	height: 100%;
}
.quick-access-history-header {
	margin-top: 60px;
	border-bottom: var(--card-separator);
	margin-bottom: 15px;
}
.quick-access-history-row {
	display: flex;
	justify-content: space-between;
	column-gap: 15px;
	padding-bottom: 15px;
}
.quick-access-history-date {
	flex-shrink: 0;
	font-weight: 600;
}
@media (max-width: 630px) {
	.quick-access-history-row {
		flex-wrap: wrap;
	}
}