/* Single Column Layout */
/**********************************************************************************************************************/

/*** columns == 'auto' ***/
@media all and (max-width: 500px) {
	.mblFormLayout.mblFormLayoutAuto fieldset {
		padding-left: 0;
		padding-right: 0;
	}

	/* A gap between rows */
	.mblFormLayout.mblFormLayoutAuto > * + * {
		margin-top: 0.6em;
	}

	/* Text widgets */
	.mblFormLayout.mblFormLayoutAuto .mblTextArea,
	.mblFormLayout.mblFormLayoutAuto .mblExpandingTextArea,
	.mblFormLayout.mblFormLayoutAuto .mblTextBox,
	.mblFormLayout.mblFormLayoutAuto .mblSearchBox{
		width: 100%;
		box-sizing: border-box;
	}
}

/*** columns == 'single' ***/
.mblFormLayout.mblFormLayoutSingleCol fieldset {
	padding-left: 0;
	padding-right: 0;
}

/* A gap between rows */
.mblFormLayout.mblFormLayoutSingleCol > * + * {
	margin-top: 0.6em;
}

/* Text widgets */
.mblFormLayout.mblFormLayoutSingleCol .mblTextArea,
.mblFormLayout.mblFormLayoutSingleCol .mblExpandingTextArea,
.mblFormLayout.mblFormLayoutSingleCol .mblTextBox,
.mblFormLayout.mblFormLayoutSingleCol .mblSearchBox{
	width: 100%;
	box-sizing: border-box;
}


/* Two Columns Layout */
/**********************************************************************************************************************/

/*** columns == 'auto' ***/
@media all and (min-width: 500px) {
	/* Form layout selector*/
	.mblFormLayout.mblFormLayoutAuto {
		display: table;
		width: 100%;
	}

	/* Form rows */
	.mblFormLayout.mblFormLayoutAuto > * {
		display: table-row;
	}
	/* Form cells */
	.mblFormLayout.mblFormLayoutAuto > * > * {
		display: table-cell;
		vertical-align: top;
		padding: 0.5em 0;
	}

	/* Left cells */
	.mblFormLayout.mblFormLayoutAuto > * > *:first-child {
		width:20%;
		padding-right: 0.5em;
	}

	/* mblFormLayoutRightAlign optional selector definition */
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child {
		text-align: right;
	}

	/* Force right margin of last elements of the right column, no way to select elements followed by a <br> */
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblButton:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblToggleButton:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblCheckBox:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSwitch:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblRadioButton:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblTextArea:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblExpandingTextArea:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblTextBox:last-child,
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSearchBox:last-child {
		margin-right: 0;
	}

	/* The Slider sticks to its bounds when margin=10px */
	.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSlider:last-child {
		display: inline-block;
		margin-right: 10px;
		margin-top: 0px;
	}

	/* Text widgets */
	.mblFormLayout.mblFormLayoutAuto .mblTextArea,
	.mblFormLayout.mblFormLayoutAuto .mblExpandingTextArea,
	.mblFormLayout.mblFormLayoutAuto .mblTextBox,
	.mblFormLayout.mblFormLayoutAuto .mblSearchBox{
		width: 50%;
		box-sizing: border-box;
	}
}

/*** columns == 'two' ***/

/* Form layout selector*/
.mblFormLayout.mblFormLayoutTwoCol {
	display: table;
	width: 100%;
}

/* Form rows */
.mblFormLayout.mblFormLayoutTwoCol > * {
	display: table-row;
}
/* Form cells */
.mblFormLayout.mblFormLayoutTwoCol > * > * {
	display: table-cell;
	vertical-align: top;
	padding: 0.5em 0;
}

/* Left cells */
.mblFormLayout.mblFormLayoutTwoCol > * > *:first-child {
	width:20%;
	padding-right: 0.5em;
}

/* mblFormLayoutRightAlign optional selector definition */
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child {
	text-align: right;
}

/* Force right margin of last elements of the right column, no way to select elements followed by a <br> */
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblButton:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblToggleButton:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblCheckBox:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSwitch:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblRadioButton:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblTextArea:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblExpandingTextArea:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblTextBox:last-child,
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSearchBox:last-child {
	margin-right: 0;
}

/* The Slider sticks to its bounds when margin=10px */
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSlider:last-child {
	display: inline-block;
	margin-right: 10px;
	margin-top: 0px;
}

/* Text widgets */
.mblFormLayout.mblFormLayoutTwoCol .mblTextArea,
.mblFormLayout.mblFormLayoutTwoCol .mblExpandingTextArea,
.mblFormLayout.mblFormLayoutTwoCol .mblTextBox,
.mblFormLayout.mblFormLayoutTwoCol .mblSearchBox{
	width: 50%;
	box-sizing: border-box;
}

/* Common Rules*/
/**********************************************************************************************************************/

.mblFormLayout fieldset {
	border: none;
	margin: 0;
}

/* Bold widget labels */
.mblFormLayout > * > *:first-child {
	font-weight: bold;
}

/* Whatever the screen width, force left margin of first elements and elements following a <br> */
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblButton:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblToggleButton:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblCheckBox:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSwitch:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblRadioButton:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblTextArea:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblExpandingTextArea:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblTextBox:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSearchBox:first-child,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblButton,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblToggleButton,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblCheckBox,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblSwitch,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblRadioButton,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblTextArea,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblExpandingTextArea,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblTextBox,
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblSearchBox {
	margin-left: 0;
}

/* The Slider sticks to its bounds when margin=10px */
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSlider:first-child {
	display: inline-block;
	margin-left: 10px;
	margin-top: 0;
	margin-bottom: 0;
}