/* Horizontal List */
.acf-hl {
	padding: 0;
	margin: 0;
	list-style: none;
	display: block;
	position: relative;
}
.acf-hl > li {
	float: left;
	display: block;
	margin: 0;
	padding: 0;
}
.acf-hl > li.acf-fr {
	float: right;
}

/* Horizontal List: Clearfix */
.acf-hl:before,
.acf-hl:after,
.acf-bl:before,
.acf-bl:after,
.acf-cf:before,
.acf-cf:after {
	content: "";
	display: block;
	line-height: 0;
}
.acf-hl:after,
.acf-bl:after,
.acf-cf:after {
	clear: both;
}

/* Block List */
.acf-bl {
	padding: 0;
	margin: 0;
	list-style: none;
	display: block;
	position: relative;
}
.acf-bl > li {
	display: block;
	margin: 0;
	padding: 0;
	float: none;
}

/* Visibility */
.acf-hidden {
	display: none !important;
}
.acf-empty {
	display: table-cell !important;
	* {
		display: none !important;
	}
}

/* Float */
.acf-fl {
	float: left;
}
.acf-fr {
	float: right;
}
.acf-fn {
	float: none;
}

/* Align */
.acf-al {
	text-align: left;
}
.acf-ar {
	text-align: right;
}
.acf-ac {
	text-align: center;
}

/* loading */
.acf-loading,
.acf-spinner {
	display: inline-block;
	height: 20px;
	width: 20px;
	vertical-align: text-top;
	background: transparent url(../../images/spinner.gif) no-repeat 50% 50%;
}

/* spinner */
.acf-spinner {
	display: none;
}

.acf-spinner.is-active {
	display: inline-block;
}

/* WP < 4.2 */
.spinner.is-active {
	display: inline-block;
}

/* required */
.acf-required {
	color: #f00;
}

/* Allow pointer events in reusable blocks */
.acf-button,
.acf-tab-button {
	pointer-events: auto !important;
}

/* show on hover */
.acf-soh .acf-soh-target {
	-webkit-transition: opacity 0.25s 0s ease-in-out, visibility 0s linear 0.25s;
	-moz-transition: opacity 0.25s 0s ease-in-out, visibility 0s linear 0.25s;
	-o-transition: opacity 0.25s 0s ease-in-out, visibility 0s linear 0.25s;
	transition: opacity 0.25s 0s ease-in-out, visibility 0s linear 0.25s;

	visibility: hidden;
	opacity: 0;
}

.acf-soh:hover .acf-soh-target {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;

	visibility: visible;
	opacity: 1;
}

/* show if value */
.show-if-value {
	display: none;
}
.hide-if-value {
	display: block;
}

.has-value .show-if-value {
	display: block;
}
.has-value .hide-if-value {
	display: none;
}

/* select2 WP animation fix */
.select2-search-choice-close {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}

/*---------------------------------------------------------------------------------------------
*
*  tooltip
*
*---------------------------------------------------------------------------------------------*/

/* tooltip */
.acf-tooltip {
	background: $gray-800;
	border-radius: $radius-md;
	color: $gray-300;
	padding: {
		top: 8px;
		right: 12px;
		bottom: 10px;
		left: 12px;
	}
	position: absolute;
	@extend .p7;
	z-index: 900000;
	max-width: 280px;
	box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
		0px 4px 6px -2px rgba(16, 24, 40, 0.03);

	/* tip */
	&:before {
		border: solid;
		border-color: transparent;
		border-width: 6px;
		content: "";
		position: absolute;
	}

	/* positions */
	&.top {
		margin-top: -8px;

		&:before {
			top: 100%;
			left: 50%;
			margin-left: -6px;
			border-top-color: #2f353e;
			border-bottom-width: 0;
		}
	}

	&.right {
		margin-left: 8px;

		&:before {
			top: 50%;
			margin-top: -6px;
			right: 100%;
			border-right-color: #2f353e;
			border-left-width: 0;
		}
	}

	&.bottom {
		margin-top: 8px;

		&:before {
			bottom: 100%;
			left: 50%;
			margin-left: -6px;
			border-bottom-color: #2f353e;
			border-top-width: 0;
		}
	}

	&.left {
		margin-left: -8px;

		&:before {
			top: 50%;
			margin-top: -6px;
			left: 100%;
			border-left-color: #2f353e;
			border-right-width: 0;
		}
	}

	.acf-overlay {
		z-index: -1;
	}
}

/* confirm */
.acf-tooltip.-confirm {
	z-index: 900001; // +1 higher than .acf-tooltip

	a {
		text-decoration: none;
		color: #9ea3a8;

		&:hover {
			text-decoration: underline;
		}

		&[data-event="confirm"] {
			color: #f55e4f;
		}
	}
}

.acf-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: default;
}

.acf-tooltip-target {
	position: relative;
	z-index: 900002; // +1 higher than .acf-tooltip
}

