body {
	font-family: "Inter", sans-serif !important;
	background-color: #f4f5f6;
}

:root {
	--gray-5: #f9fafb;
	--gray-10: #f4f5f6;
	--gray-15: #ebedee;
	--gray-20: #ebeced;
	--gray-30: #dee0e2;
	--gray-40: #d2d4d7;
	--gray-50: #b3b5b7;
	--gray-60: #939597;
	--gray-70: #737577;
	--gray-80: #535557;
	--gray-90: #333537;
	--gray-100: #212325;
	--primary-50: #007a70;
	--primary-60: #065b54;
	--secondary-50: #f6c765;
	--shadow-card-sm: 0px 1px 4px rgba(19, 21, 23, 0.08),
		0px 0px 0px 1px rgba(19, 21, 23, 0.04);
}

.h3 {
	font-size: 24px;
	font-weight: 600;
	color: var(--gray-90);
	letter-spacing: -0.4px;
}

.h4 {
	font-size: 20px;
	font-weight: 600;
	color: var(--gray-90);
}

.h5 {
	font-size: 16px;
	font-weight: 600;
	color: var(--gray-90);
}

.p2 {
	font-size: 16px;
	font-weight: 400;
	color: var(--gray-70);
	line-height: 24px;
}

.p3 {
	font-size: 15px;
	font-weight: 400;
	color: var(--gray-70);
	line-height: 20px;
}

.p4 {
	font-size: 14px;
	font-weight: 400;
	color: var(--gray-70);
	line-height: 20px;
}

.btn {
	height: 40px;
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 550;
	line-height: 20px;
	color: white;
	background-color: var(--primary-50);
	border: 1px solid transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	white-space: nowrap;
}

.btn:hover {
	background-color: var(--primary-60);
}

.btn.iconLeft {
	padding-left: 10px;
}

.btn.iconRight {
	padding-right: 10px;
}

.btn i {
	height: 20px;
	width: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn.sm {
	height: 32px;
	padding: 5px 12px;
	font-size: 14px;
	border-radius: 8px;
}

.btn.md {
	height: 36px;
	padding: 7px 12px;
	font-size: 14px;
	line-height: 20px;
	border-radius: 8px;
}

.btn.lg {
	height: 44px;
	padding: 9px 16px;
	font-size: 16px;
	line-height: 20px;
	border-radius: 12px;
}

.btn.sm.iconLeft {
	padding-left: 8px;
}

.btn.sm.iconRight {
	padding-right: 8px;
}

.btn.md.iconLeft {
	padding-left: 8px;
}

.btn.secondary {
	background-color: white;
	color: var(--gray-80);
	border: 1px solid var(--gray-20);
}

.btn.secondary:hover {
	background-color: var(--gray-5);
	border-color: var(--gray-30);
}

.btn.ghost {
	background-color: transparent;
	color: var(--gray-80);
	border: 1px solid transparent;
}

.btn.ghost:hover {
	background-color: var(--gray-20);
	border-color: var(--gray-20);
	color: var(--gray-90);
}

.iconBtn {
	padding: 8px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: white;
	background-color: var(--primary-50);
	border: 1px solid transparent;
}

.iconBtn i {
	height: 20px;
	width: 20px;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.iconBtn.sm {
	padding: 6px;
	border-radius: 8px;
}

.iconBtn.sm i {
	height: 18px;
	width: 18px;
	font-size: 18px;
}

.iconBtn:hover {
	background-color: var(--primary-60);
}

.iconBtn.secondary {
	background-color: white;
	color: var(--gray-70);
	border: 1px solid var(--gray-20);
}

.iconBtn.secondary:hover {
	background-color: var(--gray-5);
	border-color: var(--gray-30);
	color: var(--gray-90);
}

.iconBtn.ghost {
	background-color: transparent;
	color: var(--gray-70);
	border: 1px solid transparent;
}

.iconBtn.ghost:hover {
	background-color: var(--gray-15);
	color: var(--gray-90);
}

.checkbox {
	display: flex;
	gap: 8px;
}

.checkbox label {
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: var(--gray-80);
	cursor: pointer;
}

.checkbox input {
	margin-top: 2px;
}

.circle-button {
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px;
	width: 150px;
	height: 45px;
	margin-left: auto;
	margin-right: 60px;
	background-color: var(--primary-50); /* Initial Background Color */
	transition: background-color 0.3s;
}

.circle-button:hover {
	background-color: var(--primary-60); /* Color on Hover */
}

.goalButton {
	background-color: var(--primary-50);
	border-radius: 10px;
	color: #ffffff;
	width: 120px;
	height: 40px;
}

.goalButton:hover {
	background-color: var(--primary-60);
}

.WideButton {
	background-color: var(--primary-50);
	color: white;
	width: 100%;
	height: 40px;
	border-radius: 10px;
	margin-top: auto;
	font-weight: 500;
	font-size: 16px;
}

.WideButton:hover {
	background-color: var(--primary-60);
}

/* component overrides */
.k-input {
	border-radius: 10px;
	border: 1px solid var(--gray-30);
}

.k-input:hover {
	border-color: var(--gray-40);
}

.k-input .k-input-inner {
	padding: 8px 12px;
	font-size: 15px;
	line-height: 20px;
}

.k-textarea {
	min-height: 200px;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
	border-radius: 10px;
	border: 1px solid var(--gray-30);
}

.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover
	.mud-input-outlined-border {
	border-color: var(--gray-40);
}
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
	border-color: var(--primary-50);
}

.mud-input-slot.mud-input-root-outlined {
	padding: 12.5px 16px !important;
}

.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
	padding: 10.5px 16px !important;
}

