@import "fonts.css";
@import "variables.css";
@import "normalize.css";
@import "text-fields.css";
@import "radio-fields.css";
@import "checkbox.css";
@import "consent.css";
@import "message.css";
@import "toast.css";

body {
	padding: var(--padding-body-mobile);
	background-color: var(--color-green200);
	font-family: Karla, sans-serif;
	font-weight: 400;
	font-size: 16px;
}

.container {
	width: 100%;
	background-color: var(--color-white);
	border-radius: var(--border-radius-container);
	padding: var(--padding-container-mobile);
}

.form-title {
	font-family: Karla, sans-serif;
	font-weight: bold;
	font-size: 32px;
	line-height: 100%;
	letter-spacing: -1px;
	color: var(--color-grey900);
	padding-bottom: 32px;
}

.label {
	line-height: var(--line-height-base);
	color: var(--color-grey900);
	font-weight: 400;
	font-style: normal;
}

.submit-btn {
	width: 100%;
	height: 59px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	border-radius: var(--border-radius-input);
	border: 1px solid var(--color-green600);
	background-color: var(--color-green600);
	color: var(--color-white);
	font-size: 18px;
	font-weight: 700;
	line-height: var(--line-height-base);
	transition: 0.2s;
}

.submit-btn:focus-visible {
	background-color: #063f36;
	outline: none;
}

.required::after {
	content: "";
	background-image: url("../images/required.svg");
	width: 7px;
	height: 24px;
	position: absolute;
	margin-left: 8px;
}

.attribution {
	text-align: center;
	font-size: 14px;
	padding-top: 10px;
}

.attribution a {
	color: var(--color-grey900);
}

.error-msg {
	color: var(--color-red);
	font-size: 16px;
	line-height: var(--line-height-base);
}

.error-msg:not(:empty) {
    margin-top: 8px;
}

.error {
	border: 1px solid var(--color-red);
}

@media (min-width: 576px) {
	body {
		padding: var(--padding-body-tablet);
	}
	
	.container {
		width: 100%;
		max-width: 736px;
		margin: 0 auto;
		padding: var(--padding-container-tablet-desktop);
	}
}

@media (min-width: 1200px) {
	body {
		padding: 128px 0;
	}
	
	.submit-btn:hover {
		background-color: #063f36;
	}
}