/*----------------------------------------------------------------- */
/* FORMS
/*----------------------------------------------------------------- */

form
{
	margin-bottom: 15px;
}

/* Success and error mesage
----------------------------------------- */
.happyforms-message-notice.success
{
	max-width: 780px;
	padding: 11px 20px 11px 20px;

	border-radius: 26px;
	background-color: var(--color__blue);
}

.happyforms-message-notice.error
{
	max-width: 780px;
	padding: 11px 20px 11px 20px;

	border-radius: 26px;
	background-color: var(--color__red);
}

.happyforms-message-notice.success h2,
.happyforms-message-notice.error h2
{
	font-size: 1.6rem;
	font-weight: var(--font-weight__normal);
	line-height: normal;

	margin: 0;

	color: var(--color__white);
}

.happyforms-message-notice.success h2 p,
.happyforms-message-notice.error h2 p
{
	margin: 0;
}

.happyforms-part-error-notice,
.happyforms-part-error-notice p
{
	color: #f25000;
}

.happyforms-part-error-notice p
{
	line-height: 1.2rem;

	display: flex;
	align-items: center;
	flex-flow: row nowrap;

	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;

	-webkit-tap-highlight-color: transparent;
}

.happyforms-part-error-notice p svg
{
	display: inline-block;

	width: 17px;
	height: 17px;
	margin: 0 8px 0 0;

	content: '';
}

.happyforms-part-error-notice p svg
{
	color: var(--color__red);
}

/* Required 
----------------------------------------- */

.happyforms-form__part[data-happyforms-required] label:not(.option-label) .label:not(:empty):after,
.happyforms-form__part[data-happyforms-required] .label a:after
{
	display: inline-block;

	margin-left: 5px;

	content: '*';

	color: var(--color__red);
}

/* Label
----------------------------------------- */

.happyforms-part__label
{
	margin-bottom: 0 !important;
	padding-left: 20px;
}

label
{
	display: inline-block;

	padding-bottom: 10px;

	cursor: pointer;
}

.form-label_off .happyforms-part__label-container
{
	display: none;
}

/* Input
----------------------------------------- */

input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='tel'],
input[type='number'],
input[type='search'],
textarea
{
	line-height: 5rem;

	display: block;

	width: 100%;
	max-width: 780px;
	height: 50px;
	margin: 0 0 10px 0;
	padding: 0 20px;

	transition: 0.3s;

	border: 1px solid var(--color__brown-lighter);
	border-radius: 26px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='search']:focus,
textarea:focus
{
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.075);
}

/* Placeholder
----------------------------------------- */

::-webkit-input-placeholder
{
	font-size: 2rem;

	text-transform: uppercase;

	color: var(--color__beige-darker);
}

::-moz-placeholder
{
	font-size: 2rem;

	text-transform: uppercase;

	color: var(--color__beige-darker);
}

:-ms-input-placeholder
{
	font-size: 2rem;

	text-transform: uppercase;

	color: var(--color__beige-darker);
}

input::placeholder,
textarea::placeholder
{
	font-size: 2rem;

	text-transform: uppercase;

	color: var(--color__beige-darker);
}

textarea
{
	line-height: normal;

	max-width: 780px;
	height: 200px;
	padding: 12px 20px;
}


input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration
{
	display: none;
}

.screen-reader-text
{
	position: absolute;
	top: 0;
	left: -10000em;
}

.happyforms-custom-select-dropdown
{
	display: none;
}

/* Checkbox
----------------------------------------- */

.happyforms-part__el input[type='checkbox']
{
	display: none;
}

.happyforms-part__el input[type='checkbox'] + .checkmark svg
{
	display: block;

	transition: var(--transition-delay__default);

	opacity: 0;
	color: var(--color__blue);
}

.happyforms-part__el input[type='checkbox']:checked + .checkmark svg
{
	opacity: 1;
}

.happyforms-part__el > label
{
	display: flex;
}

.happyforms-part__el .checkmark
{
	display: flex;
	align-items: center;
	justify-content: center;

	width: 20px;
	min-width: 20px;
	height: 20px;

	border: 1px solid var(--color__brown-lighter);
	border-radius: 3px;
	background: var(--color__white);
}

.happyforms-part__el .label p
{
	display: inline-block;

	margin: 0;
}

/* Submit button
----------------------------------------- */

button,
input[type='submit']
{
	padding: 0;

	cursor: pointer;
	transition: var(--transition-delay__default);

	border: none;
	background: none;
}

button:focus,
input[type='submit']:focus
{
	outline: none;
}

input[type='submit']
{
	font-family: var(--font-family__noto-sans);
	font-size: 1.4rem;
	font-weight: var(--font-weight__bold);

	position: relative;

	display: inline-block;

	padding: 10px 15px 10px 50px;

	text-transform: uppercase;

	color: var(--color__blue);
	border: 1px solid var(--color__blue);
	border-radius: 26px;
	background-color: var(--color__beige);
}

.happyforms-part--submit
{
	position: relative !important;

	display: inline-block !important;

	width: auto !important;
	margin-top: 15px !important;
	padding: 0 !important;
}

.happyforms-part--submit::before,
.happyforms-part--submit::after
{
	position: absolute;
	z-index: 3;
	top: 25%;
	left: 18px;

	display: inline-block;

	width: 21px;
	height: 16px;

	content: url('../svg/icon_mail-blue.svg');
	cursor: pointer;
	transition: var(--transition-delay__default);

	opacity: 1;
}

.happyforms-part--submit::before
{
	content: url('../svg/icon_mail-white.svg');

	opacity: 0;
}

.happyforms-part--submit:hover::after
{
	opacity: 0;
}

.happyforms-part--submit:hover::before
{
	opacity: 1;
}

.happyforms-part--submit:hover input[type='submit']
{
	color: var(--color__white);
	background: var(--color__blue);
}

.happyforms-submit-success .happyforms-part--submit::before,
.happyforms-submit-success .happyforms-part--submit::after
{
	display: none;
}

@media (max-width: 760px)
{
	.happyforms-message-notice.error h2,
	.happyforms-message-notice.success h2
	{
		font-size: 1.5rem;
	}

	input[type='text'],
	input[type='email'],
	input[type='url'],
	input[type='password'],
	input[type='tel'],
	input[type='number'],
	input[type='search'],
	textarea,
	button
	{
		font-size: var(--font-size__default);

		margin: 0 0 5px 0;

		border-radius: 20px;
	}

	input[type='text'],
	input[type='email'],
	input[type='url'],
	input[type='password'],
	input[type='tel'],
	input[type='number'],
	input[type='search']
	{
		line-height: 4rem;

		height: 40px;
	}

	input[type='submit']
	{
		font-size: 1rem;

		padding: 10px 11px 10px 39px;
	}

	label
	{
		padding-bottom: 5px;
	}


	textarea
	{
		height: 207px;
	}

	.happyforms-part--submit::before,
	.happyforms-part--submit::after
	{
		top: 16%;
		left: 17px;

		width: 14px;
		height: 11px;
	}

	/* Placeholder
----------------------------------------- */

	::-webkit-input-placeholder
	{
		font-size: 1.2rem;
	}

	::-moz-placeholder
	{
		font-size: 1.2rem;
	}

	:-ms-input-placeholder
	{
		font-size: 1.2rem;
	}

	input::placeholder,
	textarea::placeholder
	{
		font-size: 1.2rem;
	}
}