.mud-input-control {
	margin-top: 0 !important;
}

.k-checkbox:checked {
	background-color: var(--primary-50);
	border-color: var(--primary-50);
}

.k-checkbox:checked:focus {
	box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.3);
}

.k-input:focus-within {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--primary-50);
}

.StepsIcon {
	--fa-primary-color: #25b3e0;
	--fa-secondary-color: #25b3e0;
}

.DistanceIcon {
	--fa-primary-color: #6c757b;
	--fa-secondary-color: #6c757b;
}

.WaterIcon {
	--fa-primary-color: #73c3ee;
	--fa-secondary-color: #73c3ee;
}

.VegetableFruitIcon {
	--fa-primary-color: #93d746;
	--fa-secondary-color: #93d746;
}

.BloodGlucoseIcon {
	--fa-primary-color: #dd5991;
	--fa-secondary-color: #dd5991;
}

.WellbeingIcon {
	--fa-primary-color: #8479c2;
	--fa-secondary-color: #8479c2;
}

.WorkoutActivityIcon {
	--fa-primary-color: #fe646f;
	--fa-secondary-color: #fe646f;
}

.WeightIcon {
	--fa-primary-color: #81b8fd;
	--fa-secondary-color: #81b8fd;
}

.SleepHoursIcon {
	--fa-primary-color: #eec06b;
	--fa-secondary-color: #eec06b;
}

.MindfulMinutesIcon {
	--fa-primary-color: #dd4fb1;
	--fa-secondary-color: #dd4fb1;
}

.BloodPressureIcon {
	--fa-primary-color: #fe646f;
	--fa-secondary-color: #fe646f;
}

.GratitudeIcon {
	--fa-primary-color: #ffbe84;
	--fa-secondary-color: #ffbe84;
}

.shadow-card {
	box-shadow: var(--shadow-card-sm);
}

.select-dropdown {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='currentColor' d='M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7em top 50%;
}

@keyframes progressAnimation {
	0% {
		width: 5%;
	}

	100% {
		width: var(--risk-width);
	}
}

.input-select {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--gray-30);
	padding: 8px 12px;
	font-size: 15px;
	line-height: 20px;
	border-radius: 10px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='currentColor' d='M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7em top 50%;
}

.input-select:focus {
	outline: 2px solid var(--primary-50);
}

.shadow-profile {
	box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
		rgba(28, 53, 94, 0.05) 0px 0px 0px 1px,
		rgba(5, 6, 15, 0.1) 0px 10px 48px 0px;
}

.shadow-mobile-nav {
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.06) 0px -4px 6px -1px, rgba(0, 0, 0, 0.04) 0px -2px 4px -1px;
}

.profile-icon {
	--fa-primary-color: #6b7280;
	--fa-secondary-color: #d1d5db;
}

@media (max-width: 820px) {
	.profile-icon {
		--fa-primary-color: #fff;
	}
}

.e-tooltip-wrap .e-arrow-tip > * {
	display: none !important;
}

.e-tooltip-wrap {
	background-color: rgba(3, 7, 18, 0.92) !important;
	border-radius: 8px;
}

.e-tooltip-wrap .e-tip-content {
	background: none;
	color: white;
	padding: 10px 12px;
	text-align: left;
	font-size: 14px;
	line-height: 20px;
}

.e-tooltip-wrap.sm .e-tip-content {
	padding: 4px 8px;
	font-size: 13px;
	line-height: 18px;
}