@font-face {
	font-family: "bmg-font-std";
	font-style: normal;
	font-weight: 400;
	src: url(ec7171d900c1ea08ceef698c167f76bd.woff) format("woff");
}
@font-face {
	font-family: "bmg-font-std";
	font-style: normal;
	font-weight: 700;
	src: url(8fe957804a790dc466954eb87cddaa5f.woff) format("woff");
}
@font-face {
	font-family: "bmg-font-special";
	font-style: normal;
	font-weight: 400;
	src: url(ece153c4886e7475228eceea21e031a2.woff) format("woff");
}
@font-face {
	font-family: "bmg-font-special";
	font-style: normal;
	font-weight: 700;
	src: url(ece153c4886e7475228eceea21e031a2.woff) format("woff");
}
@font-face {
	font-family: "bmg-font-goodbrush";
	font-style: normal;
	font-weight: 700;
	src: url(Good-Brush.woff) format("woff");
}
:root {
	--breakpoint-mobile: 480px;
	--primary-color: #7ab929;
	--font-std: "bmg-font-std";
	--font-special: "bmg-font-special";
	--font-goodbrush: "bmg-font-goodbrush";
	--header-height: 100px;
}
body {
	font-family: var(--font-std);
	box-sizing: border-box;
}
select,
input {
	font-family: var(--font-std);
}
li {
	list-style: none;
}
a {
	text-decoration: none !important;
}
select {
	border: none;
	outline: none;
	width:100%;
}
input[type="checkbox"] {
	margin-right: 8px;
}
button {
	padding: 0;
	background-color: white;
	border: none;
	outline: none;
}
.btn-primary {
	padding: 11px 32px;
	color: white;
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 7px;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: ease-out;
}
.btn-primary:hover {
	transform: scale(1.05);
}
.btn-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: 11px 32px;
	background-color: white;
	border: 1px solid black;
	color: black;
	border-radius: 7px;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: ease-out;
}
.btn-secondary:hover {
	background-color: black;
	color: white;
	text-decoration: none;
}
.btn-black {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 11px 32px;
	color: white;
	text-align: center;
	background-color: black;
	border: 1px solid black;
	border-radius: 7px;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: ease-out;
}
.btn-black:hover,
a.btn-black:hover {
	text-decoration: underline;
	background-color: black;
	border: 1px solid black;
	color: white;
}
.show-password-button {
	display: flex;
	padding: 7px;
	position: absolute;
	right: 3px;
}
.form-control {
	border: none;
	border-bottom: 1px solid black;
	background-color: white;
	padding: 8px 0;
	font-weight: 400;
	font-size: 16px;
	width: 100%;
	outline: none;
}
.form-control[type="password"] {
	padding: 8px 28px 8px 0;
}
.form-control::placeholder {
	color: black;
	font-weight: 400;
	font-size: 16px;
}
.tiles {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tile {
	border-radius: 12px;
	padding: 48px 64px 8px;
	background-color: white;
	box-shadow: 0 0 19px rgba(0, 0, 0, 0.25);
}
.tile-title {
	font-size: 24px;
	line-height: 30px;
	font-weight: 900;
	font-family: var(--font-special);
	text-align: center;
	margin-bottom: 4px;
}
.tile-subtitle {
	text-align: center;
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 32px;
}
.login-form,
.review-email,
.my-addresses {
	margin: 0 auto;
	padding: 0;
}
.register-form {
	margin: 0 auto;
}
.btn-list-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.info-list {
	display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    align-items: flex-start;
}
.info-list .info-item {
	align-items: center;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	padding: 0 8px;
}
.info-list .info-item .icon {
	display: flex;
	padding: 4px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.apple-btn-group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.separator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 8px;
	color: rgba(0, 0, 0, 0.5);
}
.separator .divider {
	border: 1px solid rgba(0, 0, 0, 0.5);
	flex-grow: 1;
}
.link-grey,
.link-grey:hover {
	color: rgba(0, 0, 0, 0.5);
	margin-top: 18px;
	gap: 10px;
	display: flex;
	justify-content: center;
	text-decoration: underline;
}
.connected-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	font-size: 14px;
	color: black;
	gap: 8px;
	margin-top: 22px;
}
.keep-connected {
	display: flex;
	align-items: center;
}
a,
a:link,
a:visited {
	color: inherit;
}
input[type="checkbox"] {
	transform: scale(1.3);
}
.form-group {
	display: grid;
	gap: 17px 25px;
	grid-template-columns: 1fr 1fr;
}
.field-group {
	align-items: center;
	display: flex;
	margin-top: auto;
	margin-bottom: 20px;
	position: relative;
}
.register-form {
	width: 780px;
}
.form-body {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20px;
}
.btn-row {
	display: flex;
    justify-content: flex-start;
    margin-top: 48px;
}
.btn-list-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.btn-list-row .btn {
	width: fit-content;
}
.salutation-fieldgroup {
	width: fit-content;
}
.terms-and-conditions-link,
.terms-and-conditions-link:link,
.terms-and-conditions-link:hover {
	color: black;
	text-decoration: underline;
}
.checkboxes {
	width: 100%;
	margin-bottom: 40px;
}
.checkbox {
	width: 100%;
	text-align: left;
}
.salutation-field-group {
	border-bottom: 1px solid black;
	padding-bottom: 8px;
	width: fit-content;
}
.picklist-field-group {
	border-bottom: 1px solid black;
	padding-bottom: 8px;
}
.btn-list-col .btn {
	width: 100%;
}
.remember-password-form,
.reset-password-form {
	margin: 0 auto;
}
.btn-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}
.container {
	display: flex;
	flex-direction: column;
	background-color: white;
	padding: 14px 80px;
}
.container.my-account {
	width: 100vw;
}
.breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.breadcrumbs ul li {
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
}
.my-account > section {
	margin-block: 38px;
	display: flex;
	gap: 84px;
}
.my-account aside {
	font-family: var(--font-special);
	display: flex;
	flex-direction: column;
	gap: 68px;
}
.my-account aside h1 {
	font-weight: 400;
	font-size: 36px;
	line-height: 43px;
}
.my-account aside nav {
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
}
.my-account aside nav ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.my-account aside nav li {
	border-bottom: 1px solid #bebebe;
	padding-bottom: 12px;
	min-width: 370px;
	margin-bottom: 8px;
}
.my-account aside nav li button {
	border: none;
	outline: none;
	background-color: white;
	width: fit-content;
}
.my-account aside nav li button.active {
	color: var(--primary-color);
}
.my-account .my-account-section {
	margin-top: 12px;
	display: none;
}
.my-account .my-account-section.visible {
	display: flex;
}
.my-account .tile {
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}
.my-account .tile-subtitle {
	margin-bottom: 28px;
}
.my-account .form-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.my-account .field-group {
	min-width: 300px;
}
.tile-title-group {
	margin-bottom: 38px;
}
.my-account-section .btn-list .btn {
	width: fit-content;
}

/* MEDIA QUERIES */
@media (max-width: 480px) {
	[community_layout-columnSpacer_columnSpacer-host] {
		padding: 0 !important;
	}
	.tile {
		border-radius: unset;
		padding: 32px;
		box-shadow: none;
	}
	.tile-subtitle {
		margin-bottom: 30px;
	}
	.register-form {
		width: auto;
	}
	.btn-list-row .btn {
		width: 100%;
	}
	.separator {
		font-size: 14px;
	}
	.info-list {
		gap: 12px;
	}
	.info-item {
		font-size: 14px;
		line-height: 17px;
	}
	.form-group {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.btn-list {
		width: 100%;
	}
	.remember-password-form {
		width: 100%;
		min-height: 100vh;
		background-color: white;
	}
	.tile-title-group {
		margin-bottom: 30px;
	}
}