.mw-ext-forms-form-picker {
	margin:20px;
}

.ext-forms-tag-error {
	padding: 20px;
	background-color: #ffa3a3;
	border-radius: 10px;
}

.field-button {
	width: 49%;
	margin-top: 10px;
	a {
		float: right;
	}
}
.mw-ext-forms-form {
	/* This is needed to show the error/success messages */
	padding-top: 30px;
	&:not( .ext-forms-standalone-form ) {
		margin: 20px;
		padding: 40px 20px;
		border: 2px solid #eaeaea;
		border-radius: 10px;
	}
	.oo-ui-flaggedElement-invalid {
		border: 1px solid red;
	}
	position: relative;
	.level-2 {
		margin-left: 20px;
	}
	.level-3 {
		margin-left: 40px;
	}
	.level-4 {
		margin-left: 60px;
	}
	.mw-ext-forms-form-loading-alert {
		text-align: center;
	}
	.ext-mw-forms-form-buttons {
		padding: 10px 10px 3px 10px;
		text-align: right;
		&.float-buttons {
			background-color: #eaeaea;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			position: -webkit-sticky;
			position: sticky;
			bottom: 1px;
			z-index: 20;
			margin-top: 10px;
		}
	}
	.mw-ext-forms-message-cnt {
		position: absolute;
		width: 100%;
		border-radius: 10px 10px 0 0;
		left: 0;
		top: 0;
		padding: 3px 20px 3px 10px;
		&.type-error {
			background-color: #ffa4a4;
		}
		&.type-ok {
			background-color: #9cf0ac;
		}
		&.type-info {
			background-color: #9ec5ff;
		}
		.oo-ui-buttonWidget {
			position: absolute;
			right: 0;
			top: -4px;
		}
 	}
	.forms-form-edit-layout {
		.oo-ui-fieldLayout-header {
			margin-right: 4% !important;
		}
	}
	.forms-form-view-layout {
		.view-label {
			width: 45%;
			font-weight: normal;
		}
	}
	.forms-form-layout-inner{
		margin-top: 10px;
	}
	.oo-ui-multiselectWidget-group {
		.oo-ui-checkboxMultioptionWidget {
			display: block;
		}
	}
	.oo-ui-radioSelectWidget {
		.oo-ui-radioOptionWidget {
			display: block;
		}
	}
	.oo-ui-progressBarWidget {
		width: 100%;
	}
	.forms-section {
		display: block !important;
		margin-top:20px;
		font-size: 1.2em;
	}
}

.oo-ui-checkboxMultiselectInputWidget.inline-cbx {
	.oo-ui-checkboxMultioptionWidget {
		display: inline-block;
		width: auto;
		margin-right: 10px;
	}
}

.ext-forms-single-image-view-widget {
	 .inner-image {
		 width: 100px;
		 height: 100px;
		 background-size: contain;
	 }
 }

/* Multi-step widget */
.ext-forms-widget-multi-step {
	margin-bottom: 30px;
	.step-navigator {
		&.configuration-horizontal {
			.step-navigator-button {
				display: inline-block;
				padding: 10px;
				border-right: 2px solid white;
				background-color: #0060df;
				.oo-ui-buttonElement-button span {
					color: white;
				}
				&:before {
					width: 0;
					height: 0;
					border-top: 60px solid transparent;
					border-bottom: 60px solid transparent;
					border-left: 60px solid green;
				}
				&.step-current {
					.oo-ui-buttonElement-button span {
						text-decoration: underline;
					}
					&.completion-step {
						background-color: #019f50;
					}
				}
				&.step-disabled {
					background-color: #9b9b9b;
					.oo-ui-buttonElement-button span {
						color: #3a3a3b;
					}
				}
			}
		}

	}
	.step-body {
		padding: 20px;
		margin-top: 10px;
		.step-body-step {
			&.step-hidden {
				display: none !important;
			}
		}
	}
	.step-footer {
		text-align: right;
	}
}

.ext-forms-widget-multiplier {
	/*Terrible*/
	.multiplier-remove-btn {
		position: absolute;
		left: -50px;
		margin-top: 10px;
		&:first-of-type {
			margin-left: 0 !important;
			margin-top: 0 !important;
		}
	}
	.multiplier-items-layout {
		margin-top: 10px;
		.oo-ui-fieldsetLayout-header {
			font-size: 1.2em;
		}
		.multiplier-item {
			margin-top: 10px;
			&:first-of-type {
				margin-top: 0;
			}
		}
	}
}

.ext-forms-widget-view-wikitext {
	margin: 10px;
	.ext-forms-widget-view-wikitext-error {
		font-size: 1.2em;
		color: red;
		font-weight: bold;
	}

	.ext-forms-widget-view-wikitext-loading {
		color: #777;
	}
}

.ext-forms-widget-radio-multi-horizontal {
	.oo-ui-radioSelectWidget {
		display: table;
		width: 100%;
		.oo-ui-radioOptionWidget {
			display: table-cell !important;
			margin-right: 10px;
			width: auto;
		}
	}
}

.widget-multioption-horizontal {
	.oo-ui-multioptionWidget,
	.oo-ui-radioOptionWidget {
		width: auto;
		margin-right: 15px;
		display: inline-block !important;
		&:last-of-type {
			margin-right: 0;
		}
	}
}

.forms-form-container {
	// TEMP HACK
	.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive a {
		color: white !important;
	}

	.oo-ui-checkboxInputWidget {
		margin-top: 5px;
	}

	.oo-ui-fieldLayout {
		.oo-ui-fieldLayout-field {
			width: 50% !important;
		}
	}

	.oo-ui-horizontalLayout {
		.oo-ui-fieldLayout {
			.oo-ui-fieldLayout-header {
				width: 100% !important;
			}
			.oo-ui-fieldLayout-field {
				width: 100% !important;
			}
		}
		.oo-ui-labelWidget {
			vertical-align: top;
		}
	}
}

.ext-forms-standalone-form {
	.control-wrap .oo-ui-fieldLayout-field {
		width: 56% !important;
	}
	&.nopadding {
		padding: 0;
	}
}