/* Container */

.acf-section-styles-container {
	display: flex;
	flex-direction: row;
}

/* Box Model */

.acf-section-styles-box-model {
	flex: 0 1 500px;
	margin: 0 50px 0 0;
	width: 500px;
}

.acf-section-styles-box-model label {
	position: absolute;
	top: 5px;
	left: 5px;
	line-height: 1;
	margin: 0;
}

.acf-section-styles-box-model input {
	position: absolute;
	width: 50px;
	height: 28px;
	text-align: center;
	border: 1px solid #ddd;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
	box-sizing: border-box;
	padding: 3px 5px;
	resize: none;
	margin: 0;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
	background-color: #fff;
	color: #32373c;
	outline: 0;
	transition: 50ms border-color ease-in-out;
}

.acf-section-styles-box-model input:focus {
	border-color: #5b9dd9;
	box-shadow: 0 0 2px rgba(30,140,190,.8);
}

.acf-field .acf-section-styles-container .top {
	top: 5px;
	left: 50%;
	margin: 0 0 0 -25px;
}

.acf-field .acf-section-styles-container .right {
	top: 50%;
	right: 5px;
	margin: -14px 0 0 0;
}

.acf-field .acf-section-styles-container .bottom {
	bottom: 5px;
	left: 50%;
	margin: 0 0 0 -25px;
}

.acf-field .acf-section-styles-container .left {
	top: 50%;
	left: 5px;
	margin: -14px 0 0 0;
}

.acf-section-styles-margin {
	border: 1px dashed #ccc;
}

.acf-section-styles-border {
	background: #f9f9f9;
}

.acf-section-styles-padding {
	background: #eee;
}

.acf-section-styles-container .acf-section-style-param {
	position: relative;
	padding: 30px 60px 40px;
	box-sizing: border-box;
}

.acf-section-styles-container .acf-section-styles-padding {
	padding: 50px 60px;
}

/* Style Options */

.acf-section-styles-options {
	flex: 1;
	max-width: 360px;
}

.acf-section-styles-options label {
	display: block;
}

.acf-section-styles-background-image-preview-container {
	display: inline-block;
}

.acf-section-styles-background-image-container img {
	display: block;
	max-width: 100%;
	height: auto;
}

.acf-section-styles-background-color-container,
.acf-section-styles-background-image-container,
.acf-section-styles-background-style-container,
.acf-section-styles-background-position-container {
	clear: both;
	padding: 15px 0 0;
}

.acf-section-styles-input-row:after {
  content: "";
  display: table;
  clear: both;	
}

.acf-section-styles-input-col-half {
	float: left;
	margin: 0 4% 0 0;
	width: 48%;
}

.acf-section-styles-input-col-half:last-child {
	margin-right: 0;
}

@media only screen and (max-width: 550px), (min-width: 850px) and (max-width: 1050px) {
	.acf-section-styles-box-model {
		width: 400px;
	}

	.acf-section-styles-box-model .acf-label label {
		font-size: 11px;
	}

	.acf-section-styles-box-model input {
		width: 40px;
	}
}

@media only screen and (max-width: 1200px) {
	.acf-section-styles-container {
		flex-direction: column;
	}

	.acf-section-styles-border-color-container {
		margin: 15px 0 0;
	}

	.acf-section-styles-border-color-container,
	.acf-section-styles-border-style-container {
		float: none;
		width: 100%;
	}

	.acf-section-styles-box-model {
		flex: 1;
		margin: 0 auto 25px;
	}
}

@media only screen and (max-width: 1600px) {
	.acf-table .acf-section-styles-container {
		flex-direction: column;
	}

	.acf-table .acf-section-styles-border-color-container {
		margin: 15px 0 0;
	}

	.acf-table .acf-section-styles-border-color-container,
	.acf-table .acf-section-styles-border-style-container {
		float: none;
		width: 100%;
	}

	.acf-table	.acf-section-styles-box-model {
		flex: 1;
		margin: 0 auto 25px;
	}
}

@media only screen and (max-width: 1300px) {
	.acf-table .acf-section-styles-box-model {
		width: 400px;
	}

	.acf-table .acf-section-styles-box-model .acf-label label {
		font-size: 11px;
	}

	.acf-table .acf-section-styles-box-model input {
		width: 40px;
	}
}

@media only screen and (min-width: 850px) and (max-width: 1300px) {
	.acf-table .acf-section-styles-box-model {
		width: 300px;
	}

	.acf-table .acf-section-styles-container .acf-section-style-param {
		padding: 30px 30px 40px;
	}

	.acf-table .acf-section-styles-box-model .acf-label label {
		font-size: 10px;
	}

	.acf-table .acf-section-styles-box-model input {
		font-size: 12px;
		width: 30px;
	}
}