/**
 * @author Valentin Alisch
 * @version 0.4
 *
 * WPUI CSS: Global
 */

.wpui {}

	.wpui * {
		vertical-align: top;
		border: 0 none;
		outline: 0;
		padding: 0;
		margin: 0;
		list-style: none;
		box-sizing: border-box;

		font-size: 100%;

		/*-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		-o-text-size-adjust: none;
		text-size-adjust: none;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;*/
	}

	.wpui .ui-sortable-handle {
		cursor: grab;
	}

	.wpui .ui-sortable-handle:active {
		cursor: grabbing;
	}



	/**
	 * Fieldset: Horizontal
	 *
	 * @since 0.1
	 */
	.wpui [class*="wpui-fieldset"] {
		display: flex;
		position: relative;
		width: 100%;
		/*align-items: flex-start;*/
	}

		.wpui .wpui-fieldset > [class^="wpui-setting"] {
			margin-top: 0;
			flex: 1;
			/*overflow: hidden;*/
		}

		.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] {
			margin: 0;
		}

		.wpui .wpui-fieldset:not( .seamless ) > [class^="wpui-setting"] + [class^="wpui-setting"] {
			margin-top: 0;
			margin-left: calc( var( --horizontal_spacing ) / 2 );
		}

			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"],
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > input,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > button,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > select,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > .wpui-states,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > .wpui-states span,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > [class*="wpui-fieldset"] > [class^="wpui-setting"],
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > [class*="wpui-fieldset"] > [class^="wpui-setting"] > input,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > [class*="wpui-fieldset"] > [class^="wpui-setting"] > button,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > [class*="wpui-fieldset"] > [class^="wpui-setting"] > select,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > [class*="wpui-fieldset"] > [class^="wpui-setting"] > .wpui-states,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"] > [class*="wpui-fieldset"] > [class^="wpui-setting"] > .wpui-states span {
				border-radius: 0;
				border-right-width: 0;
			}

			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > input,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > button,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > select,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > .wpui-states,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > .wpui-states span,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > [class*="wpui-fieldset"] > [class^="wpui-setting"],
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > input,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > button,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > select,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > .wpui-states,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:first-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > .wpui-states span {
				border-top-left-radius: var( --border_radius );
				border-bottom-left-radius: var( --border_radius );
			}

			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > input,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > button,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > select,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > .wpui-states,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > .wpui-states span,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > [class*="wpui-fieldset"] > [class^="wpui-setting"],
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > input,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > button,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > select,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > .wpui-states,
			.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:last-child > [class*="wpui-fieldset"] > [class^="wpui-setting"] > .wpui-states span {
				border-right-width: var( --border_width );
				border-top-right-radius: var( --border_radius );
				border-bottom-right-radius: var( --border_radius );
			}

				.wpui .wpui-fieldset.seamless > [class^="wpui-setting"]:not( :last-child ) > input:checked + .wpui-states::after {
					content: '';
					width: 1px;
					height: 100%;
					display: block;
					position: absolute;
					top: 0;
					right: calc( var( --border_width ) * -1 );
					background: var( --border_color--init );
					z-index: 100;
				}

	/**
	 * Fieldset: Vertical
	 *
	 * @since 0.1
	 */			
	.wpui .wpui-fieldset--vertical {
		flex-direction: column;
		height: 100%;
	}

		.wpui .wpui-fieldset--vertical > [class^="wpui-setting"] {
			flex: 1;
			overflow: hidden;
		}

		.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"] {
			margin: 0;
		}

		.wpui .wpui-fieldset--vertical:not( .seamless ) > [class^="wpui-setting"] + [class^="wpui-setting"] {
			margin-top: calc( var( --vertical_spacing ) / 2 );
		}

			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"],
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"] > input,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"] > button,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"] > select,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"] > .wpui-states,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"] > .wpui-states span {
				border-bottom-width: 0;
			}

			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:not( :first-child ):not( :last-child ),
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:not( :first-child ):not( :last-child ) > input,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:not( :first-child ):not( :last-child ) > button,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:not( :first-child ):not( :last-child ) > select,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:not( :first-child ):not( :last-child ) > .wpui-states,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:not( :first-child ):not( :last-child ) > .wpui-states span {
				border-radius: 0 !important;
			}

			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:first-child,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:first-child > input,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:first-child > button,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:first-child > select,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:first-child > .wpui-states,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:first-child > .wpui-states span {
				border-bottom-right-radius: 0 !important;
				border-bottom-left-radius: 0 !important;
			}

			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:last-child,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:last-child > input,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:last-child > button,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:last-child > select,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:last-child > .wpui-states,
			.wpui .wpui-fieldset--vertical.seamless > [class^="wpui-setting"]:last-child > .wpui-states span {
				border-top-right-radius: 0 !important;
				border-top-left-radius: 0 !important;
				border-bottom-width: var( --border_width );
			}



	/**
	 * Fieldset: Drop Area
	 *
	 * @since 0.1
	 */
	.wpui .wpui-drop_area {
		position: relative;
		display: block;
		padding-top: 50%;
		border: var( --border_width ) dashed var( --border_color );
		/*background: var( --off_white );*/
	}



@media ( min-width: 600px ) {
	
}



@media ( min-width: 783px ) {

}



@media ( min-width: 960px ) {
	
}



@media ( min-width: 1400px ) {
	
}