form {
	margin-bottom: 1.5em;
}

input,
select,
textarea {
	border-radius: 0;
	font-family: var(--md-font-main);
	font-size: 1em;
	font-weight: 400;
	vertical-align: middle;
}

.select {
	appearance: none; /* Remove default styling */
	-webkit-appearance: none; /* Safari/Chrome */
	-moz-appearance: none; /* Firefox */
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='70,100 20,40 120,40' fill='%23000'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1em;
	padding-right: 2rem; /* Make space for the arrow */
	font: inherit;
	line-height: 1.8125;
  }

.select[multiple] {
	background-image: none;
	padding-right: 0;
}

/* Fieldsets and fields
---------------------------------------- */
.fieldset {
	border-bottom: 1px solid var(--md-white-dark);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 0 1.5em 0;
	padding-bottom: .5em;
}

.fieldset:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.field {
	margin-bottom: 1em;
	width: 100%;
}

.fieldset:last-child .field {
	margin-bottom: 0;
}

.field.half {
	/*align-self: flex-end;*/
	width: 49%;
}

@media screen and (max-width: 768px) {
	.field.half {
		width: 100%;
	}
}

/* Label and legend
---------------------------------------- */
label,
legend {
	color: var(--md-black);
	font-size: 1em;
	font-weight: 700;
	font-weight: 400; /* fix for EuclidFlex-Bold font */
	padding: 0 .125em;
	text-transform: uppercase;
}

legend {
	margin-bottom: 1em;
}

.toggle legend {
	cursor: pointer;
}

.toggle legend:after {
	margin-left: .375em;
	content: '▼';
}

.toggle legend.down:after {
	content: '▲';
}

label {
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	margin-bottom: .25em;
	font-family: 'EuclidFlex-Bold', 'EuclidFlex', sans-serif;
}

input + label {
	margin-bottom: 0;
}

input[type=text] + label,
select + label,
select + ul + label, /* For ParsleyJS validation list */
label small {
	font-size: .875em;
	text-transform: initial;
}

/* Input, select
---------------------------------------- */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="file"],
input[type="password"],
select,
textarea {
	background-color: var(--md-white-medium);
	border: 1px solid var(--md-grey-light);
	border-radius: .125em;
	margin-bottom: .125em;
	padding: .250em .5em;
	width: 100%;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	background-color: var(--md-white-light);
	box-shadow: inset 0px 0px 3px 1px var(--md-white-medium);
}

input[type="email"]:read-only {
	color: var(--md-grey-medium);
}

input[type="file"] {
	font-family: monospace;
	padding: .375em .5em;
}

.select2-container--default .select2-selection--single {
	background-color: var(--md-white-medium);
	border: 1px solid var(--md-grey-light);
	border-radius: .125em;
	font-weight: 400;
	height: auto;
	padding: .250em .5em;
	width: 100%;
}

.select2-container--default.select2-container--open .select2-selection--single {
	background-color: var(--md-white-light);
	box-shadow: inset 0px 0px 3px 1px var(--md-white-medium);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--md-black);
	padding-left: 0;
}

.select2-container--default + label {
	font-size: .875em;
	margin-top: .125em;
	text-transform: initial;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	right: 4px;
	top: 6px;
}

.select2-container--default {
	width: 100% !important;
}

/* Textarea
---------------------------------------- */
textarea {
	line-height: 1.5;
	min-height: 7.5em;
}

/* Buttons
---------------------------------------- */
button {
	font-family: var(--md-font-main);
}
input[type=submit],
.button {
	background-color: var(--md-blue-medium);
	border: 1px solid var(--md-blue-medium);
	border-radius: var(--md-button-border-radius);
	color: var(--md-white);
	cursor: pointer;
	display: inline-block;
	font-family: var(--md-font-heading);
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.25;
	padding: var(--md-button-padding);
}

.button,
.button:hover,
a.button:visited,
.main a.button:visited {
	color: var(--md-white);
	text-decoration: none;
	transition: all 0.2s ease;
}

input[type=submit] {
	border: 1px solid var(--md-blue-medium);
	border-radius: var(--md-button-border-radius);
	padding: var(--md-button-padding);
}

@media screen and (max-width: 768px) {
	input[type=submit] {
		display: block;
		margin: 1em auto 0 auto;
	}
}

.button:hover {
	/*transform: translateY(-1px);*/
	opacity: .9;
}

input[type=submit]:active,
.button:active {
	transform: translateY(1px);
}

input[type=submit]:disabled,
.button:disabled,
.button.cancel {
	background-color: var(--md-white-dark);
	border: 1px solid var(--md-grey-light);
	color: var(--md-grey-medium);
}

.button:disabled:active {
	top: 0;
}

a.button-large,
input[type=submit].button-large {
	background-color: #80bb40;
	border: 2px solid #80bb40;
	border-radius: .250em;
	color: #fff;
	cursor: pointer;
	display: block;

	font-size: 1.5rem;
	margin: 2px auto 20px auto;
	padding: var(--md-button-padding);
}