/*---------------------------------------------------------------------------------------------
*
*  loading
*
*---------------------------------------------------------------------------------------------*/
.acf-loading-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: default;
	z-index: 99;
	background: rgba(249, 249, 249, 0.5);

	i {
		@include centered();
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-icon
*
*--------------------------------------------------------------------------------------------*/
.acf-icon {
	display: inline-block;
	height: 28px;
	width: 28px;
	border: transparent solid 1px;
	border-radius: 100%;
	font-size: 20px;
	line-height: 21px;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	box-sizing: border-box;

	&:before {
		font-family: dashicons;
		display: inline-block;
		line-height: 1;
		font-weight: 400;
		font-style: normal;
		speak: none;
		text-decoration: inherit;
		text-transform: none;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 1em;
		height: 1em;
		vertical-align: middle;
		text-align: center;
	}
}

// Icon types.
.acf-icon.-plus:before {
	content: "\f543";
}
.acf-icon.-minus:before {
	content: "\f460";
}
.acf-icon.-cancel:before {
	content: "\f335";
	margin: -1px 0 0 -1px;
}
.acf-icon.-pencil:before {
	content: "\f464";
}
.acf-icon.-location:before {
	content: "\f230";
}
.acf-icon.-up:before {
	content: "\f343";

	// Fix position relative to font-size.
	margin-top: math.div(-2em, 20);
}
.acf-icon.-down:before {
	content: "\f347";

	// Fix position relative to font-size.
	margin-top: math.div(2em, 20);
}
.acf-icon.-left:before {
	content: "\f341";

	// Fix position relative to font-size.
	margin-left: math.div(-2em, 20);
}
.acf-icon.-right:before {
	content: "\f345";

	// Fix position relative to font-size.
	margin-left: math.div(2em, 20);
}
.acf-icon.-sync:before {
	content: "\f463";
}
.acf-icon.-globe:before {
	content: "\f319";

	// Fix position relative to font-size.
	margin-top: math.div(2em, 20);
	margin-left: math.div(2em, 20);
}
.acf-icon.-picture:before {
	content: "\f128";
}
.acf-icon.-check:before {
	content: "\f147";

	// Fix position relative to font-size.
	margin-left: math.div(-2em, 20);
}
.acf-icon.-dot-3:before {
	content: "\f533";

	// Fix position relative to font-size.
	margin-top: math.div(-2em, 20);
}
.acf-icon.-arrow-combo:before {
	content: "\f156";
}
.acf-icon.-arrow-up:before {
	content: "\f142";

	// Fix position relative to font-size.
	margin-left: math.div(-2em, 20);
}
.acf-icon.-arrow-down:before {
	content: "\f140";

	// Fix position relative to font-size.
	margin-left: math.div(-2em, 20);
}
.acf-icon.-search:before {
	content: "\f179";
}
.acf-icon.-link-ext:before {
	content: "\f504";
}

// Duplicate is a custom icon made from pseudo elements.
.acf-icon.-duplicate {
	position: relative;
	&:before,
	&:after {
		content: "";
		display: block;
		box-sizing: border-box;
		width: 46%;
		height: 46%;
		position: absolute;
		top: 33%;
		left: 23%;
	}
	&:before {
		margin: -1px 0 0 1px;
		box-shadow: 2px -2px 0px 0px currentColor;
	}
	&:after {
		border: solid 2px currentColor;
	}
}

.acf-icon.-trash {
	position: relative;
	&:before,
	&:after {
		content: "";
		display: block;
		box-sizing: border-box;
		width: 46%;
		height: 46%;
		position: absolute;
		top: 33%;
		left: 23%;
	}
	&:before {
		margin: -1px 0 0 1px;
		box-shadow: 2px -2px 0px 0px currentColor;
	}
	&:after {
		border: solid 2px currentColor;
	}
}

// Collapse icon toggles automatically.
.acf-icon.-collapse:before {
	content: "\f142";

	// Fix position relative to font-size.
	margin-left: math.div(-2em, 20);
}
.-collapsed .acf-icon.-collapse:before {
	content: "\f140";

	// Fix position relative to font-size.
	margin-left: math.div(-2em, 20);
}

// <span> displays with grey border.
span.acf-icon {
	color: #555d66;
	border-color: #b5bcc2;
	background-color: #fff;
}

// <a> also displays with grey border.
a.acf-icon {
	color: #555d66;
	border-color: #b5bcc2;
	background-color: #fff;
	position: relative;
	transition: none;
	cursor: pointer;

	// State "hover".
	&:hover {
		background: #f3f5f6;
		border-color: #0071a1;
		color: #0071a1;
	}
	&.-minus:hover,
	&.-cancel:hover {
		background: #f7efef;
		border-color: #a10000;
		color: #dc3232;
	}

	// Fix: Remove WP outline box-shadow.
	&:active,
	&:focus {
		outline: none;
		box-shadow: none;
	}
}

// Style "clear".
.acf-icon.-clear {
	border-color: transparent;
	background: transparent;
	color: #444;
}

// Style "light".
.acf-icon.light {
	border-color: transparent;
	background: #f5f5f5;
	color: #23282d;
}

// Style "dark".
.acf-icon.dark {
	border-color: transparent !important;
	background: #23282d;
	color: #eee;
}
a.acf-icon.dark {
	&:hover {
		background: #191e23;
		color: #00b9eb;
	}
	&.-minus:hover,
	&.-cancel:hover {
		color: #d54e21;
	}
}

// Style "grey".
.acf-icon.grey {
	border-color: transparent !important;
	background: #b4b9be;
	color: #fff !important;

	&:hover {
		background: #00a0d2;
		color: #fff;
	}
	&.-minus:hover,
	&.-cancel:hover {
		background: #32373c;
	}
}

// Size "small".
.acf-icon.small,
.acf-icon.-small {
	width: 20px;
	height: 20px;
	line-height: 14px;
	font-size: 14px;

	// Apply minor transforms to reduce clarirty of "duplicate" icon.
	// Helps to unify rendering with dashicons.
	&.-duplicate {
		&:before,
		&:after {
			//transform: rotate(0.1deg) scale(0.9) translate(-5%, 5%);
			opacity: 0.8;
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-box
*
*--------------------------------------------------------------------------------------------*/
.acf-box {
	background: #ffffff;
	border: 1px solid $wp-card-border;
	position: relative;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);

	/* title */
	.title {
		border-bottom: 1px solid $wp-card-border;
		margin: 0;
		padding: 15px;

		h3 {
			display: flex;
			align-items: center;
			font-size: 14px;
			line-height: 1em;
			margin: 0;
			padding: 0;
		}
	}

	.inner {
		padding: 15px;
	}

	h2 {
		color: #333333;
		font-size: 26px;
		line-height: 1.25em;
		margin: 0.25em 0 0.75em;
		padding: 0;
	}

	h3 {
		margin: 1.5em 0 0;
	}

	p {
		margin-top: 0.5em;
	}

	a {
		text-decoration: none;
	}

	i {
		&.dashicons-external {
			margin-top: -1px;
		}
	}

	/* footer */
	.footer {
		border-top: 1px solid $wp-card-border;
		padding: 12px;
		font-size: 13px;
		line-height: 1.5;

		p {
			margin: 0;
		}
	}

	// WP Admin 3.8
	@include wp-admin("3-8") {
		border-color: $wp38-card-border;
		.title,
		.footer {
			border-color: $wp38-card-border;
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-notice
*
*--------------------------------------------------------------------------------------------*/

.acf-notice {
	position: relative;
	display: block;
	color: #fff;
	margin: 5px 0 15px;
	padding: 3px 12px;
	background: $acf_notice;
	border-left: darken($acf_notice, 10%) solid 3px;

	p {
		font-size: 13px;
		line-height: 1.5;
		margin: 0.5em 0;
		text-shadow: none;
		color: inherit;
	}

	.acf-notice-dismiss {
		position: absolute;
		top: 9px;
		right: 12px;
		background: transparent !important;
		color: inherit !important;
		border-color: #fff !important;
		opacity: 0.75;
		&:hover {
			opacity: 1;
		}
	}

	// dismiss
	&.-dismiss {
		padding-right: 40px;
	}

	// error
	&.-error {
		background: $acf_error;
		border-color: darken($acf_error, 10%);
	}

	// success
	&.-success {
		background: $acf_success;
		border-color: darken($acf_success, 10%);
	}

	// warning
	&.-warning {
		background: $acf_warning;
		border-color: darken($acf_warning, 10%);
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-table
*
*--------------------------------------------------------------------------------------------*/

.acf-table {
	border: $wp-card-border solid 1px;
	background: #fff;
	border-spacing: 0;
	border-radius: 0;
	table-layout: auto;
	padding: 0;
	margin: 0;
	width: 100%;
	clear: both;
	box-sizing: content-box;

	/* defaults */
	> tbody > tr,
	> thead > tr {
		> th,
		> td {
			padding: 8px;
			vertical-align: top;
			background: #fff;
			text-align: left;
			border-style: solid;
			font-weight: normal;
		}

		> th {
			position: relative;
			color: #333333;
		}
	}

	/* thead */
	> thead {
		> tr {
			> th {
				border-color: $wp-card-border-1;
				border-width: 0 0 1px 1px;

				&:first-child {
					border-left-width: 0;
				}
			}
		}
	}

	/* tbody */
	> tbody {
		> tr {
			z-index: 1;

			> td {
				border-color: $wp-card-border-2;
				border-width: 1px 0 0 1px;

				&:first-child {
					border-left-width: 0;
				}
			}

			&:first-child > td {
				border-top-width: 0;
			}
		}
	}

	/* -clear */
	&.-clear {
		border: 0 none;

		> tbody > tr,
		> thead > tr {
			> td,
			> th {
				border: 0 none;
				padding: 4px;
			}
		}
	}
}

/* remove tr */
.acf-remove-element {
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;

	transform: translate(50px, 0);
	opacity: 0;
}

/* fade-up */
.acf-fade-up {
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;

	transform: translate(0, -10px);
	opacity: 0;
}

/*---------------------------------------------------------------------------------------------
*
*  Fake table
*
*---------------------------------------------------------------------------------------------*/

.acf-thead,
.acf-tbody,
.acf-tfoot {
	width: 100%;
	padding: 0;
	margin: 0;

	> li {
		box-sizing: border-box;
		padding: {
			top: 14px;
		}
		font-size: 12px;
		line-height: 14px;
	}
}

.acf-thead {
	border-bottom: $wp-card-border solid 1px;
	color: #23282d;

	> li {
		font-size: 14px;
		line-height: 1.4;
		font-weight: bold;
	}

	// WP Admin 3.8
	@include wp-admin("3-8") {
		border-color: $wp38-card-border-1;
	}
}

.acf-tfoot {
	background: #f5f5f5;
	border-top: $wp-card-border-1 solid 1px;
}

/*--------------------------------------------------------------------------------------------
*
*	Settings
*
*--------------------------------------------------------------------------------------------*/

.acf-settings-wrap {
	#poststuff {
		padding-top: 15px;
	}

	.acf-box {
		margin: 20px 0;
	}

	table {
		margin: 0;

		.button {
			vertical-align: middle;
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-popup
*
*--------------------------------------------------------------------------------------------*/

#acf-popup {
	position: fixed;
	z-index: 900000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;

	// bg
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		background: rgba(0, 0, 0, 0.25);
	}

	&:before {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	// box
	.acf-popup-box {
		display: inline-block;
		vertical-align: middle;
		z-index: 1;
		min-width: 300px;
		min-height: 160px;
		border-color: #aaaaaa;
		box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.25);
		text-align: left;
		@include rtl();

		// title
		.title {
			min-height: 15px;
			line-height: 15px;

			// icon
			.acf-icon {
				position: absolute;
				top: 10px;
				right: 10px;

				// rtl
				html[dir="rtl"] & {
					right: auto;
					left: 10px;
				}
			}
		}

		.inner {
			min-height: 50px;

			// use margin instead of padding to allow inner elements marin to overlap and avoid large hitespace at top/bottom
			padding: 0;
			margin: 15px;
		}

		// loading
		.loading {
			position: absolute;
			top: 45px;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
			background: rgba(0, 0, 0, 0.1);
			display: none;

			i {
				@include centered();
			}
		}
	}
}

// acf-submit
.acf-submit {
	margin-bottom: 0;
	line-height: 28px; // .button height

	// message
	span {
		float: right;
		color: #999;

		&.-error {
			color: #dd4232;
		}
	}

	// button (allow margin between loading)
	.button {
		margin-right: 5px;
	}
}

/*--------------------------------------------------------------------------------------------
*
*	upgrade notice
*
*--------------------------------------------------------------------------------------------*/

#acf-upgrade-notice {
	position: relative;
	background: #fff;
	padding: 20px;
	@include clearfix();

	.col-content {
		float: left;
		width: 55%;
		padding-left: 90px;
	}

	.notice-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		align-content: flex-start;
	}

	.col-actions {
		float: right;
		text-align: center;
	}

	img {
		float: left;
		width: 64px;
		height: 64px;
		margin: 0 0 0 -90px;
	}

	h2 {
		display: inline-block;
		font-size: 16px;
		margin: 2px 0 6.5px;
	}

	p {
		padding: 0;
		margin: 0;
	}

	.button:before {
		margin-top: 11px;
	}

	// mobile
	@media screen and (max-width: $sm) {
		.col-content,
		.col-actions {
			float: none;
			padding-left: 90px;
			width: auto;
			text-align: left;
		}
	}
}

// Hide icons for upgade notice.
#acf-upgrade-notice:has(.notice-container)::before,
#acf-upgrade-notice:has(.notice-container)::after {
	display: none;
}

// Match padding of other non-icon notices.
#acf-upgrade-notice:has(.notice-container) {
	padding-left: 20px !important;
}

/*--------------------------------------------------------------------------------------------
*
*	Welcome
*
*--------------------------------------------------------------------------------------------*/

.acf-wrap {
	h1 {
		margin-top: 0;
		padding-top: 20px;
	}

	.about-text {
		margin-top: 0.5em;
		min-height: 50px;
	}

	.about-headline-callout {
		font-size: 2.4em;
		font-weight: 300;
		line-height: 1.3;
		margin: 1.1em 0 0.2em;
		text-align: center;
	}

	.feature-section {
		padding: 40px 0;

		h2 {
			margin-top: 20px;
		}
	}

	.changelog {
		list-style: disc;
		padding-left: 15px;

		li {
			margin: 0 0 0.75em;
		}
	}

	.acf-three-col {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		> div {
			flex: 1;
			align-self: flex-start;
			min-width: 31%;
			max-width: 31%;

			@media screen and (max-width: $md) {
				min-width: 48%;
			}

			@media screen and (max-width: $sm) {
				min-width: 100%;
			}
		}

		h3 .badge {
			display: inline-block;
			vertical-align: top;
			border-radius: 5px;
			background: #fc9700;
			color: #fff;
			font-weight: normal;
			font-size: 12px;
			padding: 2px 5px;
		}

		img + h3 {
			margin-top: 0.5em;
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-hl cols
*
*--------------------------------------------------------------------------------------------*/

.acf-hl[data-cols] {
	margin-left: -10px;
	margin-right: -10px;

	> li {
		padding: 0 6px 0 10px;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

/* sizes */
.acf-hl[data-cols="2"] > li {
	width: 50%;
}
.acf-hl[data-cols="3"] > li {
	width: 33.333%;
}
.acf-hl[data-cols="4"] > li {
	width: 25%;
}

/* mobile */
@media screen and (max-width: $sm) {
	.acf-hl[data-cols] {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		margin-left: 0;
		margin-right: 0;
		margin-top: -10px;

		> li {
			flex: 1 1 100%;
			width: 100% !important;
			padding: 10px 0 0;
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*	misc
*
*--------------------------------------------------------------------------------------------*/

.acf-actions {
	text-align: right;
	z-index: 1;

	/* hover */
	&.-hover {
		position: absolute;
		display: none;
		top: 0;
		right: 0;
		padding: 5px;
		z-index: 1050;
	}

	/* rtl */
	html[dir="rtl"] & {
		&.-hover {
			right: auto;
			left: 0;
		}
	}
}

/* ul compatibility */
ul.acf-actions {
	li {
		float: right;
		margin-left: 4px;
	}
}

/*--------------------------------------------------------------------------------------------
*
*	RTL
*
*--------------------------------------------------------------------------------------------*/

html[dir="rtl"] .acf-fl {
	float: right;
}
html[dir="rtl"] .acf-fr {
	float: left;
}

html[dir="rtl"] .acf-hl > li {
	float: right;
}

html[dir="rtl"] .acf-hl > li.acf-fr {
	float: left;
}

html[dir="rtl"] .acf-icon.logo {
	left: 0;
	right: auto;
}

html[dir="rtl"] .acf-table thead th {
	text-align: right;
	border-right-width: 1px;
	border-left-width: 0px;
}

html[dir="rtl"] .acf-table > tbody > tr > td {
	text-align: right;
	border-right-width: 1px;
	border-left-width: 0px;
}

html[dir="rtl"] .acf-table > thead > tr > th:first-child,
html[dir="rtl"] .acf-table > tbody > tr > td:first-child {
	border-right-width: 0;
}

html[dir="rtl"] .acf-table > tbody > tr > td.order + td {
	border-right-color: #e1e1e1;
}

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

.acf-postbox-columns {
	@include clearfix();
	position: relative;
	margin-top: -11px;
	margin-bottom: -12px;
	margin-left: -12px;
	margin-right: (280px - 12px);

	.acf-postbox-main,
	.acf-postbox-side {
		@include border-box();
		padding: 0 12px 12px;
	}

	.acf-postbox-main {
		float: left;
		width: 100%;
	}

	.acf-postbox-side {
		float: right;
		width: 280px;
		margin-right: -280px;

		&:before {
			content: "";
			display: block;
			position: absolute;
			width: 1px;
			height: 100%;
			top: 0;
			right: 0;
			background: $wp-card-border-1;
		}
	}

	// WP Admin 3.8
	@include wp-admin("3-8") {
		.acf-postbox-side:before {
			background: $wp38-card-border-1;
		}
	}
}

/* mobile */
@media only screen and (max-width: 850px) {
	.acf-postbox-columns {
		margin: 0;

		.acf-postbox-main,
		.acf-postbox-side {
			float: none;
			width: auto;
			margin: 0;
			padding: 0;
		}

		.acf-postbox-side {
			margin-top: 1em;

			&:before {
				display: none;
			}
		}
	}
}

/*---------------------------------------------------------------------------------------------
*
*  acf-panel
*
*---------------------------------------------------------------------------------------------*/

.acf-panel {
	margin-top: -1px;
	border-top: 1px solid $wp-card-border-1;
	border-bottom: 1px solid $wp-card-border-1;

	.acf-panel-title {
		margin: 0;
		padding: 12px;
		font-weight: bold;
		cursor: pointer;
		font-size: inherit;

		i {
			float: right;
		}
	}

	.acf-panel-inside {
		margin: 0;
		padding: 0 12px 12px;
		display: none;
	}

	/* open */
	&.-open {
		.acf-panel-inside {
			display: block;
		}
	}

	/* inside postbox */
	.postbox & {
		margin-left: -12px;
		margin-right: -12px;
	}

	/* fields */
	.acf-field {
		margin: 20px 0 0;

		.acf-label label {
			color: #555d66;
			font-weight: normal;
		}

		&:first-child {
			margin-top: 0;
		}
	}

	// WP Admin 3.8
	@include wp-admin("3-8") {
		border-color: $wp38-card-border-1;
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Admin Tools
*
*---------------------------------------------------------------------------------------------*/

#acf-admin-tools {
	.notice {
		margin-top: 10px;
	}

	.acf-meta-box-wrap {
		.inside {
			border-top: none;
		}

		/* acf-fields */
		.acf-fields {
			margin: {
				bottom: 24px;
			}
			border: none;
			background: #fff;
			border-radius: 0;

			.acf-field {
				padding: 0;
				margin-bottom: 19px;
				border-top: none;
			}

			.acf-label {
				@extend .p2;
				margin: {
					bottom: 16px;
				}
			}

			.acf-input {
				padding: {
					top: 16px;
					right: 16px;
					bottom: 16px;
					left: 16px;
				}
				border: {
					width: 1px;
					style: solid;
					color: $gray-300;
				}
				border-radius: $radius-md;
			}

			&.import-cptui {
				margin-top: 19px;
			}
		}
	}
}

.acf-meta-box-wrap {
	.postbox {
		@include border-box();

		.inside {
			margin-bottom: 0;
		}

		.hndle {
			font-size: 14px;
			padding: 8px 12px;
			margin: 0;
			line-height: 1.4;

			// Prevent .acf-panel border overlapping.
			position: relative;
			z-index: 1;
			cursor: default;
		}

		.handlediv,
		.handle-order-higher,
		.handle-order-lower {
			display: none;
		}
	}
}

/* grid */
.acf-meta-box-wrap.-grid {
	margin-left: 8px;
	margin-right: 8px;

	.postbox {
		float: left;
		clear: left;
		width: 50%;
		margin: 0 0 16px;

		&:nth-child(odd) {
			margin-left: -8px;
		}

		&:nth-child(even) {
			float: right;
			clear: right;
			margin-right: -8px;
		}
	}
}

/* mobile */
@media only screen and (max-width: 850px) {
	.acf-meta-box-wrap.-grid {
		margin-left: 0;
		margin-right: 0;

		.postbox {
			margin-left: 0 !important;
			margin-right: 0 !important;
			width: 100%;
		}
	}
}

/* export tool */
#acf-admin-tool-export {
	p {
		max-width: 800px;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		li {
			flex: 0 1 33.33%;
			@media screen and (max-width: 1600px) {
				flex: 0 1 50%;
			}
			@media screen and (max-width: 1200px) {
				flex: 0 1 100%;
			}
		}
	}

	.acf-postbox-side {
		ul {
			display: block;
		}

		.button {
			margin: 0;
			width: 100%;
		}
	}

	textarea {
		display: block;
		width: 100%;
		min-height: 500px;
		background: $gray-50;
		border-color: $gray-300;
		box-shadow: none;
		padding: 7px;
		border-radius: $radius-md;
	}

	/* panel: selection */
	.acf-panel-selection {
		.acf-label label {
			font-weight: bold;
			color: $gray-700;
		}
	}
}

#acf-admin-tool-import {
	ul {
		column-width: 200px;
	}
}

// CSS only Tooltip.
.acf-css-tooltip {
	position: relative;
	&:before {
		content: attr(aria-label);
		display: none;
		position: absolute;
		z-index: 999;

		bottom: 100%;
		left: 50%;
		transform: translate(-50%, -8px);

		background: #191e23;
		border-radius: 2px;
		padding: 5px 10px;

		color: #fff;
		font-size: 12px;
		line-height: 1.4em;
		white-space: pre;
	}
	&:after {
		content: "";
		display: none;
		position: absolute;
		z-index: 998;

		bottom: 100%;
		left: 50%;
		transform: translate(-50%, 4px);

		border: solid 6px transparent;
		border-top-color: #191e23;
	}

	&:hover,
	&:focus {
		&:before,
		&:after {
			display: block;
		}
	}
}

// Diff modal.
.acf-diff {
	.acf-diff-title {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 40px;
		padding: 14px 16px;
		background: #f3f3f3;
		border-bottom: #dddddd solid 1px;

		strong {
			font-size: 14px;
			display: block;
		}

		.acf-diff-title-left,
		.acf-diff-title-right {
			width: 50%;
			float: left;
		}
	}

	.acf-diff-content {
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
	}

	table.diff {
		border-spacing: 0;

		col.diffsplit.middle {
			width: 0;
		}

		td,
		th {
			padding-top: 0.25em;
			padding-bottom: 0.25em;
		}

		// Fix WP 5.7 conflicting CSS.
		tr td:nth-child(2) {
			width: auto;
		}

		td:nth-child(3) {
			border-left: #dddddd solid 1px;
		}
	}

	// Mobile
	@media screen and (max-width: 600px) {
		.acf-diff-title {
			height: 70px;
		}
		.acf-diff-content {
			top: 100px;
		}
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Modal
*
*---------------------------------------------------------------------------------------------*/
.acf-modal {
	position: fixed;
	top: 30px;
	left: 30px;
	right: 30px;
	bottom: 30px;
	z-index: 160000;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
	background: #fcfcfc;

	.acf-modal-title,
	.acf-modal-content,
	.acf-modal-toolbar {
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
	}

	.acf-modal-title {
		height: 50px;
		top: 0;
		border-bottom: 1px solid #ddd;

		h2 {
			margin: 0;
			padding: 0 16px;
			line-height: 50px;
		}
		.acf-modal-close {
			position: absolute;
			top: 0;
			right: 0;
			height: 50px;
			width: 50px;
			border: none;
			border-left: 1px solid #ddd;
			background: transparent;
			cursor: pointer;
			color: #666;
			&:hover {
				color: #00a0d2;
			}
		}
	}

	.acf-modal-content {
		top: 50px;
		bottom: 60px;
		background: #fff;
		overflow: auto;
		padding: 16px;
	}

	.acf-modal-feedback {
		position: absolute;
		top: 50%;
		margin: -10px 0;
		left: 0;
		right: 0;
		text-align: center;
		opacity: 0.75;

		&.error {
			opacity: 1;
			color: #b52727;
		}
	}

	.acf-modal-toolbar {
		height: 60px;
		bottom: 0;
		padding: 15px 16px;
		border-top: 1px solid #ddd;

		.button {
			float: right;
		}
	}

	// Responsive.
	@media only screen and (max-width: 640px) {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}
.acf-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: $gray-900;
	opacity: 0.8;
	z-index: 159900;
}

/*---------------------------------------------------------------------------------------------
*
*  Retina
*
*---------------------------------------------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-device-pixel-ratio: 2),
	only screen and (min-resolution: 192dpi),
	only screen and (min-resolution: 2dppx) {
	.acf-loading,
	.acf-spinner {
		background-image: url(../../images/spinner@2x.gif);
		background-size: 20px 20px;
	}
}

/*--------------------------------------------------------------------------------------------
*
*  Wrap
*
*--------------------------------------------------------------------------------------------*/

.acf-admin-page {
	.wrap {
		margin: {
			top: 48px;
			right: 32px;
			bottom: 0;
			left: 12px;
		}

		@media screen and (max-width: 768px) {
			margin: {
				right: 8px;
				left: 8px;
			}
		}
	}

	&.rtl .wrap {
		margin: {
			right: 12px;
			left: 32px;
		}

		@media screen and (max-width: 768px) {
			margin: {
				right: 8px;
				left: 8px;
			}
		}
	}

	#wpcontent {
		@media screen and (max-width: 768px) {
			padding: {
				left: 0;
			}
		}
	}
}

/*-------------------------------------------------------------------
*
*  ACF Admin Page Footer Styles
*
*------------------------------------------------------------------*/
.acf-admin-page {
	#wpfooter {
		font-style: italic;
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Admin Postbox & ACF Postbox
*
*---------------------------------------------------------------------------------------------*/
.acf-admin-page {
	.postbox,
	.acf-box {
		border: none;
		border-radius: $radius-lg;
		box-shadow: $elevation-01;

		.inside {
			padding: {
				top: 24px;
				right: 24px;
				bottom: 24px;
				left: 24px;
			}
		}

		.acf-postbox-inner {
			margin: {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			padding: {
				top: 24px;
				right: 0;
				bottom: 0;
				left: 0;
			}
		}

		.inner,
		.inside {
			margin: {
				top: 0 !important;
				right: 0 !important;
				bottom: 0 !important;
				left: 0 !important;
			}
			border-top: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}
		}

		.postbox-header,
		.title {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			min-height: 64px;
			margin: {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			padding: {
				top: 0;
				right: 24px;
				bottom: 0;
				left: 24px;
			}
			border-bottom: {
				width: 0;
				style: none;
			}

			h2,
			h3 {
				margin: {
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
				padding: {
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
				@extend .acf-h3;
				color: $gray-700;
			}
		}

		.hndle {
			padding: {
				top: 0;
				right: 24px;
				bottom: 0;
				left: 24px;
			}
		}
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Custom ACF postbox header
*
*---------------------------------------------------------------------------------------------*/
.acf-postbox-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 64px;
	margin: {
		top: -24px;
		right: -24px;
		bottom: 0;
		left: -24px;
	}
	padding: {
		top: 0;
		right: 24px;
		bottom: 0;
		left: 24px;
	}
	border-bottom: {
		width: 1px;
		style: solid;
		color: $gray-200;
	}

	h2.acf-postbox-title {
		margin: {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		padding: {
			top: 0;
			right: 24px;
			bottom: 0;
			left: 0;
		}
		@extend .acf-h3;
		color: $gray-700;
	}

	.rtl & h2.acf-postbox-title {
		padding: {
			right: 0;
			left: 24px;
		}
	}

	.acf-icon {
		background-color: $gray-400;
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Screen options button & screen meta container
*
*---------------------------------------------------------------------------------------------*/
.acf-admin-page {
	#screen-meta-links {
		margin: {
			right: 32px;
		}

		.show-settings {
			border-color: $gray-300;
		}

		@media screen and (max-width: 768px) {
			margin: {
				right: 16px;
				bottom: 0;
			}
		}
	}

	&.rtl #screen-meta-links {
		margin: {
			right: 0;
			left: 32px;
		}

		@media screen and (max-width: 768px) {
			margin: {
				right: 0;
				left: 16px;
			}
		}
	}

	#screen-meta {
		border-color: $gray-300;
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Postbox headings
*
*---------------------------------------------------------------------------------------------*/
.acf-admin-page {
	#poststuff {
		.postbox-header {
			h2,
			h3 {
				justify-content: flex-start;
				margin: {
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
				padding: {
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
				@extend .acf-h3;
				color: $gray-700 !important;
			}
		}
	}
}

/*---------------------------------------------------------------------------------------------
*
* Postbox drag state
*
*---------------------------------------------------------------------------------------------*/
.acf-admin-page {
	&.is-dragging-metaboxes
		.metabox-holder
		.postbox-container
		.meta-box-sortables {
		box-sizing: border-box;
		padding: 2px;
		outline: none;
		background-image: repeating-linear-gradient(
				0deg,
				$gray-500,
				$gray-500 5px,
				transparent 5px,
				transparent 10px,
				$gray-500 10px
			),
			repeating-linear-gradient(
				90deg,
				$gray-500,
				$gray-500 5px,
				transparent 5px,
				transparent 10px,
				$gray-500 10px
			),
			repeating-linear-gradient(
				180deg,
				$gray-500,
				$gray-500 5px,
				transparent 5px,
				transparent 10px,
				$gray-500 10px
			),
			repeating-linear-gradient(
				270deg,
				$gray-500,
				$gray-500 5px,
				transparent 5px,
				transparent 10px,
				$gray-500 10px
			);
		background-size: 1.5px 100%, 100% 1.5px, 1.5px 100%, 100% 1.5px;
		background-position: 0 0, 0 0, 100% 0, 0 100%;
		background-repeat: no-repeat;
		border-radius: $radius-lg;
	}

	.ui-sortable-placeholder {
		border: none;
	}
}

/*--------------------------------------------------------------------------------------------
*
*  Search summary
*
*--------------------------------------------------------------------------------------------*/
.acf-admin-page {
	.subtitle {
		display: inline-flex;
		align-items: center;
		height: 24px;
		margin: 0;
		padding: {
			top: 4px;
			right: 12px;
			bottom: 4px;
			left: 12px;
		}
		background-color: $blue-50;
		border: {
			width: 1px;
			style: solid;
			color: $blue-200;
		}
		border-radius: $radius-md;
		@extend .p3;

		strong {
			margin: {
				left: 5px;
			}
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*  Action strip
*
*--------------------------------------------------------------------------------------------*/
.acf-actions-strip {
	display: flex;

	.acf-btn {
		margin: {
			right: 8px;
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*  Notices
*
*--------------------------------------------------------------------------------------------*/
.acf-admin-page {
	.acf-notice,
	.notice,
	#lost-connection-notice {
		position: relative;
		box-sizing: border-box;
		min-height: 48px;
		margin: {
			top: 0 !important;
			right: 0 !important;
			bottom: 16px !important;
			left: 0 !important;
		}
		padding: {
			top: 13px !important;
			right: 16px;
			bottom: 12px !important;
			left: 50px !important;
		}
		background-color: #e7eff9;
		border: {
			width: 1px;
			style: solid;
			color: #9dbaee;
		}
		border-radius: $radius-lg;
		box-shadow: $elevation-01;
		color: $gray-700;

		&.update-nag {
			display: block;
			position: relative;
			width: calc(100% - 44px);
			margin: {
				top: 48px !important;
				right: 44px !important;
				bottom: -32px !important;
				left: 12px !important;
			}
		}

		.button {
			height: auto;
			margin: {
				left: 8px;
			}
			padding: 0;
			border: none;
			@extend .p5;
		}

		> div {
			margin: {
				top: 0;
				bottom: 0;
			}
		}

		p {
			flex: 1 0 auto;
			max-width: 100%;
			line-height: 18px;
			margin: 0;
			padding: 0;

			&.help {
				margin: {
					top: 0;
				}
				padding: {
					top: 0;
				}
				@extend .p7;
				color: rgba($gray-700, 0.7);
			}

webpack://advanced-custom-fields-pro/src/advanced-custom-fields-pro/assets/src/sass/_global.scss
		}

		// Dismiss button
		.acf-notice-dismiss,
		.notice-dismiss {
			position: absolute;
			top: 4px;
			right: 8px;
			padding: 9px;
			border: none;

			&:before {
				content: "";
				$icon-size: 20px;
				display: block;
				position: relative;
				z-index: 600;
				width: $icon-size;
				height: $icon-size;
				background-color: $gray-500;
				border: none;
				border-radius: 0;
				-webkit-mask-size: contain;
				mask-size: contain;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-position: center;
				mask-position: center;
				-webkit-mask-image: url("../../images/icons/icon-close.svg");
				mask-image: url("../../images/icons/icon-close.svg");
			}

			&:hover::before {
				background-color: $gray-700;
			}
		}

		a.acf-notice-dismiss {
			position: absolute;
			top: 5px;
			right: 24px;

			&:before {
				background-color: $gray-600;
			}
		}

		// Icon base styling
		&:before {
			content: "";
			$icon-size: 16px;
			display: block;
			position: absolute;
			top: 15px;
			left: 18px;
			z-index: 600;
			width: $icon-size;
			height: $icon-size;
			margin: {
				right: 8px;
			}
			background-color: #fff;
			border: none;
			border-radius: 0;
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			-webkit-mask-image: url("../../images/icons/icon-info-solid.svg");
			mask-image: url("../../images/icons/icon-info-solid.svg");
		}

		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 9px;
			left: 12px;
			z-index: 500;
			width: 28px;
			height: 28px;
			background-color: $color-info;
			border-radius: $radius-md;
			box-shadow: $elevation-01;
		}

		.local-restore {
			align-items: center;
			margin: {
				top: -6px;
				bottom: 0;
			}
		}
	}

	// Persisted notices should be hidden by default as they will be shown by JS if required.
	.notice[data-persisted="true"] {
		display: none;
	}

	.notice.is-dismissible {
		padding: {
			right: 56px;
		}
	}

	// Success notice
	.notice.notice-success {
		background-color: #edf7ef;
		border-color: #b6deb9;

		&:before {
			-webkit-mask-image: url("../../images/icons/icon-check-circle-solid.svg");
			mask-image: url("../../images/icons/icon-check-circle-solid.svg");
		}

		&:after {
			background-color: $color-success;
		}
	}

	// Error notice
	.acf-notice.acf-error-message,
	.notice.notice-error,
	#lost-connection-notice {
		background-color: #f7eeeb;
		border-color: #f1b6b3;

		&:before {
			-webkit-mask-image: url("../../images/icons/icon-warning.svg");
			mask-image: url("../../images/icons/icon-warning.svg");
		}

		&:after {
			background-color: $color-danger;
		}
	}
	
	.notice.notice-warning {
		&:before {
			-webkit-mask-image: url("../../images/icons/icon-alert-triangle.svg");
			mask-image: url("../../images/icons/icon-alert-triangle.svg");
			background: #f56e28;
		}

		&:after {
			content: none;
		}

		background: linear-gradient(0deg, rgba(247, 144, 9, 0.08), rgba(247, 144, 9, 0.08)), #FFFFFF;
		border: 1px solid rgba(247, 144, 9, 0.32);
		color: $gray-700;
	}
}

.acf-admin-single-taxonomy,
.acf-admin-single-post-type,
.acf-admin-single-options-page {
	.notice-success {
		.acf-item-saved-text {
			font-weight: 600;
		}

		.acf-item-saved-links {
			display: flex;
			gap: 12px;

			a {
				text-decoration: none;
				opacity: 1;

				&:after {
					content: "";
					width: 1px;
					height: 13px;
					display: inline-flex;
					position: relative;
					top: 2px;
					left: 6px;
					background-color: $gray-600;
					opacity: 0.3;
				}

				&:last-child {
					&:after {
						content: none;
					}
				}
			}
		}
	}
}

.rtl.acf-field-group,
.rtl.acf-internal-post-type {
	.notice {
		padding-right: 50px !important;

		.notice-dismiss {
			left: 8px;
			right: unset;
		}

		&:before {
			left: unset;
			right: 10px;
		}

		&:after {
			left: unset;
			right: 12px;
		}
	}

	&.acf-admin-single-taxonomy,
	&.acf-admin-single-post-type,
	&.acf-admin-single-options-page {
		.notice-success .acf-item-saved-links a {
			&:after {
				left: unset;
				right: 6px;
			}
		}
	}
}

/*--------------------------------------------------------------------------------------------
*
*  ACF PRO label
*
*--------------------------------------------------------------------------------------------*/
.acf-pro-label {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	border: none;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}

/*--------------------------------------------------------------------------------------------
*
*  Inline notice overrides
*
*--------------------------------------------------------------------------------------------*/
.acf-admin-page {
	.acf-field {
		// notice
		.acf-notice {
			display: flex;
			align-items: center;
			min-height: 40px !important;
			margin: {
				bottom: 6px !important;
			}
			padding: {
				top: 6px !important;
				left: 40px !important;
				bottom: 6px !important;
			}
			margin: 0 0 15px;
			background: #edf2ff;
			color: $gray-700 !important;
			border-color: #2183b9;
			border-radius: $radius-md;

			&:after {
				top: 8px;
				left: 8px;
				width: 22px;
				height: 22px;
			}

			&:before {
				top: 12px;
				left: 12px;
				width: 14px;
				height: 14px;
			}

			// error
			&.-error {
				background: #f7eeeb;
				border-color: #f1b6b3;
			}

			// success
			&.-success {
				background: #edf7ef;
				border-color: #b6deb9;
			}

			// warning
			&.-warning {
				background: #fdf8eb;
				border-color: #f4dbb4;
			}
		}
	}
}


	</style>



<style id="_fields">
/*--------------------------------------------------------------------------------------------
*
*	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: 15px 0;

	// clear is important as it will avoid any layout issues with floating fields
	// do not delete (you have tried this)
	clear: both;

	// description
	p.description {
		display: block;
		margin: 0;
		padding: 0;
	}

	// label
	.acf-label {
		vertical-align: top;
		margin: 0 0 10px;

		label {
			display: block;
			font-weight: 500;
			margin: 0 0 3px;
			padding: 0;
		}

		&:empty {
			margin-bottom: 0;
		}
	}

	// input
	.acf-input {
		vertical-align: top;
	}

	// description
	p.description {
		display: block;
		margin: {
			top: 6px;
		}
		@extend .p6;
		color: $gray-500;
	}

	// notice
	.acf-notice {
		margin: 0 0 15px;
		background: #edf2ff;
		color: #0c6ca0;
		border-color: #2183b9;

		// error
		&.-error {
			background: #ffe6e6;
			color: #cc2727;
			border-color: #d12626;
		}

		// success
		&.-success {
			background: #eefbe8;
			color: #0e7b17;
			border-color: #32a23b;
		}

		// warning
		&.-warning {
			background: #fff3e6;
			color: #bd4b0e;
			border-color: #d16226;
		}
	}

	// table
	@at-root td#{&},
		tr#{&} {
		margin: 0;
	}
}

// width
.acf-field[data-width] {
	float: left;
	clear: none;

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

	// rtl
	html[dir="rtl"] & {
		float: right;

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

	// table
	@at-root td#{&},
		tr#{&} {
		float: none;
	}

	// mobile
	/*
	@media screen and (max-width: $sm) {
		float: none;
		width: auto;
		border-left-width: 0;
		border-right-width: 0;
	}
*/
}

// float helpers
.acf-field.-c0 {
	clear: both;
	border-left-width: 0 !important;

	// rtl
	html[dir="rtl"] & {
		border-left-width: 1px !important;
		border-right-width: 0 !important;
	}
}

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

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

.acf-fields {
	position: relative;

	// clearifx
	@include clearfix();

	// border
	&.-border {
		border: $wp-card-border solid 1px;
		background: #fff;
	}

	// field
	> .acf-field {
		position: relative;
		margin: 0;
		padding: 16px;
		border-top: {
			width: 1px;
			style: solid;
			color: $gray-200;
		}

		// first
		&:first-child {
			border-top: none;
			margin-top: 0;
		}
	}

	// table
	@at-root td#{&} {
		padding: 0 !important;
	}
}

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

.acf-fields.-clear > .acf-field {
	border: none;
	padding: 0;
	margin: 15px 0;

	// width
	&[data-width] {
		border: none !important;
	}

	// label
	> .acf-label {
		padding: 0;
	}

	// input
	> .acf-input {
		padding: 0;
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-fields (left)
*
*--------------------------------------------------------------------------------------------*/

.acf-fields.-left > .acf-field {
	padding: $fy 0;

	// clearifx
	@include clearfix();

	// sidebar
	&: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%;
	}

	// width
	&[data-width] {
		float: none;
		width: auto !important;
		border-left-width: 0 !important;
		border-right-width: 0 !important;
	}

	// label
	> .acf-label {
		float: left;
		width: 20%;
		margin: 0;
		padding: 0 $fx;
	}

	// input
	> .acf-input {
		float: left;
		width: 80%;
		margin: 0;
		padding: 0 $fx;
	}

	// rtl
	html[dir="rtl"] & {
		// sidebar
		&:before {
			border-width: 0 0 0 1px;
			left: auto;
			right: 0;
		}

		// label
		> .acf-label {
			float: right;
		}

		// input
		> .acf-input {
			float: right;
		}
	}

	// In sidebar.
	#side-sortables & {
		&:before {
			display: none;
		}
		> .acf-label {
			width: 100%;
			margin-bottom: 10px;
		}
		> .acf-input {
			width: 100%;
		}
	}

	// mobile
	@media screen and (max-width: $sm) {
		// sidebar
		&:before {
			display: none;
		}

		// label
		> .acf-label {
			width: 100%;
			margin-bottom: 10px;
		}

		// input
		> .acf-input {
			width: 100%;
		}
	}
}

/* clear + left */
.acf-fields.-clear.-left > .acf-field {
	padding: 0;
	border: none;

	// sidebar
	&:before {
		display: none;
	}

	// label
	> .acf-label {
		padding: 0;
	}

	// input
	> .acf-input {
		padding: 0;
	}
}

/*--------------------------------------------------------------------------------------------
*
*	acf-table
*
*--------------------------------------------------------------------------------------------*/

.acf-table tr.acf-field {
	// label
	> td.acf-label {
		padding: $fp;
		margin: 0;
		background: #f9f9f9;
		width: 20%;
	}

	// input
	> td.acf-input {
		padding: $fp;
		margin: 0;
		border-left-color: #e1e1e1;
	}
}

.acf-sortable-tr-helper {
	position: relative !important;
	display: table-row !important;
}

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

.acf-postbox {
	position: relative;

	// 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 */
	}

	// Edit cog.
	.acf-hndle-cog {
		color: #72777c;
		font-size: 16px;
		line-height: 36px;
		height: 36px; // Mimic WP 5.5
		width: 1.62rem; // Mimic WP 5.5
		position: relative;
		display: none;
		&:hover {
			color: #191e23;
		}
	}

	// Show on hover.
	> .hndle:hover,
	> .postbox-header:hover {
		.acf-hndle-cog {
			display: inline-block;
		}
	}

	// WP < 5.5 styling
	> .hndle {
		.acf-hndle-cog {
			height: 20px;
			line-height: 20px;
			float: right;
			width: auto;
			&:hover {
				color: #777777;
			}
		}
	}

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

// Correct margin around #acf_after_title
#post-body-content #acf_after_title-sortables {
	margin: 20px 0 -20px;
}

/* seamless */
.acf-postbox.seamless {
	border: 0 none;
	background: transparent;
	box-shadow: none;

	/* hide hndle */
	> .postbox-header,
	> .hndle,
	> .handlediv {
		display: none !important;
	}

	/* inside */
	> .inside {
		display: block !important; /* stop metabox from hiding when closed */
		margin-left: -$field_padding_x !important;
		margin-right: -$field_padding_x !important;

		> .acf-field {
			border-color: transparent;
		}
	}
}

/* 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;
		}
	}
}

/*-----------------------------------------------------------------------------
*
*  Inputs
*
*-----------------------------------------------------------------------------*/

.acf-field {
	input[type="text"],
	input[type="password"],
	input[type="date"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	textarea,
	select {
		width: 100%;
		padding: 4px 8px;
		margin: 0;
		box-sizing: border-box;
		font-size: 14px;
		line-height: 1.4;

		// WP Admin 3.8
		@include wp-admin("3-8") {
			padding: 3px 5px;
		}
	}
	textarea {
		resize: vertical;
	}
}

// Fix extra padding in Firefox.
body.acf-browser-firefox .acf-field select {
	padding: 4px 5px;
}

/*-----------------------------------------------------------------------------
*
*  Text
*
*-----------------------------------------------------------------------------*/
.acf-input-prepend,
.acf-input-append,
.acf-input-wrap {
	box-sizing: border-box;
}

.acf-input-prepend,
.acf-input-append {
	font-size: 13px;
	line-height: 1.4;
	padding: 4px 8px;
	background: #f5f5f5;
	border: $wp-input-border solid 1px;
	min-height: 30px;

	// WP Admin 3.8
	@include wp-admin("3-8") {
		padding: 3px 5px;
		border-color: $wp38-input-border;
		min-height: 28px;
	}
}

.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-is-prepended {
		border-radius: 0 $radius-md $radius-md 0 !important;
	}
	.acf-is-appended {
		border-radius: $radius-md 0 0 $radius-md !important;
	}
	.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-color-result {
		border-color: $wp-input-border;
		@include wp-admin("3-8") {
			border-color: $wp-card-border;
		}
	}
	.wp-picker-active {
		position: relative;
		z-index: 1;
	}
}

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

.acf-url {
	i {
		position: absolute;
		top: 5px;
		left: 5px;
		opacity: 0.5;
		color: #7e8993;
	}

	input[type="url"] {
		padding-left: 27px !important;
	}

	&.-valid i {
		opacity: 1;
	}
}

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

.select2-container.-acf {
	z-index: 1001;
	
	.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 !important;
				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 {
	// Reset WP default style.
	li {
		margin-bottom: 0;
	}

	// select2 4.1 specific targeting for plugin conflict resolution.
	&[data-select2-id^="select2-data"] {
		.select2-selection--multiple {
			overflow: hidden;
		}
	}

	// Customize border color to match WP admin.
	.select2-selection {
		border-color: $wp-input-border;

		// WP Admin 3.8
		@include wp-admin("3-8") {
			border-color: #aaa;
		}
	}

	// Multiple wrap.
	.select2-selection--multiple {
		// If no value, increase hidden search input full width.
		// Overrides calculated px width issues.
		.select2-search--inline:first-child {
			float: none;
			input {
				width: 100% !important;
			}
		}

		// ul: Remove padding because li already has margin-right.
		.select2-selection__rendered {
			padding-right: 0;
		}

		// incredibly specific targeting of an ID that only gets applied in select2 4.1 to solve plugin conflicts
		.select2-selection__rendered[id^="select2-acf-field"] {
			display: inline;
			padding: 0;
			margin: 0;

			.select2-selection__choice {
				margin-right: 0;
			}
		}

		// li
		.select2-selection__choice {
			background-color: #f7f7f7;
			border-color: #cccccc;

			// Allow choice to wrap multiple lines.
			max-width: 100%;
			overflow: hidden;
			word-wrap: normal !important;
			white-space: normal;

			// Sortable.
			&.ui-sortable-helper {
				background: $blue-500;
				border-color: $blue-600;
				color: #fff !important;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);

				span {
					visibility: hidden;
				}
			}

			// Fixed for select2's 4.1 css changes when loaded by another plugin.
			.select2-selection__choice__remove {
				position: static;
				border-right: none;
				padding: 0;
			}

			// Sortable shadow
			&.ui-sortable-placeholder {
				background-color: $gray-100;
				border-color: $gray-100;
				visibility: visible !important;
			}
		}

		// search
		.select2-search__field {
			box-shadow: none !important;
			min-height: 0;
		}
	}

	// Fix single select pushing out repeater field table width.
	.acf-row & .select2-selection--single {
		overflow: hidden;
		.select2-selection__rendered {
			white-space: normal;
		}
	}
}

.acf-admin-single-field-group .select2-dropdown {
	border-color: $blue-300 !important;
	margin-top: -5px;
	overflow: hidden;
	box-shadow: $elevation-01;
}

.select2-dropdown.select2-dropdown--above {
	margin-top: 0;
}

.acf-admin-single-field-group .select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: $gray-50 !important;
	color: $gray-500;

	&:hover {
		color: $blue-400;
	}
}

.acf-admin-single-field-group .select2-container--default
	.select2-results__option--highlighted[aria-selected] {
	color: #fff !important;
	background-color: $blue-500 !important;
}

// remove bottom margin on options
.select2-dropdown .select2-results__option {
	margin-bottom: 0;
}

// z-index helper.
.select2-container {
	.select2-dropdown {
		z-index: 900000;

		// Reset input height.
		.select2-search__field {
			line-height: 1.4;
			min-height: 0;
		}
	}
}

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

.acf-link {
	.link-wrap {
		display: none;
		border: $wp-card-border 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;
		}
	}

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

	// Is 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;
	border: 1px solid transparent;
	position: relative;
	padding: 1px;
	margin: 0;

	&:focus-within {
		border: 1px solid $blue-200;
		border-radius: $radius-md;
	}

	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: $wp-input-border solid 1px;
		position: relative;
		z-index: 1;
		padding: 5px 10px;
		background: #fff;

		&:hover {
			color: #016087;
			background: #f3f5f6;
			border-color: #0071a1;
			z-index: 2;
		}

		&.selected {
			border-color: #007cba;
			background: lighten(#007cba, 5%);
			color: #fff;
			z-index: 2;
		}
	}

	input {
		display: none !important;
	}

	/* 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;
				html[dir="rtl"] & {
					border-radius: 0 3px 3px 0;
				}
			}
			&:last-child {
				border-radius: 0 3px 3px 0;
				html[dir="rtl"] & {
					border-radius: 3px 0 0 3px;
				}
			}
			&: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;
			}
		}
	}

	// WP Admin 3.8
	@include wp-admin("3-8") {
		label {
			border-color: $wp-card-border;
			&:hover {
				border-color: #0071a1;
			}
			&.selected {
				border-color: #007cba;
			}
		}
	}
}

.acf-admin-page {
	.acf-button-group {
		display: flex;
		align-items: stretch;
		align-content: center;
		height: 40px;
		border-radius: $radius-md;
		box-shadow: $elevation-01;

		label {
			display: inline-flex;
			align-items: center;
			align-content: center;
			border: $gray-300 solid 1px;
			padding: 6px 16px;
			color: $gray-600;
			font-weight: 500;

			&:hover {
				color: $color-primary;
			}

			&.selected {
				background: $gray-50;
				color: $color-primary;
			}
		}
	}

	.select2-container.-acf {
		.select2-selection--multiple {
			.select2-selection__choice {
				display: inline-flex;
				align-items: center;
				margin: {
					top: 8px;
					left: 2px;
				};
				position: relative;
				padding: {
					top: 4px;
					right: auto;
					bottom: 4px;
					left: 8px;
				}
				background-color: $blue-50;
				border-color: $blue-200;
				color: $blue-500;

				.select2-selection__choice__remove {
					order: 2;
					width: 14px;
					height: 14px;
					margin: {
						right: 0;
						left: 4px;
					}
					color: $blue-300;
					text-indent: 100%;
					white-space: nowrap;
					overflow: hidden;

					&:hover {
						color: $blue-500;
					}

					&:before {
						content: "";
						$icon-size: 14px;
						display: block;
						width: $icon-size;
						height: $icon-size;
						top: 0;
						left: 0;
						background-color: currentColor;
						border: none;
						border-radius: 0;
						-webkit-mask-size: contain;
						mask-size: contain;
						-webkit-mask-repeat: no-repeat;
						mask-repeat: no-repeat;
						-webkit-mask-position: center;
						mask-position: center;
						-webkit-mask-image: url("../../images/icons/icon-close.svg");
						mask-image: url("../../images/icons/icon-close.svg");
					}
				}
			}
		}
	}
}

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

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

/*-----------------------------------------------------------------------------
*
*  True / False
*
*-----------------------------------------------------------------------------*/
.acf-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: fit-content;
	max-width: 100%;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	background: #f5f5f5;
	height: 30px;
	vertical-align: middle;
	border: $wp-input-border 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: #007cba 0 1px 0;
		overflow: hidden;
	}

	.acf-switch-off {
		overflow: hidden;
	}

	.acf-switch-slider {
		position: absolute;
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 50%;
		z-index: 1;
		background: #fff;
		border-radius: 3px;
		border: $wp-input-border 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,
	&.-focus {
		border-color: #0071a1;
		background: #f3f5f6;
		color: #016087;
		.acf-switch-slider {
			border-color: #0071a1;
		}
	}

	/* active */
	&.-on {
		background: #0d99d5;
		border-color: #007cba;

		.acf-switch-slider {
			left: 50%;
			right: 2px;
			border-color: #007cba;
		}

		/* hover */
		&:hover {
			border-color: #007cba;
		}
	}

	/* message */
	+ span {
		margin-left: 6px;
	}

	// WP Admin 3.8
	@include wp-admin("3-8") {
		border-color: $wp-card-border;
		.acf-switch-slider {
			border-color: $wp-card-border;
		}

		&:hover,
		&.-focus {
			border-color: #0071a1;
			.acf-switch-slider {
				border-color: #0071a1;
			}
		}

		&.-on {
			border-color: #007cba;
			.acf-switch-slider {
				border-color: #007cba;
			}
			&:hover {
				border-color: #007cba;
			}
		}
	}
}

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

.acf-admin-single-field-group .acf-true-false {
	border: 1px solid transparent;

	&:focus-within {
		border: 1px solid $blue-400;
		border-radius: 120px;
	}
}

.acf-true-false:has(.acf-switch) {

	label {
		display: flex;
		align-items: center;
		justify-items: center;
	}
}

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

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

.acf-google-map {
	position: relative;
	border: $wp-card-border solid 1px;
	background: #fff;

	.title {
		position: relative;
		border-bottom: $wp-card-border 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-loading {
			position: absolute;
			top: 10px;
			right: 11px;
			display: none;
		}

		// Avoid icons disapearing when click/blur events conflict.
		.acf-icon:active {
			display: inline-block !important;
		}
	}

	.canvas {
		height: 400px;
	}

	// Show actions on hover.
	&:hover .title .acf-actions {
		display: block;
	}

	// Default state (show locate, hide search and cancel).
	.title {
		.acf-icon.-location {
			display: inline-block;
		}
		.acf-icon.-cancel,
		.acf-icon.-search {
			display: none;
		}
	}

	// Has value (hide locate, show cancel).
	&.-value .title {
		.search {
			font-weight: bold;
		}
		.acf-icon.-location {
			display: none;
		}
		.acf-icon.-cancel {
			display: inline-block;
		}
	}

	// Is searching (hide locate, show search and cancel).
	&.-searching .title {
		.acf-icon.-location {
			display: none;
		}
		.acf-icon.-cancel,
		.acf-icon.-search {
			display: inline-block;
		}

		// Show actions.
		.acf-actions {
			display: block;
		}

		// Change search font-weght.
		.search {
			font-weight: normal !important;
		}
	}

	// 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;
	border: $wp-card-border solid 1px;

	// Filters.
	.filters {
		@include clearfix();
		border-bottom: $wp-card-border solid 1px;
		background: #fff;

		.filter {
			margin: 0;
			padding: 0;
			float: left;
			width: 100%;
			box-sizing: border-box;
			padding: 7px 7px 7px 0;
			&:first-child {
				padding-left: 7px;
			}

			// inputs
			input,
			select {
				margin: 0;
				float: none; /* potential fix for media popup? */

				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
				}
			}
			input {
				border-color: transparent;
				box-shadow: none;
				padding-left: 3px;
				padding-right: 3px;
			}
		}

		/* 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;
			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, &.relationship-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 {
		@include clearfix();
		position: relative;

		.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, .acf-rel-item.relationship-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;
		}

		.wp-editor-area {
			padding: 10px;
			border: none;
			color: inherit !important; // Fixes white text bug.
		}
	}

	iframe {
		min-height: 200px;
	}

	.wp-editor-container {
		border: 1px solid $wp-card-border;
		box-shadow: none !important;
	}

	.wp-editor-tabs {
		box-sizing: content-box;
	}

	.wp-switch-editor {
		border-color: $wp-card-border;
		border-bottom-color: transparent;
	}
}

// Full Screen Mode.
#mce_fullscreen_container {
	z-index: 900000 !important;
}

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

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

// class to hide fields
.hidden-by-tab {
	display: none !important;
}

// ensure floating fields do not disturb tab wrap
.acf-tab-wrap {
	clear: both;
	z-index: 1;
	overflow: auto;
}

// tab group
.acf-tab-group {
	border-bottom: #ccc solid 1px;
	padding: 10px 10px 0;

	li {
		margin: 0 0.5em 0 0;

		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;
			}

			&:empty {
				display: none;
			}
		}

		// rtl
		html[dir="rtl"] & {
			margin: 0 0 0 0.5em;
		}

		// 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;

	// group
	.acf-tab-group {
		position: relative;
		border-top: $wp-card-border solid 1px;
		border-bottom: $wp-card-border solid 1px;

		// Pull next element (field) up and underneith.
		z-index: 2;
		margin-bottom: -1px;

		// 		li a {
		// 			background: #f1f1f1;
		// 			border-color: $wp-card-border;
		//
		// 			&:hover {
		// 				background: #FFF;
		// 			}
		// 		}
		//
		// 		li.active a {
		// 			background: #FFFFFF;
		// 		}

		// WP Admin 3.8
		@include wp-admin("3-8") {
			border-color: $wp38-card-border-1;
		}
	}

	// first child
	// fixes issue causing double border-top due to WP postbox .handlediv
	// &:first-child .acf-tab-group {
	// 	border-top: none;
	// }
}

// inside acf-fields.-left
.acf-fields.-left > .acf-tab-wrap {
	// group
	.acf-tab-group {
		padding-left: 20%;

		/* mobile */
		@media screen and (max-width: $sm) {
			padding-left: 10px;
		}

		/* rtl */
		html[dir="rtl"] & {
			padding-left: 0;
			padding-right: 20%;

			/* mobile */
			@media screen and (max-width: 850px) {
				padding-right: 10px;
			}
		}
	}
}

// left
.acf-tab-wrap.-left {
	// group
	.acf-tab-group {
		position: absolute;
		left: 0;
		width: 20%;
		border: 0 none;
		padding: 0 !important; /* important overrides 'left aligned labels' */
		margin: 1px 0 0;

		// li
		li {
			float: none;
			margin: -1px 0 0;

			a {
				border: 1px solid #ededed;
				font-size: 13px;
				line-height: 18px;
				color: #0073aa;
				padding: 10px;
				margin: 0;
				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;
			}
		}

		// rtl
		html[dir="rtl"] & {
			left: auto;
			right: 0;

			li.active a {
				margin-right: 0;
				margin-left: -1px;
			}
		}
	}

	// space before field
	.acf-field + &:before {
		content: "";
		display: block;
		position: relative;
		z-index: 1;
		height: 10px;
		border-top: #dfdfdf solid 1px;
		border-bottom: #dfdfdf solid 1px;
		margin-bottom: -1px;
	}

	// first child has negative margin issues
	&:first-child {
		.acf-tab-group {
			li:first-child a {
				border-top: none;
			}
		}
	}
}

/* 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;
		}
	}

	// 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;
			}
		}
	}

	// fix double border
	> .acf-field-tab + .acf-field {
		border-top: none;
	}
}

// clear
.acf-fields.-clear > .acf-tab-wrap {
	background: transparent;

	// group
	.acf-tab-group {
		margin-top: 0;
		border-top: none;
		padding-left: 0;
		padding-right: 0;

		li a {
			background: #e5e5e5;

			&:hover {
				background: #fff;
			}
		}

		li.active a {
			background: #f1f1f1;
		}
	}
}

/* seamless */
.acf-postbox.seamless {
	// sidebar
	> .acf-fields.-sidebar {
		margin-left: 0 !important;

		&:before {
			background: transparent;
		}
	}

	// default
	> .acf-fields > .acf-tab-wrap {
		background: transparent;
		margin-bottom: 10px;
		padding-left: $fx;
		padding-right: $fx;

		.acf-tab-group {
			border-top: 0 none;
			border-color: $wp-card-border;

			li a {
				background: #e5e5e5;
				border-color: $wp-card-border;

				&:hover {
					background: #fff;
				}
			}

			li.active a {
				background: #f1f1f1;
			}
		}
	}

	// left tabs
	> .acf-fields > .acf-tab-wrap.-left {
		&:before {
			border-top: none;
			height: auto;
		}

		.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;
			}
		}
	}
}

// menu
.menu-edit,
.widget {
	.acf-fields.-clear > .acf-tab-wrap .acf-tab-group li {
		a {
			background: #f1f1f1;
		}
		a:hover,
		&.active a {
			background: #fff;
		}
	}
}

.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 .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: $wp-card-border solid 1px;
	background: #fff;

	.title {
		position: relative;
		border-bottom: $wp-card-border solid 1px;
		padding: 5px 10px;

		.input-search {
			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;
		}

		.acf-actions {
			padding: 6px;
		}
	}

	.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 {
			@include centered();
			z-index: 0;

			height: 42px;
			width: 42px;
			font-size: 42px;
			color: #999;
		}

		.acf-loading-overlay {
			background: rgba(255, 255, 255, 0.9);
		}

		.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
	&.has-value {
		.canvas {
			min-height: 50px;
		}

		.input-search {
			font-weight: bold;
		}

		.title:hover .acf-actions {
			display: block;
		}
	}
}

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

.acf-image-uploader {
	@include clearfix();
	position: relative;

	p {
		margin: 0;
	}

	/* image wrap*/
	.image-wrap {
		position: relative;
		float: left;

		img {
			max-width: 100%;
			max-height: 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: $wp-card-border 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: $wp-card-border-1 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;
	}
}

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

.acf-taxonomy-field {
	position: relative;

	.categorychecklist-holder {
		border: $wp-card-border 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-ftype="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: 5em;
		padding-right: 4px;
		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;
		}
	}
}

/*-----------------------------------------------------------------------------
*
*  acf-accordion
*
*-----------------------------------------------------------------------------*/

.acf-accordion {
	margin: -1px 0;
	padding: 0;
	background: #fff;
	border-top: 1px solid $wp-card-border-1;
	border-bottom: 1px solid $wp-card-border-1;
	z-index: 1; // Display above following field.

	// Title.
	.acf-accordion-title {
		margin: 0;
		padding: 12px;
		font-weight: bold;
		cursor: pointer;
		font-size: inherit;
		font-size: 13px;
		line-height: 1.4em;

		&:hover {
			background: #f3f4f5;
		}

		label {
			margin: 0;
			padding: 0;
			font-size: 13px;
			line-height: 1.4em;
		}

		p {
			font-weight: normal;
		}

		.acf-accordion-icon {
			float: right;
		}

		// Gutenberg uses SVG.
		svg.acf-accordion-icon {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			color: #191e23;
			fill: currentColor;
		}
	}

	.acf-accordion-content {
		margin: 0;
		padding: 0 12px 12px;
		display: none;
	}

	// Open.
	&.-open {
		> .acf-accordion-content {
			display: block;
		}
	}
}

// Field specific overrides
.acf-field.acf-accordion {
	margin: -1px 0;
	padding: 0 !important; // !important needed to avoid Gutenberg sidebar issues.
	border-color: $wp-card-border-1;

	.acf-label.acf-accordion-title {
		padding: 12px;
		width: auto;
		float: none;
		width: auto;
	}

	.acf-input.acf-accordion-content {
		padding: 0;
		float: none;
		width: auto;

		> .acf-fields {
			border-top: $wp-card-border-2 solid 1px;

			&.-clear {
				padding: 0 $fx $fy;
			}
		}
	}
}

/* field specific (left) */
.acf-fields.-left > .acf-field.acf-accordion {
	&:before {
		display: none;
	}

	.acf-accordion-title {
		width: auto;
		margin: 0 !important;
		padding: 12px;
		float: none !important;
	}

	.acf-accordion-content {
		padding: 0 !important;
	}
}

/* field specific (clear) */
.acf-fields.-clear > .acf-field.acf-accordion {
	border: #cccccc solid 1px;
	background: transparent;

	+ .acf-field.acf-accordion {
		margin-top: -16px;
	}
}

/* table */
tr.acf-field.acf-accordion {
	background: transparent;

	> .acf-input {
		padding: 0 !important;
		border: #cccccc solid 1px;
	}

	.acf-accordion-content {
		padding: 0 12px 12px;
	}
}

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

#addtag > .acf-field.acf-accordion {
	padding-right: 0;
	margin-right: 5%;

	+ p.submit {
		margin-top: 0;
	}
}

/* border */
tr.acf-accordion {
	margin: 15px 0 !important;

	+ tr.acf-accordion {
		margin-top: -16px !important;
	}
}

/* seamless */
.acf-postbox.seamless > .acf-fields > .acf-accordion {
	margin-left: $field_padding_x;
	margin-right: $field_padding_x;
	border: $wp-card-border solid 1px;
}

/* rtl */
html[dir="rtl"] .acf-accordion {
}

/* menu item */
/*
.menu-item-settings > .field-acf > .acf-field.acf-accordion {
	border: #dfdfdf solid 1px;
	margin: 10px -13px 10px -11px;

	+ .acf-field.acf-accordion {
		margin-top: -11px;
	}
}
*/

/* widget */
.widget .widget-content > .acf-field.acf-accordion {
	border: #dfdfdf solid 1px;
	margin-bottom: 10px;

	.acf-accordion-title {
		margin-bottom: 0;
	}

	+ .acf-field.acf-accordion {
		margin-top: -11px;
	}
}

// media modal
.media-modal .compat-attachment-fields .acf-field.acf-accordion {
	// siblings
	+ .acf-field.acf-accordion {
		margin-top: -1px;
	}

	// input
	> .acf-input {
		width: 100%;
	}

	// table
	.compat-attachment-fields > tbody > tr > td {
		padding-bottom: 5px;
	}
}

/*-----------------------------------------------------------------------------
*
*	Block Editor
*
*-----------------------------------------------------------------------------*/
.block-editor {
	// Sidebar
	.edit-post-sidebar {
		// Remove metabox hndle border to simulate component panel.
		.acf-postbox {
			> .postbox-header,
			> .hndle {
				border-bottom-width: 0 !important;
			}
			&.closed {
				> .postbox-header,
				> .hndle {
					border-bottom-width: 1px !important;
				}
			}
		}

		// Field wrap.
		.acf-fields {
			min-height: 1px;
			overflow: auto; // Fixes margin-collapse issue in WP 5.3.

			> .acf-field {
				border-width: 0;
				border-color: #e2e4e7;
				margin: 0px;
				padding: 10px 16px;

				// Force full width.
				width: auto !important;
				min-height: 0 !important;
				float: none !important;

				// Field labels.
				> .acf-label {
					margin-bottom: 5px;
					label {
						font-weight: normal;
					}
				}

				// Accordions.
				&.acf-accordion {
					padding: 0;
					margin: 0;
					border-top-width: 1px;

					&:first-child {
						border-top-width: 0;
					}

					.acf-accordion-title {
						margin: 0;
						padding: 15px;
						label {
							font-weight: 500;
							color: rgb(30, 30, 30);
						}

						svg.acf-accordion-icon {
							right: 16px;
						}
					}

					.acf-accordion-content {
						> .acf-fields {
							border-top-width: 0;
						}
					}
				}
			}
		}

		.block-editor-block-inspector{
			// The Top level notice for all fields.
			.acf-fields > .acf-notice {
				display: grid;
				grid-template-columns: 1fr 25px;
				padding: 10px;
				margin: 0;
			}
			.acf-fields > .acf-notice p:last-of-type {
				margin: 0;
			}
			.acf-fields > .acf-notice > .acf-notice-dismiss {
				position: relative;
				top: unset;
				right: unset;
			}

			// The notice below each field.
			.acf-fields .acf-field .acf-notice {
				margin: 0;
				padding: 0;
			}

			.acf-fields .acf-error {
				margin-bottom: 10px;
			}
		}
	}
}

/*-----------------------------------------------------------------------------
*
*  Prefix field label & prefix field names
*
*-----------------------------------------------------------------------------*/
.acf-field-setting-prefix_label,
.acf-field-setting-prefix_name {
	p.description {
		order: 3;
		margin: {
			top: 0;
			left: 16px;
		}

		code {
			padding: {
				top: 4px;
				right: 6px;
				bottom: 4px;
				left: 6px;
			}
			background-color: $gray-100;
			border-radius: 4px;
			@extend .p7;
			color: $gray-500;
		}
	}
}

/*-----------------------------------------------------------------------------
*
*  Editor tab styles
*
*-----------------------------------------------------------------------------*/

.acf-fields > .acf-tab-wrap:first-child .acf-tab-group {
	border-top: none;
}

.acf-fields > .acf-tab-wrap .acf-tab-group li.active a {
	background: #ffffff;
}

.acf-fields > .acf-tab-wrap .acf-tab-group li a {
	background: #f1f1f1;
	border-color: #ccd0d4;
}

.acf-fields > .acf-tab-wrap .acf-tab-group li a:hover {
	background: #fff;
}