@import '../css/vars.less';


/*--------------------------------------------------------------------------------------------
*
*	acf-field
*
*--------------------------------------------------------------------------------------------*/

.acf-field,
.acf-field .acf-label,
.acf-field .acf-input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

.acf-field {
	margin: 0 0 20px;
	
	p.description {
		display: block;
		margin: 0;
		padding: 0;
	}
	
	
	/* label */
	.acf-label {
		vertical-align: top;
		margin: 0 0 10px;
		
		label {
		    display: block;
		    font-weight: bold;
		    margin: 0 0 3px;
			padding: 0;
		}
	}
	
	
	/* input */
	.acf-input {
		vertical-align: top;
		
		> p.description {
			margin-top: 5px;
		}
	}
	
	
	/* error */
	.acf-error-message {
		background: #F55E4F;
		color: #fff;
		margin: 0 0 10px;
		display: inline-block;
		border-radius: 3px;
		border-left: none;
		
		&:after {
			content: "";
			display: block;
			
			width: 0;
			height: 0;
			border: transparent 5px solid;
			border-top-color: #F55E4F;
			
			display: block;
			position: absolute;
			bottom: -10px;
			left: 10px;
		}
	}
}


/*--------------------------------------------------------------------------------------------
*
*	acf-fields
*
*--------------------------------------------------------------------------------------------*/

.acf-fields {
	position: relative;
	
	> .acf-field {
		margin: 0;
		padding: @field_padding;
		border-top: #EEEEEE solid 1px;
		position: relative;
		clear: left; /* used to clear floating widths */
		
		&:first-child {
			border-top-width: 0;
		}
	}
	
	&:after {
	    content: "";
	    display: block;
	    line-height: 0;
	    clear: both;
	}
	
	&.-border {
		border: #dfdfdf solid 1px;
		background: #fff;
	}
}

td.acf-fields {
	padding: 0 !important;
}


/*--------------------------------------------------------------------------------------------
*
*	acf-fields (left)
*
*--------------------------------------------------------------------------------------------*/
.acf-fields.-left > .acf-field {
	padding-left: 20%;
	
	html[dir="rtl"] & { padding-left: @field_padding_x; padding-right: 20%; }
	
	&:after {
	    content: "";
	    display: block;
	    line-height: 0;
	    clear: both;
	}
	
	&:before {
		content: "";
	    display: block;
	    position: absolute;
	    z-index: 0;
	    background: #F9F9F9;
	    border-color: #E1E1E1;
	    border-style: solid;
	    border-width: 0 1px 0 0;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    width: 20%;
	    
	    /* rtl */
		html[dir="rtl"] & {
			border-right-width: 0;
			border-left-width: 1px;
			left: auto;
			right: 0;
		}
	}
	
	> .acf-label,
	> .acf-input {
		float: left;
		margin: 0;
		
		html[dir="rtl"] & { float: right; }
	}
	
	
	> .acf-label {
		width: 25%;
		margin-left: -25%;
		padding: 0 @field_padding_x;
		
		html[dir="rtl"] & { margin-left: 0; margin-right: -25%; }
	}
	
	> .acf-input {
		width: 100%;
		padding-left: @field_padding_x;
		
		html[dir="rtl"] & { padding-left: 0; padding-right: @field_padding_x; }
	}
	
	
	/* mobile */
	@media screen and (max-width: @sm) {
		
		& {
			padding: @field_padding;
		}
		
		&:before { 
			display: none;
		}
		
		> .acf-label,
		> .acf-input {
			padding: 0;
			float: none;
			width: auto;
		}
		
		> .acf-label {
			margin: 0 0 10px;
		}
	}
}


/* acf-table */
.acf-table tr.acf-field {
	
	> td.acf-label,
	> td.acf-input {
		padding: @field_padding;
		margin: 0;
	}
	
	> td.acf-label {
		background: #F9F9F9;
	    width: 20%;
	}
	
	> td.acf-input {
		border-left-color: #E1E1E1;
	}
	
}


/*--------------------------------------------------------------------------------------------
*
*	acf-fields (clear)
*
*--------------------------------------------------------------------------------------------*/

.acf-fields.-clear > .acf-field {
	border: none;
	padding: 0;
	margin: 0 0 20px;
	
	&:before {
		display: none;
	}
	
	> .acf-label {
		padding: 0;
	}
	
	> .acf-input {
		padding: 0;
	}
}
	

/* left */
.acf-fields.-clear.-left > .acf-field {
	
	> .acf-label {
		padding-right: @field_padding_x * 2;
	}
	
}



/*--------------------------------------------------------------------------------------------
*
*	acf-postbox
*
*--------------------------------------------------------------------------------------------*/

.acf-postbox {
	position: relative;
	
	/* position high */
	#acf_after_title-sortables & {
		margin: 20px 0 0;
	}
	
	
	/* inside */
	> .inside {
		margin: 0 !important; /* override WP style - do not delete - you have tried this before */
		padding: 0 !important; /* override WP style - do not delete - you have tried this before */
	}
	
	
	/* hndle */
	> .hndle {
		
		/* edit field group */
		.acf-hndle-cog {
			color: #AAAAAA;
			font-size: 16px;
			line-height: 20px;
			padding: 0 2px;
			float: right;
			position: relative;
			display: none;
			
			&:hover {
				color: #777777;
			}
		}
		
		&:hover .acf-hndle-cog,
		&.hover .acf-hndle-cog {
			display: block;
		}
		

	}
	
	.acf-replace-with-fields {
		padding: 15px;
		text-align: center;
	}
}


/* seamless */
.acf-postbox.seamless {
	border: 0 none;
	background: transparent;
	box-shadow: none;
	
	
	/* hide hndle */
	> .hndle,
	> .handlediv {
		display: none;
	}
	
	
	/* inside */
	> .inside {
		display: block !important; /* stop metabox from hiding when closed */
		margin-left: -@field_padding_x !important;
		margin-right: -@field_padding_x !important;
	}
	
	> .acf-fields > .acf-field {
		border: 0 none !important;
	}
	
	/* tab */
	.acf-tab-wrap {
		padding-left: @field_padding_x;
		padding-right: @field_padding_x;
		
		.acf-tab-group {
			border-top: 0 none;
		}
	}
	
}


/* seamless (left) */
.acf-postbox.seamless > .acf-fields.-left {
	
	/* hide sidebar bg */
	> .acf-field:before { 
		display: none;
	}
	
	
	/* mobile */
	@media screen and (max-width: 782px) {
		
		/* remove padding */
		& > .acf-field > .acf-label,
		& > .acf-field > .acf-input {
			padding: 0;	
		}
	}
}


/* override WP CSS */
.metabox-prefs label.acf-hidden {
	display: none;
}


/*--------------------------------------------------------------------------------------------
*
*	Basic ACF field wrap
*
*--------------------------------------------------------------------------------------------*/

/* add term */
#addtag div.acf-field.error {
	border: 0 none;
	padding: 8px 0;	
}