a.button-large.outline,
input[type=submit].button-large.outline {
	background-color: #fff;
	color: #80bb40;
}

@media screen and (max-width: 768px) {
	input[type=submit].button-large {
		font-size: 25px;
	}
}

/* File upload
---------------------------------------- */
.drop-zone {
	background-color: #fafafa;
	background-image: url('../images/file-upload-icon.svg');
	background-position: center top;
	background-repeat: no-repeat;
	border: .125em dashed #dbdbdb;
	padding: 0;
	text-align: center;
}

.drop-zone input[type="file"] {
	background-color: transparent;
	border: none;
	height: 100%;
	margin: 0 auto;
	padding: 25% 25% 14% 25%;
}

@media screen and (max-width: 768px) {
	.drop-zone input[type="file"] {
		padding: 25% 5% 14% 5%;
	}
}

.drop-zone input[type="file"]:focus {
	background-color: #2d76fc1a;
}

.loading,
.uploading {
	color: #60ae2e;
	background-image: url('../images/spinner.gif');
	background-image: url('../images/spinner.svg');
	background-position: right;
	/* For Safari */
	/*background-position: calc(100% - .375em) center; */
	background-position: calc(100% - .875em) center;
	background-repeat: no-repeat;
	background-size: .875em .875em;
	border: 1px solid #dbdbdb;
}

/* Pretty checkbox
---------------------------------------- */
.fieldset .field.pretty:last-child,
.field.pretty {
	margin-bottom: .875em;
}

.field.pretty.p-default input:checked~.state label:after {
	background-color: #90bd20 !important;
}

.field.pretty .state label {
	font-weight: 700;
}

@media screen and (max-width: 768px) {
	.field.pretty {
		line-height: 1.25;
		white-space: normal;
	}
	.field.pretty .state label::after,
	.field.pretty .state label::before {
		top: 1px;
	}
}

/* checkbox
---------------------------------------- */


.checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5rem;
	align-items: start;
	cursor: pointer;
	user-select: none;
	position: relative;
}

/* checkbox stays in first column, row 1 */
.checkbox .checkbox-box {
	grid-column: 1;
	grid-row: 1;
}

/* edit materials helpers
---------------------------------------- */
.md-list-table {
	width: 100%;
	border-collapse: collapse;
}

.md-text-right {
	text-align: right;
}

.md-muted-action-link {
	color: #999;
	margin-left: 5px;
	vertical-align: middle;
	display: inline-block;
}

.md-row-flex-center {
	display: flex;
	align-items: center;
}

.md-form-no-margin {
	margin-bottom: 0;
}

.md-form-inline-gap {
	margin-left: 10px;
	margin-bottom: 0;
}

.md-icon-button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #666;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

a.md-icon-button {
	text-decoration: none;
}

.md-file-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	background: var(--md-white-medium);
	padding: 10px;
	border-radius: 4px;
}

.md-pdf-icon {
	margin-right: 10px;
	font-size: 20px;
	color: #d00;
}

.md-video-link-row {
	display: flex;
	margin-bottom: 10px;
	align-items: center;
}

input[type="url"].md-video-link-input {
	flex-grow: 1;
	margin-right: 10px;
	margin-bottom: 0;
}

.md-em-title-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.md-em-thumb {
	width: 100px;
	height: 62.5px;
	object-fit: cover;
	object-position: center;
}

.md-em-thumb-placeholder {
	width: 100px;
	height: 62.5px;
	background: #eee;
}

.md-em-back-link {
	margin-bottom: 20px;
}

.md-em-section-title {
	margin-bottom: 20px;
}

.md-em-section-title h3 {
	margin: 0;
}

.md-em-desc-top-0 {
	margin-top: 0;
}

.md-em-desc-mb-10 {
	margin-bottom: 10px;
}

.md-em-product-picker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	align-items: end;
}

.md-em-video-picker {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: end;
}

.md-em-video-picker .md-video-link-input,
.md-em-video-picker .description {
	grid-column: 1 / -1;
	width: 100%;
	margin-right: 0;
}

.md-em-video-picker p.description {
	padding-bottom: 0;
}

.md-em-video-picker #add-video-link {
	grid-column: 1 / 2;
}

.md-em-product-error {
	margin-top: 10px;
	color: #c0392b;
	font-size: 14px;
}

.md-em-product-selected {
	margin-top: 12px;
}

.md-em-overflow-hidden {
	overflow: hidden;
}

.md-em-group-heading {
	margin: 0 0 15px;
}

.md-em-half-field {
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding-right: 15px;
	margin-bottom: 15px;
}

.md-em-half-label {
	margin-bottom: 5px;
	font-weight: bold;
	font-family: 'Palanquin-Regular', sans-serif;
}

.md-em-modal-actions {
	text-align: center;
	margin-top: 20px;
}

.md-em-product-selected-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	margin-top: 8px;
	border: 1px solid #d9e8c4;
	border-radius: 6px;
	background: #e8f5d6;
}

