/*----------------------------------------------------------------- */
/* FORMS
/*----------------------------------------------------------------- */

form .form__group
{
	display: grid;

	gap: 0 15px;
}

form .form__group_2
{
	grid-template-columns: repeat(2,minmax(0,1fr));
}

form .form__group_3
{
	grid-template-columns: repeat(3,minmax(0,1fr));
}

form .form__wrapper
{
	position: relative;
}

form .form__wrapper_small
{
	width: 100%;
	max-width: 260px;
}

form .form__info_small
{
	max-width: 360px;
	margin-bottom: 20px;
}

form label
{
	font-size: var(--font-size__small-extra);

	position: relative;

	display: inline-block;

	margin-bottom: 8px;

	cursor: pointer;
	text-transform: uppercase;
}

form input[type='text'],
form input[type='email'],
form input[type='url'],
form input[type='password'],
form input[type='tel'],
form input[type='number'],
form input[type='search'],
form textarea,
form select
{
	line-height: 38px;

	width: 100%;
	height: 38px;
	margin-bottom: 15px;
	padding: 8px 12px;

	transition: border-color var(--transition-duration__default);

	color: var(--color__content-text);
	border: 1px solid var(--color__form-border);
	border-radius: 4px;
	outline: none;
	background: transparent;
}

form textarea
{
	line-height: normal;

	height: 120px;
}

form input[type='text']:focus,
form input[type='email']:focus,
form input[type='url']:focus,
form input[type='password']:focus,
form input[type='tel']:focus,
form input[type='number']:focus,
form input[type='search']:focus,
form textarea:focus,
form select:focus
{
	border-color: var(--color__menu-links-bg);
}

form ::placeholder
{
	opacity: 0.8 !important;
	color: var(--color__form-placeholder) !important;
}

form input[type='search']::-webkit-search-decoration,
form input[type='search']::-webkit-search-cancel-button,
form input[type='search']::-webkit-search-results-button,
form input[type='search']::-webkit-search-results-decoration
{
	display: none;
}

.login form select
{
	line-height: normal;

	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

form .form__action_password input[type='password'],
form .form__action_password input[type='text']
{
	padding: 8px 48px 8px 12px;
}

form .form__action_password,
.login .wp-hide-pw
{
	position: absolute;
	top: 1px;
	right: 1px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	border-radius: 4px;
}

form .form__action_password:before,
.login .wp-hide-pw .dashicons
{
	display: block;

	width: 22px;
	height: 22px;

	content: '';
	transition: background-color var(--transition-duration__default);

	background-color: var(--color__content-text);
}

form .form__action_password:hover:before,
.login .wp-hide-pw:hover .dashicons
{
	background: var(--color__blue);
}

form input[type='password'].form__field_password + .form__action_password:before,
.login .wp-hide-pw .dashicons-visibility
{
	-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'22\' height=\'22\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 9a3.02 3.02 0 0 0-3 3c0 1.642 1.358 3 3 3 1.641 0 3-1.358 3-3 0-1.641-1.359-3-3-3z\'%3E%3C/path%3E%3Cpath d=\'M12 5c-7.633 0-9.927 6.617-9.948 6.684L1.946 12l.105.316C2.073 12.383 4.367 19 12 19s9.927-6.617 9.948-6.684l.106-.316-.105-.316C21.927 11.617 19.633 5 12 5zm0 12c-5.351 0-7.424-3.846-7.926-5C4.578 10.842 6.652 7 12 7c5.351 0 7.424 3.846 7.926 5-.504 1.158-2.578 5-7.926 5z\'%3E%3C/path%3E%3C/svg%3E');
	        mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'22\' height=\'22\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 9a3.02 3.02 0 0 0-3 3c0 1.642 1.358 3 3 3 1.641 0 3-1.358 3-3 0-1.641-1.359-3-3-3z\'%3E%3C/path%3E%3Cpath d=\'M12 5c-7.633 0-9.927 6.617-9.948 6.684L1.946 12l.105.316C2.073 12.383 4.367 19 12 19s9.927-6.617 9.948-6.684l.106-.316-.105-.316C21.927 11.617 19.633 5 12 5zm0 12c-5.351 0-7.424-3.846-7.926-5C4.578 10.842 6.652 7 12 7c5.351 0 7.424 3.846 7.926 5-.504 1.158-2.578 5-7.926 5z\'%3E%3C/path%3E%3C/svg%3E');
}