/* width */
.acf-field[data-width] {
	float: left;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.acf-field[data-width] + .acf-field {
	clear: left;
}

.acf-field[data-width] + .acf-field[data-width] {
	clear: none;
	border-left: 1px solid #eeeeee;	
}

td.acf-field[data-width] {
	float: none;
}


/* field width helpers */
.acf-r0 {
	border-top-width: 0 !important;
}

.acf-c0 {
	clear: left !important;
	border-left-width: 0 !important;
}


/* rtl */
html[dir="rtl"] .acf-field[data-width] {
	float: right;
}

html[dir="rtl"] .acf-field[data-width] + .acf-field {
	clear: right;
}

html[dir="rtl"] .acf-field[data-width] + .acf-field[data-width] {
	clear: none;
	border-right: 1px solid #eeeeee;	
}

html[dir="rtl"] .acf-c0 {
	clear: right !important;
	border-left-width: 1px !important;
	border-right-width: 0 !important;
}


/*---------------------------------------------------------------------------------------------
*
*  Basic Field Styles
*
*---------------------------------------------------------------------------------------------*/

.acf-field input[type="text"], 
.acf-field input[type="password"], 
.acf-field input[type="number"], 
.acf-field input[type="search"], 
.acf-field input[type="email"], 
.acf-field input[type="url"], 
.acf-field textarea,
.acf-field select {
    width: 100%;
	padding: 3px 5px;
	resize: none;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    
    font-size: 14px;
    line-height: 1.4;
}

.acf-field textarea {
	resize: vertical;
}


/* disabled */
.acf-field {
	
	input:disabled,
	select:disabled,
	textarea:disabled {
		background: #f8f8f8;
	}
	
	input[readonly],
	textarea[readonly] {
		background: #f8f8f8;
	}
		
}


/*---------------------------------------------------------------------------------------------
*
*  Text
*
*---------------------------------------------------------------------------------------------*/
.acf-input-prepend,
.acf-input-append {
	font-size: 13px;
	line-height: 20px;
	height: 20px;
	
	padding: 3px 7px;
	
	background: #F4F4F4;
	border: #DFDFDF solid 1px;
}

.acf-input-prepend {
	float: left;
	border-right-width: 0;
	border-radius: 3px 0 0 3px;
}

.acf-input-append {
	float: right;
	border-left-width: 0;
	border-radius: 0 3px 3px 0;
}

.acf-input-wrap {
	position: relative;
	overflow: hidden;
}

.acf-input-wrap input {
	height: 28px;
	margin: 0;
}

input.acf-is-prepended {
	border-radius: 0 3px 3px 0 !important;
}

input.acf-is-appended {
	border-radius: 3px 0 0 3px !important;
}

input.acf-is-prepended.acf-is-appended {
	border-radius: 0 !important;
}


/* rtl */
html[dir="rtl"] .acf-input-prepend {
	border-left-width: 0;
	border-right-width: 1px;
	border-radius: 0 3px 3px 0;
	
	float: right;
}

html[dir="rtl"] .acf-input-append {
	border-left-width: 1px;
	border-right-width: 0;
	border-radius: 3px 0 0 3px;
	float: left;
}

html[dir="rtl"] input.acf-is-prepended {
	border-radius: 3px 0 0 3px !important;
}

html[dir="rtl"] input.acf-is-appended {
	border-radius: 0 3px 3px 0 !important;
}

html[dir="rtl"] input.acf-is-prepended.acf-is-appended {
	border-radius: 0 !important;
}


/*---------------------------------------------------------------------------------------------
*
*  Color Picker
*
*---------------------------------------------------------------------------------------------*/

.acf-color-picker {
	
	.wp-picker-active {
		position: relative;
		z-index: 1;
	}
	
}


/*---------------------------------------------------------------------------------------------
*
*  Url
*
*---------------------------------------------------------------------------------------------*/

.acf-url {
	
	i {
		position: absolute;
		top: 4px;
		left: 4px;
		opacity: 0.5;
		color: #A9A9A9;
	}
	
	input[type="url"] {
		padding-left: 25px;
	}
	
	&.-valid i {
		opacity: 1;
	}

}


/*---------------------------------------------------------------------------------------------
*
*  Select
*
*---------------------------------------------------------------------------------------------*/

.acf-field select {
	padding: 2px;
}

.acf-field select optgroup {
	padding: 5px;
	background: #fff;
}

.acf-field select option {
	padding: 3px;
}

.acf-field select optgroup option {
	padding-left: 5px;
}

.acf-field select optgroup:nth-child(2n) {
    background: #F9F9F9;
}

.acf-field .select2-input {
	max-width: 200px;
}


/*---------------------------------------------------------------------------------------------
*
*  Select2 (v3)
*
*---------------------------------------------------------------------------------------------*/

.select2-container.-acf {
	
	.select2-choices {
		background: #fff;
	    border-color: #ddd;
	    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
	    min-height: 31px;
	    
	    .select2-search-choice {
			margin: 5px 0 5px 5px;
			padding: 3px 5px 3px 18px;
			border-color: #bbb;
			background: #f9f9f9;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
			
			/* sortable item*/
			 &.ui-sortable-helper {
				 background: #5897fb;
				 border-color: darken(#5897fb, 5%);
				 color: #fff;
				 box-shadow: 0 0 3px rgba(0,0,0,0.1);
				 
				 a {
					 visibility: hidden;
				 }
			 }
			 
			 
			 /* sortable shadow */
			 &.ui-sortable-placeholder {
				 background-color: #f7f7f7;
				 border-color: #f7f7f7;
				 visibility: visible !important;
			 }
		}
		
		.select2-search-choice-focus {
			border-color: #999;
		}
		
		.select2-search-field input {
			height: 31px;
			line-height: 22px;
			margin: 0;
			padding: 5px 5px 5px 7px;
		}
	}
	
	.select2-choice {
	    border-color: #BBBBBB;
	    
	    .select2-arrow {
			background: transparent;
			border-left-color: #DFDFDF;
			padding-left: 1px;
		}
		
		.select2-result-description { 
			display: none;	
		}
	}
	
	
	
	/* open */
	&.select2-container-active .select2-choices,
	&.select2-dropdown-open .select2-choices {
		border-color: #5B9DD9;
		border-radius: 3px 3px 0 0;
	}
	
	
	/* single open */
	&.select2-dropdown-open .select2-choice {
		background: #fff;
		border-color: #5B9DD9;
	}
	
}

/* rtl */
html[dir="rtl"] .select2-container.-acf {
	
	.select2-search-choice-close {
	    left: 24px;
	}
	
	.select2-choice > .select2-chosen {
	    margin-left: 42px;
	}
	
	.select2-choice .select2-arrow {
	    padding-left: 0;
	    padding-right: 1px; 
	}
}


/* description */
.select2-drop {
	
	/* search*/
	.select2-search {
		padding: 4px 4px 0;
	}
	
	
	/* result */
	.select2-result {
	
		.select2-result-description {
			color: #999;
			font-size: 12px;
			margin-left: 5px;
		}
		
		
		/* hover*/
		&.select2-highlighted {
			
			.select2-result-description {
				color: #fff;
				opacity: 0.75;
			}
			
		}
	
	}
	
}



/*---------------------------------------------------------------------------------------------
*
*  Select2 (v4)
*
*---------------------------------------------------------------------------------------------*/

.select2-container.-acf {
	
	li{
		margin-bottom: 0;
	}
	
}

.select2-container--default.-acf {
	
	 .select2-selection--multiple {
		 
		.select2-search--inline:first-child {
			float: none;
			input { width: 100% !important; }
		}
		 
		 /* multiple choice item */
		 .select2-selection__choice {
			 background-color: #f7f7f7;
			 border-color: #cccccc;
			 
			 
			 /* sortable item*/
			 &.ui-sortable-helper {
				 background: #5897fb;
				 border-color: darken(#5897fb, 5%);
				 color: #fff;
				 box-shadow: 0 0 3px rgba(0,0,0,0.1);
				 
				 span {
					 visibility: hidden;
				 }
			 }
			 
			 
			 /* sortable shadow */
			 &.ui-sortable-placeholder {
				 background-color: #f7f7f7;
				 border-color: #f7f7f7;
				 visibility: visible !important;
			 }
		 }
		 
	 }
	 
}

.select2-container {
	
	.select2-dropdown {
		z-index: 900000;
	}
	
}




/*---------------------------------------------------------------------------------------------
*
*  Link
*
*---------------------------------------------------------------------------------------------*/

.link-wrap {
	border: #dddddd solid 1px;
	border-radius: 3px;
	padding: 5px;
	line-height: 26px;
	background: #fff;
	
	word-wrap: break-word;
	word-break: break-all;
	
	.link-title {
		padding: 0 5px;
	}
	
}

.acf-link {
	
	.link-wrap,
	.acf-icon.-link-ext { display: none; }
	
	/* value */
	&.-value {
		
		.button { display: none; }
		.link-wrap { display: inline-block; }
		
	}
	
	
	/* external */
	&.-external {
		
		.acf-icon.-link-ext { display: inline-block; }
		
	}
	
}

#wp-link-backdrop { z-index: 900000 !important; }
#wp-link-wrap { z-index: 900001 !important; }



/*---------------------------------------------------------------------------------------------
*
*  Radio
*
*---------------------------------------------------------------------------------------------*/

ul.acf-radio-list,
ul.acf-checkbox-list {
	background: transparent;
	position: relative;
	padding: 1px;
	margin: 0;
	
	li {
		font-size: 13px;
		line-height: 22px;
		margin: 0;
		position: relative;
		word-wrap: break-word;
		
		label {
			display: inline;
		}

		input[type="checkbox"],
		input[type="radio"] {
			margin: -1px 4px 0 0;
			vertical-align: middle;
		}
		
		input[type="text"] {
			width: auto;
			vertical-align: middle;
			margin: 2px 0;
		}
		
		
		/* attachment sidebar fix*/
		span {
			float: none;
		}
		
		i {
			vertical-align: middle;
		}
	}
	
	
	/* hl */
	&.acf-hl {
		
		li {
			margin-right: 20px;
			clear: none;
		}
	}
	
	
	/* rtl */
	html[dir="rtl"] & {
		
		input[type="checkbox"],
		input[type="radio"] {
			margin-left: 4px;
			margin-right: 0;
		}
	}
	
	
	
	
}


/*---------------------------------------------------------------------------------------------
*
*  Button Group
*
*---------------------------------------------------------------------------------------------*/

.acf-button-group {
	display: inline-block;
	
	label {
		display: inline-block;
		border: #ccc solid 1px;
		position: relative;
		z-index: 1;
		padding: 5px 10px;
		background: #fff;
		
		&:hover {
			border-color: darken(#ccc, 20%);
			z-index: 2;
		}
		
		&.selected {
			border-color: darken(#309cf3, 1%);
			background: #309cf3;
			color: #fff;
			z-index: 2;
			
			&:hover {
				background: lighten(#309cf3, 5%);
			}
		}
	}
	
	input {
		display: none;
	}
	
	
	/* default (horizontal) */
	& {
		padding-left: 1px;
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		
		label {
			margin: 0 0 0 -1px;
			flex: 1;
			text-align: center;
			white-space: nowrap;
		
			// corners
			&:first-child { border-radius: 3px 0 0 3px; }
			&:last-child { border-radius: 0 3px 3px 0; }
			&:only-child { border-radius: 3px; }
			
		}
	}
	
	
	/* vertical */
	&.-vertical {
		padding-left: 0;
		padding-top: 1px;
		flex-direction: column;
		
		label {
			margin: -1px 0 0 0;
			
			// corners
			&:first-child { border-radius: 3px 3px 0 0; }
			&:last-child { border-radius: 0 0 3px 3px; }
			&:only-child { border-radius: 3px; }
			
		}
	}
	
	
}



/*---------------------------------------------------------------------------------------------
*
*  Checkbox
*
*---------------------------------------------------------------------------------------------*/

.acf-checkbox-list {
	
	.button {
		margin: 10px 0 0;
	}
	
}



/*---------------------------------------------------------------------------------------------
*
*  True / False
*
*---------------------------------------------------------------------------------------------*/

.acf-switch {
	display: inline-block;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	background: #f8f8f8;
	height: 30px;
	vertical-align: middle;
	//box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
	border: #ccc solid 1px;
	
	-webkit-transition: background 0.25s ease;
	-moz-transition: background 0.25s ease;
	-o-transition: background 0.25s ease;
	transition: background 0.25s ease;
	
	span {
		display: inline-block;
		float: left;
		text-align: center;
		
		font-size: 13px;
		line-height: 22px;
		
		padding: 4px 10px;
		min-width: 15px;
		
		i {
			vertical-align: middle;
		}
	}
	
	.acf-switch-on {
		color: #fff;
		text-shadow: darken(@acf_blue, 10%) 0 1px 0;
	}
	
	.acf-switch-off {
		
	}
	
	.acf-switch-slider {
		position: absolute;
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 50%;
		z-index: 1;
		background: #fff;
		border-radius: 3px;
		border: #ccc solid 1px;
		
		-webkit-transition: all 0.25s ease;
		-moz-transition: all 0.25s ease;
		-o-transition: all 0.25s ease;
		transition: all 0.25s ease;
		
		transition-property: left, right;
	}
	
	
	/* hover */
	&:hover {
		.acf-switch-slider{
			border-color: darken(#ccc, 10%);
		}
	}
	
	
	/* active */
	&.-on {
		background: #309cf3;
		border-color: darken(#309cf3, 1%);
		
		.acf-switch-slider {
			left: 50%;
			right: 2px;
			border-color: darken(#309cf3, 10%);
		}
		
		/* hover */
		&:hover {
			background: lighten(#309cf3, 5%);
		}
	}
	
	
	/* focus */
	&.-focus {
		
		.acf-switch-slider {
			border-color: #5b9dd9;
			box-shadow: 0 0 2px rgba(30, 140, 190, 0.5);
		}
		
		
		&.-on {
			
			.acf-switch-slider {
				border-color: darken(@acf_blue, 20%);
				box-shadow: 0 0 2px darken(@acf_blue, 10%);
			}
		}
		
	}
	
	
	/* message */
	+ span {
		margin-left: 6px;
	}
	
}


/* checkbox */
.acf-switch-input {
	opacity: 0;
	position: absolute;
	margin: 0;
}


/* in media modal */
.compat-item .acf-true-false {
	
	.message {
		float: none;
		padding: 0;
		vertical-align: middle;
	}
	
}


/*--------------------------------------------------------------------------
*
*	Google Map
*	
*-------------------------------------------------------------------------*/

.acf-google-map {
	position: relative;
	border: #DFDFDF solid 1px;
	background: #fff;
	
	.title {
		position: relative;
		border-bottom: #DFDFDF solid 1px;
		
		.search {
			margin: 0;
			font-size: 14px;
			line-height: 30px;
			height: 40px;
			padding: 5px 10px;
			border: 0 none;
			box-shadow: none;
			border-radius: 0;
			font-family: inherit;
			cursor: text;
		}
		
		.acf-actions {
			
		}
		
		.acf-loading {
			position: absolute;
			top: 10px;
			right: 11px;
			display: none;
		}
		
		&:hover {
			.acf-actions { display: block; }
		}
	}
	
	.canvas {
		height: 400px;
	}
	
	
	/* default is focused */
	.title {
		.acf-icon.-location {
			display: inline-block;
		}
		.acf-icon.-cancel {
			display: none;
		}
		.acf-icon.-search {
			display: none;
		}
	}
	
	
	/* -search */
	&.-search .title { 
		.acf-icon.-location {
			display: none;
		}
		.acf-icon.-cancel {
			display: inline-block;
		}
		.acf-icon.-search {
			display: inline-block;
		}
	}
	
	
	
	/* -value */
	&.-value .title { 
		.search {
			font-weight: bold;
		}
		.acf-icon.-location {
			display: none;
		}
		.acf-icon.-cancel {
			display: inline-block;
		}
		.acf-icon.-search {
			display: none;
		}
	}
	
	
	/* -loading */
	&.-loading .title {
		a {
			display: none !important;
		}
		i {
			display: inline-block;
		}
	}
	
}



/* autocomplete */
.pac-container {
	border-width: 1px 0;
	box-shadow: none;
}

.pac-container:after {
	display: none;
}

.pac-container .pac-item:first-child {
	border-top: 0 none;
}
.pac-container .pac-item {
	padding: 5px 10px;
	cursor: pointer;
}


html[dir="rtl"] .pac-container .pac-item {
	text-align: right;
}
	
	
/*--------------------------------------------------------------------------
*
*	Relationship
*	
*-------------------------------------------------------------------------*/

.acf-relationship {
	background: #fff;
	
	/* filters (top) */
	.filters {
		.clearfix;
		border: #DFDFDF solid 1px;
		background: #fff;
		
		
		.filter {
			margin: 0;
			padding: 0;
			float: left;
			width: 100%;
			
			
			/* inner padding */
			span {
				display: block;
				padding: 7px 7px 7px 0;
			}
			
			&:first-child span {
				padding-left: 7px;
			}
			
			
			// inputs
			input, select {
				height: 28px;
			    line-height: 28px;
				padding: 2px;
				width: 100%;
				margin: 0;
				float: none; /* potential fix for media popup? */
				
				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
				}
			}
			
			input {
				border-color: transparent;
				box-shadow: none;
			}
			
		}
		
		
		/* widths */
		&.-f2 {
			.filter { width: 50%; }
		}
		&.-f3 {
			.filter { width: 25%; }
			.filter.-search { width: 50%; }
		}
		
	}
	
	
	/* list */
	.list {
		margin: 0;
		padding: 5px;
		height: 160px;
		overflow: auto;
		
		.acf-rel-label,
		.acf-rel-item,
		p {
			padding: 5px 7px;
			margin: 0;
			display: block;
			position: relative;
			min-height: 18px;
		}
		
		.acf-rel-label {
			font-weight: bold;
		}
		
		.acf-rel-item {
			cursor: pointer;
			
			b {
				text-decoration: underline;
				font-weight: normal;
			}
			
			.thumbnail {
				background: darken(#f9f9f9, 10%);
				width: 22px;
				height: 22px;
				float: left;
				margin: -2px 5px 0 0;
				
				img {
					max-width: 22px;
					max-height: 22px;
					margin: 0 auto;
					display: block;
				}
				
				&.-icon {
					background: #fff;
					
					img {
						max-height: 20px;
						margin-top: 1px;
					}
				}
			}
			
			/* hover */
			&:hover {
				background: #3875D7;
				color: #fff;
				
				.thumbnail {
					background: lighten(#3875D7, 25%);
					
					&.-icon {
						background: #fff;
					}
				}
			}
			
			
			/* disabled */
			&.disabled {
				opacity: 0.5;
				
				&:hover {
					background: transparent;
					color: #333;
					cursor: default;
					
					.thumbnail {
						background: darken(#f9f9f9, 10%);
						
						&.-icon {
							background: #fff;
						}
					}
				}
			}
		}

		ul {
			padding-bottom: 5px;
			
			.acf-rel-label,
			.acf-rel-item,
			p {
				padding-left: 20px;
			}
			
		}
		
	}
	
	
	/* selection (bottom) */
	.selection {
		.clearfix;
		border: #DFDFDF solid 1px;
		position: relative;
		margin-top: -1px;
		
		.values,
		.choices {
			width: 50%;
			background: #fff;
			float: left
		}
		
		/* choices */
		.choices {
			background: #F9F9F9;
			
			.list {
				border-right: #DFDFDF solid 1px;
			}

		}
		
		
		/* values */
		.values {
			
			.acf-icon {
				position: absolute;
				top: 4px;
				right: 7px;
				display: none;
				
				/* rtl */
				html[dir="rtl"] & {
					right: auto;
					left: 7px;
				}
				
			}
			
			.acf-rel-item:hover .acf-icon {
				display: block;
			}

			.acf-rel-item {
				cursor: move;
				
				b {
					text-decoration: none;
				}

			}

		}
		
	}


}

/* menu item fix */
.menu-item {
	
	.acf-relationship {
		
		ul {
			width: auto;
		}
		
		li {
			display: block;
		}
	}
}


/*--------------------------------------------------------------------------
*
*	WYSIWYG
*	
*-------------------------------------------------------------------------*/

.acf-editor-wrap {
	
	/* delay */
	&.delay {
		
		.acf-editor-toolbar {
			content: "";
			display: block;
			background: #f5f5f5;
			border-bottom: #dddddd solid 1px;
			color: #555d66;
			padding: 10px;
		}
		
		textarea {
		    padding: 10px;
		}
		
	}
}

.acf-editor-wrap iframe{ 
	min-height: 200px;
}

.acf-editor-wrap .wp-editor-container{ 
	border: 1px solid #E5E5E5;
	box-shadow: none;
}

#mce_fullscreen_container {
	z-index: 900000 !important;
}


/* WP < 4.1 */
.acf-editor-wrap .wp-switch-editor {
	float: left;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.acf-editor-wrap.tmce-active .wp-editor-area {
	color: #333 !important;
}


/*---------------------------------------------------------------------------------------------
*
*	Tab
*
*---------------------------------------------------------------------------------------------*/

.acf-field-tab {
	display: none !important;
}

.hidden-by-tab {
	display: none !important;
}

.acf-tab-wrap {
	clear: both;
}

.acf-tab-group {
	border-bottom: #ccc solid 1px;
	padding: 10px 10px 0;
	
	li {
	    margin: 0 0 0 0.5em;
	    
	    a {
			padding: 5px 10px;
			display: block;
			
			color: #555;
			font-size: 14px;
		    font-weight: 600;
		    line-height: 24px;
		    
		    border: #ccc solid 1px;
		    border-bottom: 0 none;
		    text-decoration: none;
		    background: #e5e5e5;
		    transition: none;
		    
		    &:hover {
				background: #FFF;
			}
			
			&:focus {
				outline: none;
				box-shadow: none;
			}
			
		}
		
		
		/* rtl */
		html[dir="rtl"] & {
			margin: 0 0.5em 0 0;
		}
		
		
		/* first */
		&:first-child {
			margin: 0 !important;
		}
		
		
		/* active */
		&.active a {
			background: #F1F1F1;
			color: #000;
		    padding-bottom: 6px;
		    margin-bottom: -1px;
		    position: relative;
		    z-index: 1;
		}
	}
}


/* inside acf-fields */
.acf-fields > .acf-tab-wrap {
	background: #F9F9F9;
	
	.acf-tab-group {
		position: relative;
		z-index: 1;
		margin-bottom: -1px;
		
		border-top: #DFDFDF solid 1px;
		border-bottom: #DFDFDF solid 1px;
		
		li a {
			background: #f1f1f1;
			
			&:hover {
				background: #FFF;
			}
		}
			
		li.active a {
			background: #FFFFFF;
		}
	}
	
	&:first-child .acf-tab-group {
		border-top: none;
	}
}


/* inside acf-fields.-left */
.acf-fields.-left > .acf-tab-wrap .acf-tab-group {
	padding-left: 20%;
	
	li:first-child {
		margin: 0;
	}
	
	
	/* mobile */
	@media screen and (max-width: 850px) {
		padding-left: 10px;
	}
	
	
	/* rtl */
	html[dir="rtl"] & {
		padding-left: 0;
		padding-right: 20%;
		
		/* mobile */
		@media screen and (max-width: 850px) {
			padding-right: 10px;
		}
	}
}


/* space between field and tabs */
.acf-field + .acf-tab-wrap.-left:before {
	content: "";
    display: block;
    position: absolute;
    z-index: 1;
    background: #DFDFDF;
    left: 0;
    width: 100%;
    height: 1px;
}


/* sidebar */
.acf-fields.-sidebar {
	padding: 0 0 0 20% !important;
	position: relative;
	
	
	/* before */
	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 20%;
		bottom: 0;
		border-right: #DFDFDF solid 1px;
		background: #F9F9F9;
		z-index: 1;
	}
	
	
	/* rtl */
	html[dir="rtl"] & {
		padding: 0 20% 0 0 !important;
		
		&:before {
			border-left: #DFDFDF solid 1px;
			border-right-width: 0;
			left: auto;
			right: 0;
		}
	}
	
	
	/* tab wrap left */
	> .acf-tab-wrap.-left .acf-tab-group {
		position: absolute;
		left: 0;
		width: 20%;
		border: 0 none;
		padding: 0 !important; /* important overrides 'left aligned labels' */
		margin: 0;
		
		/* rtl */
		html[dir="rtl"] & {
			left: auto;
			right: 0;
		}
		
		li {
			float: none;
			margin: -1px 0 0;
			
			a {
				border: 1px solid #ededed;
				font-size: 13px;
				line-height: 18px;
				color: #0073aa;
				padding: 10px;
				font-weight: normal;
				border-width: 1px 0;
				border-radius: 0;
				background: transparent;
				
				&:hover {
					color: #00a0d2;
				}
			}
			
			&.active a {
				border-color:#DFDFDF;
				color: #000;
				margin-right: -1px;
				background: #fff;
				
				html[dir="rtl"] & { margin-right: 0; margin-left: -1px; }
			}
		}
	}
	
	
	/* .acf-fields.-left */
	&.-left {
		padding: 0 0 0 180px !important;
		
		/* rtl */
		html[dir="rtl"] & {
			padding: 0 180px 0 0 !important;
		}
		
		&:before {
			background: #F1F1F1;
			border-color: #dfdfdf;
			width: 180px;
		}
		
		.acf-tab-wrap.-left .acf-tab-group {
			width: 180px;
			
			li a {
				border-color: #e4e4e4;
			}
			
			li.active a {
				background: #F9F9F9;
			}
			
		}
	}
	
	
	/* first tab group */
	.acf-tab-wrap.-left:first-child .acf-tab-group li:first-child a {
		border-top-width: 0;
	}
		
}


/* seamless */
.acf-postbox.seamless {
	
	/* standard */
	> .acf-fields > .acf-tab-wrap {
		background: #f1f1f1;
		margin-bottom: 10px;
		
		.acf-tab-group {
			
			li a {
				background: #e5e5e5;
				
				&:hover {
					background: #fff;
				}
			}
			
			li.active a {
				background: #f1f1f1;
			}
			
		}
		
	}
	
	
	/* left label */
	> .acf-fields.-left {
		
		/* left label, top tab */
		> .acf-tab-wrap {
			
		}
		
		/* left label, left tab */
		.acf-tab-wrap.-left .acf-tab-group {
			margin-bottom: 0;
			
			li a {
				border-width: 1px 0 1px 1px !important;
				border-color: #cccccc;
				background: #e5e5e5;
			}
			
			li.active a {
				background: #f1f1f1;
			}
		}
		
		
	}
	
}



.compat-item .acf-tab-wrap td {
	display: block;
}





/* within gallery sidebar */
.acf-gallery-side .acf-tab-wrap {
	border-top: 0 none !important;
}

.acf-gallery-side .acf-tab-wrap .acf-tab-group {
	margin: 10px 0 !important;
	padding: 0 !important;
}

.acf-gallery-side .acf-tab-group li.active a {
	background: #F9F9F9 !important;
}



/* withing widget */
.widget .acf-tab-group {
	border-bottom-color: #e8e8e8;
}

.widget .acf-tab-group li a {
	background: #F1F1F1;
}

.widget .acf-tab-group li.active a {
	background: #fff;
}


/* media popup (edit image) */
.media-modal.acf-expanded .compat-attachment-fields > tbody > tr.acf-tab-wrap .acf-tab-group {
	padding-left: 23%;
	border-bottom-color: #DDDDDD;
}


/* table */
.form-table > tbody > tr.acf-tab-wrap td {
	padding: 0;
}

.form-table > tbody > tr.acf-tab-wrap .acf-tab-group {
	padding: 0 5px 0 210px;
}

/* rtl */
	html[dir="rtl"] .form-table > tbody > tr.acf-tab-wrap .acf-tab-group {
		padding: 0 210px 0 5px;
	}


/*--------------------------------------------------------------------------------------------
*
*	oembed
*
*--------------------------------------------------------------------------------------------*/

.acf-oembed {
	position: relative;
	border: #DFDFDF solid 1px;
	background: #fff;
	
	.title {
		position: relative;
		border-bottom: #DFDFDF solid 1px;
		padding: 5px 10px;
		
		h4, input[type="text"] {
			margin: 0;
			font-size: 14px;
			line-height: 30px;
			height: 30px;
			padding: 0;
			border: 0 none;
			box-shadow: none;
			border-radius: 0;
			font-family: inherit;
			cursor: text;
		}
		
		.search {
			height: auto;
			border: 0 none;
		}
		
		.acf-actions {
			padding: 6px;
		}
		
		&:hover .acf-actions {
			display: block;
		}
	}
	
	
	.canvas {
		position: relative;
		min-height: 250px;
		background: #F9F9F9;
		
		.canvas-media {
			position: relative;
			z-index: 1;
		}
		
		iframe {
			display: block;
			margin: 0;
			padding: 0;
			width: 100%;
		}
		
		.acf-icon.-picture {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -21px 0 0 -21px;
			z-index: 0;
			
			height: 42px;
			width: 42px;
			font-size: 42px;
			color: #999;
		}
		
		.canvas-loading {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
			
			background: rgba(255,255,255,0.9);
			display: none;
			z-index: 2;
			
			i {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -10px 0 0 -10px;
			}
		}
		
		.canvas-error {
			position: absolute;
			top: 50%;
			left: 0%;
			right: 0%;
			margin: -9px 0 0 0;
			text-align: center;
			display: none;
			
			p {
				padding: 8px;
				margin: 0;
				display: inline;
			}
		}
	}
	
	&.has-value .canvas {
		min-height: 0;
	}

}


/* states */
.acf-oembed .title-value { display: none; }
.acf-oembed .title-search { display: block; }

.acf-oembed.has-value .title-value { display: block; }
.acf-oembed.has-value .title-search { display: none; }
.acf-oembed.has-value .canvas .acf-icon { display: none; }

.acf-oembed.is-editing .title-value { display: none; }
.acf-oembed.is-editing .title-search { display: block; }

.acf-oembed.is-loading .canvas-loading { display: block; }
.acf-oembed.is-loading .title .acf-icon { display: none; }

.acf-oembed.has-error .canvas-error { display: block; }
.acf-oembed.has-error .canvas .acf-icon { display: none; }


/*--------------------------------------------------------------------------------------------
*
*	Image
*
*--------------------------------------------------------------------------------------------*/

.acf-image-uploader {
	.clearfix;
	position: relative;
	
	
	p {
		margin: 0;
	}
	
	
	/* image wrap*/
	.image-wrap {
		position: relative;
		float: left;
		
		img {
			max-width: 100%;
			width: auto;
			height: auto;
			display: block;
			min-width: 30px;
			min-height: 30px;
			background: #f1f1f1;
			margin: 0;
			padding: 0;
			
			
			/* svg */
			&[src$=".svg"] {
				min-height: 100px;
				min-width: 100px;
			}
		}
		
		
		/* hover */
		&:hover .acf-actions {
			display: block;
		}
	}
	
	
	/* input */
	input.button {
		width: auto;
	}
	
	
	/* rtl */
	html[dir="rtl"] & {
		
		.image-wrap {
			float: right;
		}
		
	}
	
}


/*--------------------------------------------------------------------------------------------
*
*	File
*
*--------------------------------------------------------------------------------------------*/

.acf-file-uploader {
	position: relative;
	
	p {
		margin: 0;
	}
	
	.file-wrap {
		border: #DFDFDF solid 1px;
		min-height: 84px;
		position: relative;
		background: #fff;
	}
	
	.file-icon {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		padding: 10px;
		background: #F1F1F1;
		border-right: #E5E5E5 solid 1px;
		
		img {
			display: block;
			padding: 0;
			margin: 0;
			max-width: 48px;
		}
	}
	
	.file-info {
		padding: 10px;
		margin-left: 69px;
		
		p {
			margin: 0 0 2px;
			font-size: 13px;
			line-height: 1.4em;
			word-break: break-all;
		}
		
		a {
			text-decoration: none;
		}
	}
	
	/* hover */
	&:hover .acf-actions {
		display: block;
	}
	
	
	/* rtl */
	html[dir="rtl"] & { 
		
		.file-icon {
			left: auto;
			right: 0;
			border-left: #E5E5E5 solid 1px;
			border-right: none;
		}
		
		.file-info {
			margin-right: 69px;
			margin-left: 0;
		}
	}
	
}


/*---------------------------------------------------------------------------------------------
*
*	Date Picker
*
*---------------------------------------------------------------------------------------------*/

.acf-ui-datepicker .ui-datepicker {
	z-index: 900000 !important;
	
	.ui-widget-header a {
		cursor: pointer;
		transition: none;
	}
}


/* fix highlight state overriding hover / active */
.acf-ui-datepicker .ui-state-highlight.ui-state-hover {
	border: 1px solid #98b7e8 !important;
	background: #98b7e8 !important;
	font-weight: normal !important;
	color: #ffffff !important;
}

.acf-ui-datepicker .ui-state-highlight.ui-state-active {
	border: 1px solid #3875d7 !important;
	background: #3875d7 !important; 
	font-weight: normal !important;
	color: #ffffff !important;
}


/*---------------------------------------------------------------------------------------------
*
*	Separator field
*
*---------------------------------------------------------------------------------------------*/

.acf-field-separator {
	
	.acf-label {
		margin-bottom: 0;
		
		label {
			font-weight: normal;
		}
	}
	
	.acf-input {
		display: none;
	}
	
	
	/* fields */
	.acf-fields > & {
		background: #f9f9f9;
		border-bottom: 1px solid #dfdfdf;
		border-top: 1px solid #dfdfdf;
		margin-bottom: -1px;
		z-index: 2;
	}
	
	 /* sidebar */
	.acf-fields.-sidebar > & {
		
	}
	
}


/*---------------------------------------------------------------------------------------------
*
*	Taxonomy
*
*---------------------------------------------------------------------------------------------*/

.acf-taxonomy-field {
	position: relative;
	
	ul {
		
		li {
			
		}
	}
	
	.categorychecklist-holder {
		border: #DFDFDF solid 1px;
		border-radius: 3px;
		max-height: 200px;
		overflow: auto;
	}
	
	.acf-checkbox-list {
		margin: 0;
		padding: 10px;
		
		ul.children {
			padding-left: 18px;
		}
	}
	
	
	/* hover */
	&:hover {
		
		.acf-actions {
			display: block;
		}
		
	}
	
	
	/* select */
	&[data-type="select"] {
		
		.acf-actions {
			padding: 0;
			margin: -9px;
		}
		
	}
	
}


/*---------------------------------------------------------------------------------------------
*
*	Range
*
*---------------------------------------------------------------------------------------------*/

.acf-range-wrap {
	
	.acf-append,
	.acf-prepend {
		display: inline-block;
		vertical-align: middle;
		line-height: 28px;
		margin: 0 7px 0 0;
	}
	
	.acf-append {
		margin: 0 0 0 7px;
	}
	
	input[type="range"] {
		display: inline-block;
		padding: 0;
		margin: 0;
		vertical-align: middle;
		height: 28px;
		
		&:focus {
			outline: none;
		}
		
	}
	
	input[type="number"] {
		display: inline-block;
		min-width: 3em;
		margin-left: 10px;
		vertical-align: middle;
	}
	
	
	/* rtl */
	html[dir="rtl"] & {
		
		input[type="number"] {
			margin-right: 10px;
			margin-left: 0;
		}
		
		.acf-append { margin: 0 7px 0 0; }
		.acf-prepend { margin: 0 0 0 7px; }
		
	}
		
}



/*---------------------------------------------------------------------------------------------
*
*  Media Model
*
*---------------------------------------------------------------------------------------------*/

/* WP sets tables to act as divs. ACF uses tables, so these muct be reset */
.media-modal .compat-attachment-fields td.acf-input {
	
	table {
		display: table;
		
		tbody {
			display: table-row-group;
		}
		
		tr {
			display: table-row;
		}
		
		td, th {
			display: table-cell;
		}
		
	}
	
}


/* field widths floats */
.media-modal .compat-attachment-fields > tbody > .acf-field {
	margin: 0;
	
	> .acf-label {
		min-width: 30%;
		margin: 0;
		padding: 0;
		float: left;
	    text-align: right;
	    display: block;
	    float: left;
	    
	    > label {
		    padding-top: 6px;
			margin: 0;
			color: #666666;
		    font-weight: 400;
		    line-height: 16px;
	    }
	}
	
	> .acf-input {
		width: 65%;
		margin: 0;
		padding: 0;
	    float: right;
	    display: block;
	}
	
	p.description {
		margin: 0;
	}
}


/* restricted selection (copy of WP .upload-errors)*/
.acf-selection-error {
	background: #ffebe8;
    border: 1px solid #c00;
    border-radius: 3px;
    padding: 8px;
    margin: 20px 0 0;
    
    .selection-error-label {
		background: #CC0000;
	    border-radius: 3px;
	    color: #fff;
	    font-weight: bold;
	    margin-right: 8px;
	    padding: 2px 4px;
	}
	
	.selection-error-message {
		color: #b44;
	    display: block;
	    padding-top: 8px;
	    word-wrap: break-word;
	    white-space: pre-wrap;
	}
}


/* disabled attachment */
.media-modal .attachment.acf-disabled {
	
	.thumbnail {
		opacity: 0.25 !important;
	}
		
	.attachment-preview:before {
		background: rgba(0,0,0,0.15);
		z-index: 1;
		position: relative;
	}

}


/* misc */
.media-modal {
	
	/* compat-item */
	.compat-field-acf-form-data,
	.compat-field-acf-blank {
		display: none !important;
	}
	
	
	/* fix % margin which causes .acf-uploadedTo to drop down below select */
	select.attachment-filters {
		margin-right: 6px !important;
		vertical-align: middle;
	}
	
	.acf-uploadedTo {
		line-height: 28px;
		height: 28px;
		display: inline-block;
		position: relative;
		margin: 11px 6px 0 0;
		vertical-align: middle;
	}
	
	
	/* allow line breaks in upload error */
	.upload-error-message {
		white-space: pre-wrap;
	}
	
	
	/* fix required span */
	.acf-required {
		padding: 0 !important;
		margin: 0 !important;
		float: none !important;
		color: #f00 !important;
	}
	
	
	/* sidebar */
	.media-sidebar {
		
		.compat-item{
			padding-bottom: 20px;
		}
		
	}
	
	
	/* mobile md */
	@media (max-width: 900px) {
		
		/* label */
		.setting span, 
		.compat-attachment-fields > tbody > .acf-field > .acf-label {
			width: 98%;
			float: none;
			text-align: left;
			min-height: 0;
			padding: 0;
		}
		
		
		/* field */
		.setting input, 
		.setting textarea, 
		.compat-attachment-fields > tbody > .acf-field > .acf-input {
			float: none;
		    height: auto;
		    max-width: none;
		    width: 98%;
		}

	}

	
}



/*---------------------------------------------------------------------------------------------
*
*  Media Model (expand details)
*
*---------------------------------------------------------------------------------------------*/

.media-modal .acf-expand-details {
	float: right;
	padding: 1px 10px;
	margin-right: 6px;
	height: 18px;
	line-height: 18px;
	color: #AAAAAA;
	font-size: 12px;
	
	&:focus, &:active {
		outline: 0 none;
		box-shadow: none;
		color: #AAAAAA;
	}
	
	&:hover {
		color: #666666 !important;
	}
	
	span {
		display: block;
		float: left;
	}
	
	.acf-icon {
		margin: 0 4px 0 0;
	}
	
	&:hover .acf-icon {
		border-color: #AAAAAA;
	}
	
	.is-open { display: none; }
	.is-closed { display: block; }
	
}


/* expanded */
.media-modal.acf-expanded {
	
	/* toggle */
	.acf-expand-details {
		
		.is-open { display: block; }
		.is-closed { display: none; }
		
	}
	
	
	/* resize */
	.attachments-browser .media-toolbar, 
	.attachments-browser .attachments { right: 740px; }
	.media-sidebar { width: 708px; }
	
	
	/* label & fields */
	.media-sidebar {
		
		/* label */
		.attachment-info .thumbnail,
		.setting span, 
		.compat-attachment-fields > tbody > .acf-field > .acf-label {
			min-width: 20%;
		}
		
		
		/* field */
		.attachment-info .details,
		.setting input, 
		.setting textarea, 
		.compat-attachment-fields > tbody > .acf-field > .acf-input {
			min-width: 77%;
		}
		
		.setting span {
			margin-right: 2%;
		}
		
		
		/* larger thumbnail */
		.attachment-info {
			
			.thumbnail {
				max-height: none;
				
				img {
					max-width: 100%;
					max-height: 200px;
				}
				
			}
			
			.details {
				float: right;
				
			}
			
		}
		
	}
	
	
	/* mobile md */
	@media (max-width: 900px) {
		
		/* resize */
		.attachments-browser .media-toolbar { display: none; }
		.attachments { display: none; }
		.media-sidebar { width: auto; max-width: none !important; }
		
		
		.media-sidebar {
			
			.attachment-info {
				
				.thumbnail {
					min-width: 30%;
					margin: 0;
				}
				
				.details {
					min-width: 67%;
				}
				
			}
				
		}
		
	}
	
}



/*---------------------------------------------------------------------------------------------
*
*  ACF Media Model
*
*---------------------------------------------------------------------------------------------*/

.acf-media-modal {
	
	/* hide embed settings */
	.media-embed {
		
		.setting.align,
		.setting.link-to {
			display: none;
		}
		
	}
	
}


/*---------------------------------------------------------------------------------------------
*
*  ACF Media Model (Select Mode)
*
*---------------------------------------------------------------------------------------------*/

.acf-media-modal.-select {
	
	
	
}


/*---------------------------------------------------------------------------------------------
*
*  ACF Media Model (Edit Mode)
*
*---------------------------------------------------------------------------------------------*/

.acf-media-modal.-edit {
	
	/* resize modal */
	left: 15%;
	right: 15%;
	top: 100px;
	bottom: 100px;
	
	
	/* hide elements */
	.media-frame-menu,
	.media-frame-router,
	.media-frame-content .attachments,
	.media-frame-content .media-toolbar {
	    display: none;
	}
	
	
	/* full width */
	.media-frame-title,
	.media-frame-content,
	.media-frame-toolbar,
	.media-sidebar {
		width: auto;
		left: 0;
		right: 0;
	}
	
	
	/* tidy up incorrect distance */
	.media-frame-content {
	    top: 56px;
	}
	
	
	/* WP4 */
	body.major-4 & .media-frame-content {
		top: 50px;
	}
	
	
	/* title box shadow (to match media grid) */
	.media-frame-title {
	    border-bottom: 1px solid #DFDFDF;
	    box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
	}
	
	
	/* sidebar */
	.media-sidebar {
		
		padding: 0 16px;
		
		/* WP details */
		.attachment-details {
			
			overflow: visible;
			
			/* hide 'Attachment Details' heading */
			> h3, > h2 {
				display: none;
			}
			
			
			/* remove overflow */
			.attachment-info {
				background: #fff;
				border-bottom: #dddddd solid 1px;
				padding: 16px;
				margin: 0 -16px 16px;
			}
			
			/* move thumbnail */
			.thumbnail {
				margin: 0 16px 0 0;
			}
			
			.setting {
				display: block;
				overflow: hidden;
				float: none;
				width: auto;
				margin: 0 0 5px;
				
				span {
					margin: 0;
				}
			}
			
		}
		
		
		/* ACF fields */
		.compat-attachment-fields {
			
			> tbody > .acf-field {
				margin: 0 0 5px;
				
				p.description {
					margin-top: 3px;
				}
			}
			
		}
		
		
		/* WP required message */
		.media-types-required-info { display: none; }
		
	}
	
	
	/* mobile md */
	@media (max-width: 900px) {
		
		& {
			top: 30px;
			right: 30px;
			bottom: 30px;
			left: 30px;
		}
		
	}
	
	
	/* mobile sm */
	@media (max-width: 640px) {
		
		& {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		
		.media-sidebar {
			bottom: 0 !important;
		}

	}
		
}


/*--------------------------------------------------------------------------------------------
*
*	User
*
*--------------------------------------------------------------------------------------------*/

.form-table > tbody {
	
	/* field */
	> .acf-field {
		
		/* label */
		> .acf-label {
			padding: 20px 10px 20px 0;
		    width: 210px;
		    
		    /* rtl */
			html[dir="rtl"] & {
				padding: 20px 0 20px 10px;
			}
			
		    label {
				font-size: 14px;
				color: #23282d;
			}
		    
		}
		
		
		/* input */
		> .acf-input {
			padding: 15px 5% 15px 10px;
			
			/* rtl */
			html[dir="rtl"] & {
				padding: 15px 10px 15px 5%;
			}
		}
		
	}
	
	
	/* tab wrap */
	> .acf-tab-wrap td {
		padding: 15px 5% 15px 0;
		
		/* rtl */
		html[dir="rtl"] & {
			padding: 15px 0 15px 5%;
		}
		
	}
	
	
	/* misc */
	.form-table th.acf-th {
		width: auto;
	}
	
}


/*--------------------------------------------------------------------------------------------
*
*	Term
*
*--------------------------------------------------------------------------------------------*/

#addtag > .acf-field {
	padding-right: 5%;
}

#addtag > .acf-field .acf-label {
	margin: 0;
}

#addtag > .acf-field .acf-label label {
	font-size: 12px;
	font-weight: normal;
}

p.submit .spinner,
p.submit .acf-spinner {
	vertical-align: top;
	float: none;
	margin: 4px 4px 0;
}


/*--------------------------------------------------------------------------------------------
*
*	Comment
*
*--------------------------------------------------------------------------------------------*/

.editcomment td:first-child {
    white-space: nowrap;
    width: 131px;
}


/*--------------------------------------------------------------------------------------------
*
*	Widget
*
*--------------------------------------------------------------------------------------------*/

#widgets-right .widget .acf-field .description {
	padding-left: 0;
	padding-right: 0;
}

.widget {
	
	.acf-field {
		margin: 1em 0;
		
		.acf-label {
			margin-bottom: 5px;
			
			label {
				font-weight: normal;
				margin: 0;
			}
		}
	}
	
	.widget-inside > form > .acf-error-message {
		margin-top: 15px;
	}
}


/*--------------------------------------------------------------------------------------------
*
*	Customizer
*
*--------------------------------------------------------------------------------------------*/

.customize-control .acf-field {
	margin: 1em 0;
}


/*--------------------------------------------------------------------------------------------
*
*	Nav Menu
*
*--------------------------------------------------------------------------------------------*/

.acf-menu-settings {
	border-top: 1px solid #eee;
    margin-top: 2em;
	
	
	/* fields */
	> .acf-fields {
		
		> .acf-field {
			padding-left: 20%;
			margin: 0 0 10px;
			
			> .acf-label {
				width: 25%;
				margin-left: -25%;
				
				label {
					color: #666;
				    font-style: italic;
				    font-weight: normal;
				}
			}
		}
		
	}
	
	
	/* seamless */
	&.-seamless {
		border-top: none;
		margin-top: 15px;
		
		> h2 { display: none; }
	}
}


.menu-item-settings {
	
	/* fields */
	> .field-acf {
		
		> .acf-field {
			margin: 0 0 10px;
			
			> .acf-label {
				margin: 0;
				
				label {
					color: #666;
				    font-style: italic;
				    font-weight: normal;
				    margin: 0;
				}
			}
		}
	}
	
}


/*--------------------------------------------------------------------------------------------
*
*	Confirm remove
*
*--------------------------------------------------------------------------------------------*/

.acf-temp-remove {
	position: relative;
	opacity: 1;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
	overflow: hidden;
	
	/* overlay prevents hover */
	&:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}
}


/*--------------------------------------------------------------------------
*
*	Conditional Logic
*	
*-------------------------------------------------------------------------*/

/* Hide */
.hidden-by-conditional-logic {
    display: none !important;
}


/* Hide (appear empty) */
.hidden-by-conditional-logic.appear-empty {
    display: table-cell !important;
}

.hidden-by-conditional-logic.appear-empty .acf-input {
	display: none !important;
}


/*--------------------------------------------------------------------------
*
*	3rd Party
*	
*-------------------------------------------------------------------------*/

/* Tabify shows hidden postboxes */
.acf-postbox.acf-hidden {
	display: none !important;
}