/* ==== INCLUDE: /css/blocks/forms.css ==== */

.block-form .control-error,
.block-form .form-error {
	color: red;
}

.block-form .form-group.required > label::after {
	content: "*";
	color: red;
}

.block-form .title {
	text-align: left;
	margin-left: calc( 35% + 0.625rem );
	font-size: 2rem;
}

.block-form .stacked .title {
	margin-left: 0;
}

.block-form .form-group .control-error {
	display: table-caption;
    margin-left: 35%;
    text-align: left;
    padding: 1.25rem 0 0 0.625rem;
}

.block-form .form-error {
	display: table-caption;
    margin-left: 35%;
    text-align: left;
    padding: 1.25rem 0 0 0.625rem;
}

.block-form .form-group {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.block-form .form-group > label {
	display: table-cell;
	width: 35%;
	padding: 0.3rem 0.625rem;
	text-align: right;
	vertical-align: middle;
}

.block-form .form-group > .control-wrapper {
	display: table-cell;
	width: 65%;
	padding: 0.3rem 0.625rem;
	text-align: left;
}

.block-form .form-group > .control-wrapper  select {
	display: block;
	/*font-weight: 700;*/
	color: #444;
	line-height: 1.3;
	padding: .6rem 2.4rem .5rem .8rem;
	/*width: 100%;*/
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #ddd;
	/*box-shadow: 0 1px 0 1px rgba(0,0,0,.04);*/
	border-radius: .2em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: inherit;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='currentColor' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7em top 50%;
	background-size: .65em auto;
}

.block-form .form-group .dynamic-form-comment,
.block-form .form-group .dynamic-form-comment *
{
	font-size: 0.9rem;
}

.block-form .form-group > .control-wrapper > input.form-control,
.block-form .form-group > .control-wrapper > textarea.form-control {
	width: 100%;
}

.block-form .form-group > .control-wrapper > textarea.form-control {
	min-height: 6.25rem;
}

.block-form .form-group .radio label,
.block-form .form-group .checkbox label {
	display: block;
	padding: 0.19rem 0;
}

.block-form .dynamic-form-separator {
	padding: 0.3rem 0.625rem;
	border-bottom: 1px solid #aaa;
	margin-bottom: 1.25rem;
	margin-top: 0.625rem;
}

.block-form .form-buttons {
	display: table;
	width: 100%;
}

.block-form .form-buttons .buttons-left {
	display: table-cell;
	width: 35%;
	padding: 0.625rem 0.625rem;
}

.block-form .form-buttons .buttons-right {
	display: table-cell;
	width: 65%;
	padding: 0.625rem 0.625rem;
	text-align: left;
}

.block-form .form-buttons button {
	padding: 0.625rem 1.25rem;
	font-size: 120%;
}

@keyframes submit-button-feedback {
	0% {
		opacity: 0.9;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 0.9;
	}
}

.block-form .button.submitting,
.block-form .button.submitting:hover {
	/*opacity: 0.6;*/
	animation: submit-button-feedback 2s infinite;
	filter: grayscale(100%);
}

.block-form .stacked .form-group > label,
.block-form .stacked .form-group > .control-wrapper {
	display: block;
	width: 100%;
	text-align: left;
}

.block-form .stacked.placeholders .form-group > label {
	display: none;
}
.block-form .stacked.placeholders .form-group > label {
	display: none;
}

.block-form .stacked.placeholders .form-group.form-group-select > label,
.block-form .stacked.placeholders .form-group.form-group-radio > label,
.block-form .stacked.placeholders .form-group.form-group-link > label,
.block-form .stacked.placeholders .form-group.form-group-checkbox > label {
	display: inherit;
}

.block-form .stacked .buttons-right {
	text-align: right;
}

.block-form .stacked .control-error {
	margin-left: 0;
}

.mrp-dynamic-form .form-control-comment {
	font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

@media (max-width: 35rem) {

	.block-form .control-error {
		margin-left: 0;
	}

	.block-form .form-group > label,
	.block-form .form-group > .control-wrapper {
		display: block;
		text-align: left;
		width: 100%;
		padding: 0.3rem 0;
	}

	.block-form .dynamic-form-separator {
		padding: 0.3rem 0;
	}
	
	.block-form .form-group > label {
		font-weight: bold;
	}
	
	.block-form .form-group > .control-wrapper {
		padding-top: 0px;
		padding-bottom: 0.937rem;
	}
	
	.block-form .form-group > .control-wrapper input:not([type=radio]):not([type=checkbox]),
	.block-form .form-group > .control-wrapper textarea,
	.block-form .form-group > .control-wrapper select {
		width: 100%;
	}
	
	.block-form .buttons-right {
		text-align: right;
	}
	
	.block-form.block-form .title {
		text-align: left;
		margin-left: 0;
	}
}