form input[type='text'].form__field_password + .form__action_password:before,
.login .wp-hide-pw .dashicons-hidden
{
	-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'22\' height=\'22\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 19c.946 0 1.81-.103 2.598-.281l-1.757-1.757c-.273.021-.55.038-.841.038-5.351 0-7.424-3.846-7.926-5a8.642 8.642 0 0 1 1.508-2.297L4.184 8.305c-1.538 1.667-2.121 3.346-2.132 3.379a.994.994 0 0 0 0 .633C2.073 12.383 4.367 19 12 19zm0-14c-1.837 0-3.346.396-4.604.981L3.707 2.293 2.293 3.707l18 18 1.414-1.414-3.319-3.319c2.614-1.951 3.547-4.615 3.561-4.657a.994.994 0 0 0 0-.633C21.927 11.617 19.633 5 12 5zm4.972 10.558-2.28-2.28c.19-.39.308-.819.308-1.278 0-1.641-1.359-3-3-3-.459 0-.888.118-1.277.309L8.915 7.501A9.26 9.26 0 0 1 12 7c5.351 0 7.424 3.846 7.926 5-.302.692-1.166 2.342-2.954 3.558z\'%3E%3C/path%3E%3C/svg%3E');
	        mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'22\' height=\'22\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 19c.946 0 1.81-.103 2.598-.281l-1.757-1.757c-.273.021-.55.038-.841.038-5.351 0-7.424-3.846-7.926-5a8.642 8.642 0 0 1 1.508-2.297L4.184 8.305c-1.538 1.667-2.121 3.346-2.132 3.379a.994.994 0 0 0 0 .633C2.073 12.383 4.367 19 12 19zm0-14c-1.837 0-3.346.396-4.604.981L3.707 2.293 2.293 3.707l18 18 1.414-1.414-3.319-3.319c2.614-1.951 3.547-4.615 3.561-4.657a.994.994 0 0 0 0-.633C21.927 11.617 19.633 5 12 5zm4.972 10.558-2.28-2.28c.19-.39.308-.819.308-1.278 0-1.641-1.359-3-3-3-.459 0-.888.118-1.277.309L8.915 7.501A9.26 9.26 0 0 1 12 7c5.351 0 7.424 3.846 7.926 5-.302.692-1.166 2.342-2.954 3.558z\'%3E%3C/path%3E%3C/svg%3E');
}

form .form__field_checkbox,
.login .forgetmenot label,
form .ff-el-form-check-label
{
	font-size: var(--font-size__small);

	display: inline-block !important;

	margin: 0;
	padding-left: 22px;

	text-transform: none;
}

form .form__field_checkbox input[type='checkbox'],
.login .forgetmenot input[type='checkbox'],
form .ff-el-form-check-label input[type='checkbox']
{
	display: none;
}

form .form__field_checkbox:before,
.login .forgetmenot label:before,
form .ff-el-form-check-label:before
{
	position: absolute;
	top: 2px;
	left: 0;

	display: block;

	width: 16px;
	height: 16px;

	content: '';
	transition: background var(--transition-duration__default), border-color var(--transition-duration__default);

	border: 1px solid var(--color__form-border);
	border-radius: 4px;
	background: transparent;
}

form .form__field_checkbox:after,
.login .forgetmenot label:after,
form .ff-el-form-check-label:after
{
	position: absolute;
	top: 7px;
	left: 4px;

	display: block;

	width: 9px;
	height: 5px;

	content: '';
	transition: opacity var(--transition-duration__default);
	transform: rotate(-45deg);

	opacity: 0;
	border-bottom: 2px solid var(--color__white);
	border-left: 2px solid var(--color__white);
}

