/* 
 * Forms
 */

.w-form {
	line-height: 1.4;
	}
.w-form-h {
	display: flex;
	margin-left: calc( var(--fields-gap, 1rem) / -2 );
	margin-right: calc( var(--fields-gap, 1rem) / -2 );
	}
.w-form-row {
	position: relative;
	width: 100%;
	padding-left: calc( var(--fields-gap, 1rem) / 2 );
	padding-right: calc( var(--fields-gap, 1rem) / 2 );
	}
	.w-form-row-label {
		font-weight: 600;
		margin-bottom: 0.3em;
		}
	.w-form-row-description {
		font-size: 0.9em;
		margin-top: 0.3em;
		color: var(--color-content-faded);
		}
	.w-form-row-field {
		position: relative;
		}
		.w-form-row-field > i {
			position: absolute;
			z-index: 1;
			transform: translateY(-50%);
			top: calc( var( --inputs-height ) / 2 );
			font-size: var( --inputs-font-size );
			padding: 0 var( --inputs-padding );
			margin: var( --inputs-border-width );
			color: var( --inputs-text-color );
			text-align: center;
			pointer-events: none;
			transition: color 0.2s;
			}
	.w-form-row.for_select select {
		-webkit-appearance: none;
		height: auto;
		}
	body:not(.rtl) .w-form-row.for_select select {
		padding-right: 2.8em;
		}
		.w-form-row.for_select .w-form-row-field:after {
			content: '';
			position: absolute;
			top: 56%;
			transform: translateY(-50%);
			right: 0;
			font-size: var( --inputs-font-size );
			margin: 0 var( --inputs-padding );
			color: var( --inputs-text-color );
			pointer-events: none;
			border: 0.4em solid;
			border-left-color: transparent;
			border-right-color: transparent;
			border-bottom-color: transparent;
			border-radius: 2px;
			}
	.w-form-row.for_agreement label,
	.w-form-row.for_checkboxes label,
	.w-form-row.for_radio label {
		display: flex;
		padding: 0.2em 0;
		}

/* Shift with icon */
body:not(.rtl) .w-form-row.with_icon input,
body:not(.rtl) .w-form-row.with_icon textarea,
body:not(.rtl) .w-form-row.with_icon select {
	padding-left: calc( 1.8em + var(--inputs-padding) );
	}

/* Move Label */
.w-form-row.move_label .w-form-row-label {
	position: absolute;
	top: 0;
	z-index: 1;
	font-weight: inherit;
	line-height: 1.4;
	padding: 0 0.3em;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform 0.2s, top 0.2s;
	}
.w-form-row.move_label.focused .w-form-row-label,
.w-form-row.move_label.not-empty .w-form-row-label {
	top: -0.5em;
	transform: scale(0.75);
	}

/* Layout */
.w-form.layout_ver .w-form-h {
	flex-wrap: wrap;
	}
.w-form.layout_ver .w-form-row {
	margin-bottom: var(--fields-gap, 1rem);
	}
.w-form.layout_hor .w-form-row.for_submit {
	width: auto;
	}
.w-form.layout_hor .w-form-row.has_label:not(.move_label) ~ .w-form-row.for_submit {
	align-self: flex-end;
	}

/* Columns */
.w-form-row.cols_2 {
	width: 50%;
	}
.w-form-row.cols_3 {
	width: 33.3333%;
	}
.w-form-row.cols_4 {
	width: 25%;
	}

/* Submit Button */
.w-form-row.for_submit {
	flex-shrink: 0;
	margin-bottom: 0 !important;
	}
.w-form-row.for_submit.align_justify .w-btn {
	width: 100%;
	}
.w-form .w-btn i,
.w-form .w-btn-label {
	display: inline-block;
	transition: opacity 0.15s;
	}
.w-form .w-btn.loading i,
.w-form .w-btn.loading .w-btn-label {
	opacity: 0;
	}
.w-form .w-btn .g-preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 1.8em;
	opacity: 0;
	transform: translate(-50%,-50%);
	transition: opacity 0.3s;
	color: inherit;
	}
.w-form .w-btn.loading .g-preloader {
	opacity: 1;
	}

/* States & Messages */
.w-form-row-state {
	font-size: 0.9em;
	height: 0;
	opacity: 0;
	transition-property: height, padding, opacity;
	transition-duration: 0.3s;
	}
.w-form-row-state[validation-for],
.w-form-row.check_wrong .w-form-row-state {
	height: auto;
	padding-top: 0.3em;
	opacity: 1;
	color: red;
	}
.w-form-row.check_wrong input,
.w-form-row.check_wrong textarea,
.w-form-row.check_wrong select {
	box-shadow: 0 0 0 1px red;
	border-color: red;
	}
.w-form-message {
	opacity: 0;
	transition: opacity 0.2s, margin 0.2s;
	}
.w-form-message.type_success {
	margin: var(--fields-gap, 1rem) 0;
	opacity: 1;
	color: #4c0;
	}