.md-em-product-selected-label {
	flex: 1;
	min-width: 0;
	line-height: 1.4;
}

.main a.md-em-selected-link,
.main a.md-em-selected-link:visited {
	color: var(--md-green-dark);
	text-decoration: none;
}

.main a.md-em-selected-link:hover,
.main a.md-em-selected-link:focus {
	color: var(--md-green-dark);
	text-decoration: underline;
}

.md-em-product-selected-item .md-icon-button {
	flex-shrink: 0;
}

/* label text stays in second column, row 1 */
.checkbox .label-text {
	grid-column: 2;
	grid-row: 1;
}

/* error message spans both columns, row 2 */
.checkbox .parsley-errors-list {
	grid-column: 1 / -1;
	grid-row: 2;
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	color: var(--md-error);
	font-size: 0.8125rem; /* 13px */
	font-family: 'Palanquin-regular', sans-serif;
}

.checkbox-box input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--md-grey-light); /* Tailwind gray-300 */
	border-radius: 0.25rem;
	background-color: white;
	display: grid;
	place-content: center;
	transition: all 0.2s ease-in-out;
	outline: none;
}

/* hover */
.checkbox:hover input[type="checkbox"] {
	border-color: var(--md-blue-medium); /* Tailwind gray-400 */
}

/* focus */
.checkbox-box input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 2px white, 0 0 0 4px var(--md-blue-medium); /* white gap + blue ring */
	border-color: var(--md-blue-medium);
}

/* checked */
.checkbox-box input[type="checkbox"]:checked {
	background-color: var(--md-blue-medium); /* Tailwind blue-500 */
	border-color: var(--md-blue-medium);
}

.checkbox-box input[type="checkbox"]::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	transform: scale(0);
	transition: transform 0.2s ease-in-out;
	background-color: white;
	clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 20%, 80% 0%, 43% 62%);
}

.checkbox-box input[type="checkbox"]:checked::after {
	transform: scale(1);
}

/* Validation
---------------------------------------- */
input[type="text"].parsley-error,
input[type="url"].parsley-error,
input[type="email"].parsley-error,
input[type="tel"].parsley-error,
input[type="number"].parsley-error,
input[type="file"].parsley-error,
input[type="password"].parsley-error,
select.parsley-error,
textarea.parsley-error {
	border-color: var(--md-error) !important;
	margin-bottom: 0;
}

ul.parsley-errors-list {
	color: var(--md-error);
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: none;
	font-size: 13px;
}

ul.parsley-errors-list li:last-child {
	padding: 0;
}

/* Leads page
---------------------------------------- */
#brand-lead-routing-form .md-em-product-picker > .field {
	margin-bottom: 0;
}

#brand-lead-routing-form #lead-routing-country,
#brand-lead-routing-form .md-lead-routing-control {
	height: 39px;
}

/* Statistics page
---------------------------------------- */
.md-stats-shell {
	padding: 0;
}

.md-stats-breadcrumb {
	font-size: 0.9375rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--md-blue-medium);
	font-family: var(--md-font-heading);
	margin: 0;
}

.md-stats-title {
	line-height: 1;
	color: var(--md-blue-dark);
	margin: 8px 0 0;
	text-transform: uppercase;
}

.md-stats-divider {
	border-top: 1px solid var(--md-grey-light);
	margin: 24px 0;
}

.md-stats-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.md-stats-card {
	background: var(--md-white-dark);
	border: 1px solid #cfd2d4;
	border-radius: 18px;
	padding: 18px 20px;
}

.md-stats-card-label {
	font-size: 1rem;
	text-transform: uppercase;
	color: #6d6d6d;
	margin: 0;
	line-height: 1.25;
}

.md-stats-card-value {
	font-size: 3rem;
	line-height: 1;
	margin: 12px 0 0;
	font-family: var(--md-font-heading);
	color: var(--md-blue-dark);
}

.md-stats-tabs {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.md-stats-tab {
	border-radius: 14px;
	padding: 0.55em 1.15em;
	line-height: 1.2;
}

.md-stats-tab.button {
	background: transparent;
	border-color: #c3c6c8;
	color: var(--md-black);
}

a.md-stats-tab.button,
a.md-stats-tab.button:visited,
.main a.md-stats-tab.button:visited {
	color: var(--md-black);
}

.md-stats-tab.button.is-active {
	background: var(--md-blue-medium);
	border-color: var(--md-blue-medium);
	color: var(--md-white);
}

a.md-stats-tab.button.is-active,
a.md-stats-tab.button.is-active:visited,
.main a.md-stats-tab.button.is-active:visited {
	color: var(--md-white);
}

.md-stats-empty {
	margin: 0;
	padding: 12px 0;
}

@media screen and (max-width: 1200px) {
	.md-stats-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 768px) {
	.md-stats-shell {
		padding: 0;
	}

	.md-stats-cards {
		grid-template-columns: 1fr;
	}

}