form input[type='checkbox']:checked + label:before,
.login .forgetmenot input[type='checkbox']:checked + label:before,
form .ff-el-form-check.ff_item_selected label:before
{
	border-color: var(--color__blue);
	background: var(--color__blue);
}

form input[type='checkbox']:checked + label:after,
.login .forgetmenot input[type='checkbox']:checked + label:after,
form .ff-el-form-check.ff_item_selected label:after
{
	opacity: 1;
}

form .form__field_select
{
	position: relative;
}

form .form__field_select select
{
	cursor: pointer;
}

form .form__field_select select option
{
	color: var(--color__black);
}

form .form__field_select .form__field_select-arrow
{
	position: absolute;
	top: 13px;
	right: 12px;

	display: block;

	width: 8px;
	height: 8px;

	transition: transform var(--transition-duration__default), top var(--transition-duration__default);
	transform: rotate(-45deg);

	border-bottom: 1px solid var(--color__content-text);
	border-left: 1px solid var(--color__content-text);
}

form .form__field_select select:focus + .form__field_select-arrow
{
	top: 17px;

	transform: rotate(135deg);
}

form button[type='submit'],
form input[type='submit']
{
	font-size: var(--font-size__default);
	font-weight: var(--font-weight__normal);

	position: relative;

	padding: 8px 22px;

	cursor: pointer;
	transition: color var(--transition-duration__default), background-color var(--transition-duration__default);
	text-decoration: none;

	color: var(--color__white);
	border: none;
	border-radius: 5px;
	background-color: var(--color__blue);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

form button[type='submit']:hover,
form input[type='submit']:hover
{
	text-decoration: none;

	color: var(--color__white);
	background: var(--color__blue-dark);
}

form button[type='submit']:focus,
form input[type='submit']:focus
{
	outline: none;
}

@media (max-width: 600px)
{
	form .form__group_2,
	form .form__group_3
	{
		grid-template-columns: 1fr;
	}
}

/* --- NOTICES --- */
form .form__notice,
.login .notice,
.ff-message-success
{
	display: block;

	margin-bottom: 15px;
	padding: 12px 20px;

	transition: background-color var(--transition-duration__default), border-color var(--transition-duration__default);

/* border: 1px solid transparent; */

	border: none;
	border-radius: 4px;
}

form .form__notice:last-child
{
	margin-top: 15px;
}

form .form__notice_info,
.login .notice-info
{
	color: var(--color__blue);
	border-color: var(--color__alert_general-border);
	background-color: var(--color__alert_general-bg);
}

form .form__notice_success,
.login .notice-succes,
.ff-message-success
{
	color: var(--color__green);
	border-color: var(--color__alert_success-border);
	background-color: var(--color__alert_success-bg);
}

form .form__notice_warning,
.login .notice-warning
{
	color: var(--color__orange);
	border-color: var(--color__alert_warning-border);
	background-color: var(--color__alert_warning-bg);
}

form .form__notice_error,
.login .notice-error
{
	color: var(--color__red);
	border-color: var(--color__alert_danger-border);
	background-color: var(--color__alert_danger-bg);
}

/* --- FLUENT FORMS --- */
.fluentform
{
	margin-bottom: var(--padding__default);
}

.fluentform .ff-el-group,
.fluentform .ff-el-input--label
{
	margin: 0;
}

.fluentform .ff-el-form-check
{
	display: block;
}

.fluentform .ff-el-tc label.ff_tc_label > span
{
	display: contents;
}

.fluentform .ff-el-tc label.ff_tc_label > div
{
	display: inline;
}

.fluentform .ff-el-is-error .ff-el-form-control
{
	border-color: var(--color__red);
}

.fluentform .ff-el-is-error .text-danger
{
	margin: -10px 0 15px 0;
}

.fluentform .text-danger,
.fluentform .ff-el-is-error .ff-el-form-check-label,
.fluentform .ff-el-is-error .ff-el-form-check-label a
{
	color: var(--color__red);
}