.w-form-message.type_error {
	margin: var(--fields-gap, 1rem) 0;
	opacity: 1;
	color: red;
	}

/* FOR comments */
.comment-form .w-form-row {
	padding: 0;
	line-height: 1.4;
	margin-bottom: 1em;
	}

/* FOR protected post */
.post-password-form {
	margin: 1.5rem auto;
	}
.l-section.width_full .post-password-form {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	}
.post-password-form p {
	margin-bottom: 0.5rem;
	}
.post-password-form p label {
	font-size: 0;
	line-height: 0;
	}
.post-password-form p input[type=password] {
	font-size: 1rem;
	max-width: 300px;
	margin-bottom: 0.5em;
	}

/* jQuery UI Date picker
   ========================================================================== */
.ui-datepicker {
	display: none;
	height: auto;
	width: 17.4rem;
	margin: 0;
	padding: 1rem;
	box-shadow: var(--box-shadow);
	background: var(--color-content-bg-grad);
	color: var(--color-content-text);
	}
	.ui-datepicker a {
		transition: none;
		color: inherit !important;
		}
	.ui-datepicker-header {
		position: relative;
		text-align: center;
		line-height: 2.2rem;
		min-height: 2.2rem;
		margin: 0 0 0.5rem;
		padding: 0;
		border: none;
		}
	.ui-datepicker-title {
		font-size: 0.9rem;
		margin: 0 14.285%;
		}
		.ui-datepicker-title select {
			font-size: inherit;
			line-height: inherit;
			height: 2.2rem;
			min-height: 0;
			width: 40%;
			padding: 0 0.3rem;
			margin: 0;
			border-radius: 0 !important;
			box-shadow: none !important;
			background: none !important;
			color: inherit !important;
			}
	.ui-datepicker-prev {
		position: absolute;
		left: 0;
		width: 14.285%;
		cursor: pointer;
		border-radius: 0.2rem;
		}
		.ui-datepicker-prev span {
			vertical-align: top;
			font-size: 0;
			}
		.ui-datepicker-prev:before {
			vertical-align: top;
			content: '\f104';
			font-family: fontawesome;
			font-weight: 400;
			font-size: 1.4rem;
			}
	.ui-datepicker-next {
		position: absolute;
		right: 0;
		width: 14.285%;
		cursor: pointer;
		border-radius: 0.2rem;
		}
		.ui-datepicker-next span {
			vertical-align: top;
			font-size: 0;
			}
		.ui-datepicker-next::before {
			vertical-align: top;
			content: '\f105';
			font-family: fontawesome;
			font-weight: 400;
			font-size: 1.4rem;
			}
	.ui-datepicker th {
		font-size: 0.8rem;
		font-weight: normal;
		text-align: center;
		border: none;
		padding: 0;
		opacity: 0.33;
		}
	.ui-datepicker tbody td {
		font-size: 0.9rem;
		text-align: center;
		width: 14.285%;
		padding: 0;
		border: none;
		}
		.ui-datepicker td span,
		.ui-datepicker td a {
			display: block;
			line-height: 2.2rem;
			border-radius: 0.2rem;
			}
		.ui-datepicker a.ui-state-active {
			background: var(--color-content-primary-grad);
			color: #fff !important;
			}
		.no-touch .ui-datepicker a:not(.ui-state-active):hover {
			background: var(--color-content-bg-alt-grad);
			}
		.ui-datepicker a.ui-state-highlight {
			box-shadow: inset 0 0 0 1px;
			}

/* Contact Form 7
   ========================================================================== */
.wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
	}
span.wpcf7-list-item {
	display: block;
	margin: 0;
	}
	span.wpcf7-list-item > label {
		display: flex;
		padding: 0.2em 0;
		}
div.wpcf7-response-output {
	margin: 0;
	padding: 0.5rem 1rem;
	}

/* Rounded Corners
   ========================================================================== */
.rounded_none .ui-datepicker * {
	border-radius: 0 !important;
	}

/* Responsive
   ========================================================================== */
@media screen and (max-width: 600px) {
	.w-form-h {
		flex-wrap: wrap;
		}
	.w-form-row {
		width: 100% !important;
		}
	.w-form.layout_hor .w-form-row {
		margin-bottom: var(--fields-gap, 1rem);
		}
	.ui-datepicker {
		width: calc(100% - 3rem);
		}
	.ui-datepicker td span,
	.ui-datepicker td a {
		line-height: 2.6rem;
		}
	}

@media screen and (max-width: 480px) {
	.w-form-row.for_submit {
		float: none !important;
		display: block !important;
		margin: 0 !important;
		}
	.w-form.align_left .w-form-message.type_success,
	.w-form.align_right .w-form-message.type_success {
		display: block;
		text-align: center;
		padding-top: 0.6em;
		}
	.post-password-form p input[type=password] {
		max-width: none;
		}
	}
