@import '_admin-variables';
@import 'settings';

@keyframes deal_blur {
	0%,
	60% {
		filter: grayscale(0)
	}
	30% {
		filter: grayscale(.2);
	}
}


.select2-container--acs2 .-listkeys .select2-results>.select2-results__options {
	max-height: 50vh;
}

/**
 * UI Sortable Plugin
 * ----------------------------------------------------------------------------
 */
.ui-sortable-helper {
	-webkit-box-shadow: 1px 3px 6px 0 rgba(1, 1, 1, 0.4);
	box-shadow: 1px 3px 6px 0 rgba(1, 1, 1, 0.4);

	.column-meta {
		border-width: 1px;
	}
}

/**
 * Dashicons used on list screens
 * ----------------------------------------------------------------------------
 */
.ac-column {
	span.select2-container {
		z-index: 1;
	}

	.comment-grey-bubble {
		height: 16px;
		width: 16px;
	}

	.comment-grey-bubble:before {
		content: '\f101';
		font: normal 20px/.5 'dashicons';
		speak: none;
		display: inline-block;
		padding: 0;
		top: 5px;
		left: 0;
		position: relative;
		vertical-align: top;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-decoration: none !important;
	}
}

.rtl {
	.ac-column {
		.comment-grey-bubble:before {
			right: 0;
			left: auto;
		}
	}
}

/**
 * Structure
 * ----------------------------------------------------------------------------
 */
#add-new-column-template {
	display: none;
}

.ac-admin {
	$e: &;
	max-width: 1400px;

	&__wrap {
		display: flex;
		flex-direction: column-reverse;

		@media only screen and (min-width: 1200px) {
			flex-direction: row-reverse;

			#{$e}__main {
				flex: 1 1 auto;
			}

			#{$e}__sidebar {
				flex: 0 0 280px;
				margin-left: 20px;
			}

			.rtl & {
				#{$e}__sidebar {
					flex: 0 0 280px;
					margin-left: 0;
					margin-right: 20px;
				}
			}
		}
		@media only screen and (min-width: 1500px) {
			#{$e}__sidebar {
				flex: 0 0 340px;
			}
		}
	}

	&__main {

		.column-footer {
			a.add_column {
				padding-left: 16px;
				padding-right: 16px;
				text-align: center;
			}

			a.submit.save,
			a.submit.update {
				padding-left: 20px;
				padding-right: 20px;
				text-align: center;
			}

			.submit.save {
				display: inline-block;
			}

			.submit.update {
				display: none;
			}

			.spinner {
				display: none;
			}
		}
	}

	&.saving {
		.spinner {
			visibility: visible;
		}

		.column-footer {
			.spinner {
				margin: 4px 0 0;
				background-position: center center;
				float: none;
				display: inline-block;
				visibility: visible;
			}
		}
	}

	&.stored {
		#{$e}__sidebar {
			.form-actions {
				.submit {
					&.save {
						display: none;
					}

					&.update {
						display: block;
					}
				}

				.form-reset {
					display: block;
				}
			}
		}

		.column-footer {
			.submit {
				&.save {
					display: none;
				}

				&.update {
					display: inline-block;
				}
			}
		}
	}

	&.show-list-screen-type .ac-admin__sidebar .sidebox.form-actions small.list-screen-type,
	&.show-list-screen-id .ac-admin__sidebar .sidebox.form-actions small.list-screen-id {
		display: block;
	}

	&.show-list-screen-id .layouts__item__title small.layouts__item__id {
		display: block;
		line-height: 14px;
		padding: 0;
		margin: 0 0 10px 0;
	}
}

/**
 * Columns
 * ----------------------------------------------------------------------------
 */
.ac-admin__main {

	.ac-notice {
		background: #fff;
		border-left: 4px solid var(--ac-notification-yellow);
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		padding: 1px 12px;
	}

	.ajax-message {
		display: none;
	}

	.ac-message {
		margin-top: 0 !important;

		p {
			min-height: 1px;
			overflow: hidden;
		}

		> .dashicons {
			float: left;
			margin-top: 6px;
			color: #b7b7b7;
			margin-right: 5px;
		}

		&.notice-info {
			border-left: 4px solid var(--ac-notification-blue);
		}
	}

	.ac-boxes {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

		&.show-column-id {
			div.ac-column-header table tr td.column_label .inner small.column-id {
				display: inline;
			}
		}

		&.show-column-type {
			div.ac-column-header table tr td.column_label .inner small.column-type {
				display: inline;
			}
		}

	}
}

/**
 * Column States
 * ----------------------------------------------------------------------------
 */
.ac-column {

	a {
		cursor: pointer;

		&:focus, &:active {
			box-shadow: none;
		}
	}

	// Loading state
	&.loading .ac-column-body {
		> .spinner {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 200;
			margin-left: -10px;
			margin-top: -10px;
			display: block;
		}

		&:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: #FFF;
			z-index: 100;
			opacity: 0.5;
		}
	}

	// Open state
	&.opened {
		margin-bottom: -1px;

		.ac-column-header {
			background-color: $bg-gray-dark;
			border-color: $border-gray-darker;

			&:hover {
				.column_label .inner > a.close-button {
					display: inline-block;
				}
			}

			.column_edit:after {
				content: "\f142";
			}

			table {

				td {
					border-color: var(--ac-border-grey);
					color: #333;
					text-shadow: 0 1px 0 #FFFFFF;

					a {
						color: #333;
						text-shadow: 0 1px 0 #FFFFFF;
					}

					&.column_sort span {
						color: #9b9b9b;
					}

					&.column_label {
						.meta {
							span {
								color: lighten(#808080, 5);
								text-shadow: none;
							}
						}

						a.edit-button {
							display: none;
						}
					}

					&.column_type {
						color: #5C5C5C;
					}

					&.column_edit:after {
						color: #9b9b9b;
					}
				}
			}
		}

		.ac-column-body {
			border: 1px solid $border-gray-darker;
			border-top: 1px solid lighten($border-gray-darker, 3);
		}
	}

	&.disabled,
	.boxes.disabled & {
		opacity: 0.7;

		a.remove-button,
		a.clone-button,
		.column_action {
			display: none !important;

		}

		.column-meta {
			td.column_sort {
				display: none;
			}

			td.column_label {
				padding-left: 10px;
			}
		}

		// indicators
		.meta span {
			cursor: default !important;
			opacity: 0.45;

			&:before {
				color: #808080 !important;
			}

			&.on {
				opacity: 1;
			}
		}

		.column-footer {
			display: none;
		}

		.ac-column__header__features {
			cursor: not-allowed;

			span.ac-column-heading-setting {
				pointer-events: none;
			}
		}

		.ac-column-body {
			&:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				background: #FFF;
				z-index: 100;
				opacity: 0.3;
				cursor: not-allowed;
			}
		}
	}
}

/**
 * Column Settings
 * ----------------------------------------------------------------------------
 */
.ac-column-setting {
	width: 100%;
	clear: both;
	border-spacing: 0;
	margin: 0;
	border-top: 1px solid var(--ac-border-grey);

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

	tr {
		&.hide {
			display: none;
		}

		td {
			vertical-align: top;
			border: none;
			padding: 0;
			background: #fff;
		}
	}

	td.col-label {
		position: relative;
		line-height: 24px;
		overflow: visible;
		background: $bg-gray;
		border-right: 1px solid var(--ac-border-grey);
		width: 30%;
		padding: 10px;
		padding-left: 12px;

		.ac-pointer {
			position: absolute;
			right: 4px;
			top: 10px;
			padding: 4px;
			height: 17px;
		}

		a.more-link {
			text-decoration: none;
			color: #d2d2d2;
			position: absolute;
			right: 8px;
			top: 17px;

			span.dashicons {
				font-size: 17px;
			}

			&:hover {
				color: darken(#d2d2d2, 15);
			}
		}

		span.label {
			font-weight: bold;
			display: inline-block;
			color: #333333;
			font-style: normal;
		}

		div.tooltip {
			font-size: 12px;
			font-style: normal;
			line-height: 16px;
			margin: 0 !important;
			display: none;
			position: absolute;
			max-width: 200px;
			z-index: 99;
			top: 40px;
			left: 0;
			font-weight: normal;
			color: #fff;
			background-color: #333;
			box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
			padding: .618em 1em;
			border-radius: 3px;

			em {
				margin-top: 3px;
				display: block;
				color: #999;
			}
		}
	}

	td.col-input {

		div.msg {
			margin-top: 5px;
			display: none;
			color: #333;
			padding: 6px 10px;
			background-color: #ffebe8;
			border: 1px solid #fff;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;

			p {
				margin: 0.5em 0 1em 0;
			}

			a.button {
				margin-bottom: 1em;
			}
		}

		.help-msg {
			margin: 10px 0 0;
			color: #666;
			font-size: 13px;
		}
	}

	//Sub Setting
	.ac-column-setting {
		td.col_label {
			background-color: $bg-gray-light;

			.label {
				font-size: 12px;
				color: #595959;
			}
		}
	}

	span.ac-setting-error {
		display: block;
		margin: 0;
		background-color: $bg-red-light;
		padding: 7px 10px;
	}
}

.ac-column-setting-actions {
	.col-settings {
		p {
			padding-left: 10px;
		}

		a {
			text-decoration: none;

			&.close-button,
			&.clone-button {
				margin-right: 10px;
			}

			&.remove-button {
				color: #a00;
				text-decoration: none;
				text-shadow: none;
				margin-right: 5px;

				&:hover {
					color: #f00;
				}
			}
		}
	}
}

.ac-column .ac-setting-input {
	padding: 10px;
	line-height: 24px;

	.ac-toggle-v2 {
		margin-bottom: 0;
		.ac-toggle-v2__label {
			display: inline-block;
			transform: translateY(-3px);
		}
	}

	input[type=text], select {
		width: 99.95%;
		max-width: none;
	}

	input[type=checkbox],
	input[type=radio] {
		margin-right: 4px;
	}

	&__info {
		margin-left: 5px;
		transform: translateY(2px);
	}

	.checkbox-labels,
	.radio-labels {
		> label {
			padding-right: 10px;
			vertical-align: top;
		}

		&.vertical {
			input[type=radio] {
				margin-right: 6px;
			}

			> label {
				display: block;
				margin-bottom: 5px;
			}
		}
	}

	.ac-pointer {
		color: #8d8d8d;
		display: inline-block;
		transform: translateY(2px);
	}

	&__icon {
		display: inline-block;
		margin-right: 10px;

		&.-warning {
			transform: translateY(3px);
		}

		+ * {
			display: inline-block;
		}
	}
}

.ac-setting-input-date {

	.ac-setting-input-date__custom {
		display: inline-block;
		width: 110px !important;
		margin-right: 5px;
	}

	.ac-setting-input-date__value {
		display: inline-block;
		width: 165px;
	}

	.ac-setting-input-date__example {
		margin-left: 8px;

		.spinner {
			float: none;
			vertical-align: top;
		}
	}

	code {
		display: inline-block;
		min-width: 60px;
		padding-top: 0;
		padding-bottom: 0;
		text-align: center;
	}
}

.ac-setting-input-width {
	position: relative;

	div.description {
		font-size: 12px;
		width: 72px;
		position: absolute;
		display: table;

		input {
			margin: 0;
			text-align: right;
			vertical-align: middle;
			display: table-cell;
			padding-left: 4px;
			padding-right: 4px;
			border-color: #7e8993;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;

			@include placeholder {
				font-size: 13px;
			}
		}

		span {
			background: #efefef;
			display: table-cell;
			width: 26px;
			line-height: 23px;
			text-align: center;
			vertical-align: middle;
			border: 1px solid #7e8993;
			border-left: none;
			color: #505050;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}

	div.width-slider {
		margin-left: 82px;
		margin-right: 88px;
		position: relative;
		top: 8px;

		.ui-slider-handle {
			cursor: ew-resize;
			z-index: 1;
		}
	}

	div.unit-select {
		position: absolute;
		top: 11px;
		right: 6px;
		width: 82px;
		text-align: right;

		.radio-labels {
			padding: 0;

			label {
				padding: 0;
				margin-right: 6px;

				input {
					margin-right: 2px;
				}
			}
		}
	}
}

.ac-column-setting--pro {

	.col-label {
		.dashicons {
			color: #A99D9F;
			transform: scale(.9, .9);
			margin-top: 2px;
			display: inline-block;
			margin-right: 3px;
			cursor: pointer;
		}
	}

	td.col-input {
		background: #f5f5f5;
	}

	.radio-labels {
		display: inline-block;

		input {
			background-color: #F0F0F0;

			&:checked:before {
				background-color: #808080;
			}
		}
	}

	.ac-setting-input {
		background: $bg-gray;
	}

	.acp-button {
		background: $ac-pink;
		color: #fff;
		border: none;
		border-radius: 3px;
		padding: 3px 10px;
		letter-spacing: 2px;
		cursor: pointer;
		font-size: 13px;
		vertical-align: middle;
		margin-top: -1px;
		margin-left: 5px;
	}
}

/**
 * Column Header
 * ----------------------------------------------------------------------------
 */
div.ac-column-header {
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px 1px 0;
	background: #fcfcfc;

	&:nth-child(2n) .column-meta {
		background: #f9f9f9;
	}

	img {
		margin-right: 3px;
	}

	table.widefat {
		border: none;
	}

	table {
		border: none;
		background: transparent;
		border-radius: 0;

		tr {
			td {
				vertical-align: top;
				height: 18px;
				padding: 12px 8px;
				border-width: 1px 0 0;
				border-style: solid;
				border-color: transparent;
			}

			// td

			&:hover {
				td.column_sort {
					span {
						color: #9b9b9b;
					}
				}
			}
		}

		// tr
	}

	// table

	&:hover {
		.column_label .inner > a {
			&.remove-button,
			&.edit-button,
			&.clone-button {
				display: inline-block;
			}
		}
	}

	// WP Default icons
	span.vers {
		padding-top: 2px;
	}

}

/**
 * Column Body
 * ----------------------------------------------------------------------------
 */
.ac-column-body {
	display: none;
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: #dfdfdf;
	position: relative;
}

/**
 * Column: Footer
 * ----------------------------------------------------------------------------
 */
.column-footer {
	background: #EAF2FA;
	border: 1px solid #c7d7e2;
	min-height: 26px;
	padding: 8px;
	overflow: hidden;

	.order-message {
		color: #7A9BBE;
		float: left;
		font-family: Comic Sans MS, sans-serif;
		font-size: 11px;
		height: 13px;
		position: relative;
		line-height: 1em;
		margin-left: 4px;
		padding: 7px 0 0 22px;
		text-shadow: 0 1px 0 #FFFFFF;
		display: inline-block;

		&__icon {
			display: inline-block;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.button-container {
		float: right;
		display: inline-block;
		min-height: 29px;

		a {
			display: inline-block;
			margin-left: 5px;
			vertical-align: top;

			&.clear-columns {
				color: var(--ac-notification-red);
				text-decoration: none;
				margin-right: 8px;
				margin-top: 5px;

				&:hover {
					opacity: .9;
				}
			}
		}
	}
}

/**
 * Sidebar
 * ----------------------------------------------------------------------------
 */
.ac-admin__sidebar {
	.sidebox {
		background: none repeat scroll 0 0 #FFFFFF;
		border: 1px solid var(--ac-border-grey);
		border-radius: 0 0 0 0;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		position: relative;
		margin-bottom: 14px;

		h3 {
			padding: 10px;
			margin: 0;
			position: relative;

			&.title {
				font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
				font-size: 15px;
				font-weight: normal;
				line-height: 1;
				margin: 0;
				padding: 7px 10px;
				background: #f1f1f1;
				background-image: linear-gradient(to top, #ececec, #f9f9f9);
				border-bottom-color: var(--ac-border-grey);
				text-shadow: #fff 0 1px 0;
				box-shadow: 0 1px 0 #fff;
				border-bottom-style: solid;
				border-bottom-width: 1px;
			}

			span.left {
				position: relative;
				background: #fff;
				z-index: 2;
				padding-right: 8px;
				float: none;
			}

			span.contenttype {
				display: block;
				line-height: 20px;
				font-size: 12px;
				text-transform: uppercase;
				color: #808080;
				margin-top: 4px;
				max-width: 250px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;

				&.right {
					position: absolute;
					display: inline-block;
					z-index: 1;
					right: 10px;
					text-align: right;
					margin-top: 0;
				}
			}
		}

		.inside {
			padding: 10px;

			p {
				margin-top: 0;
			}
		}

		&.form-actions {

			small.list-screen-id,
			small.list-screen-type {
				display: none;
				line-height: 25px;

			}

			.form-reset {
				display: none;
				border-bottom: 1px solid var(--ac-border-grey);
				padding: 8px;
			}

			.reset-column-type {
				text-decoration: none;
				color: var(--ac-notification-red);
				line-height: 25px;
				display: inline-block;
				background: none;
				border: none;
				padding: 0;
				font-size: 13px;
				cursor: pointer;
				margin: 0;

				&:hover {
					opacity: .9;
				}
			}

			.form-update {
				padding: 8px;
				overflow: hidden;
			}

			.submit {
				display: none;
				width: 100%;
				height: 28px;
				line-height: 28px;
				text-align: center;

				&.save {
					display: block;
				}
			}
		}

		&#direct-feedback {
			#feedback-support,
			#feedback-rate {
				display: none;
			}

			.inside {
				> a {
					border-radius: 4px;
					border: 1px solid var(--ac-border-grey);
					width: 48%;
					height: 64px;
					text-align: center;
					line-height: 64px;
					font-weight: bold;
					color: #222;
					display: inline-block;
					text-decoration: none;

					&:hover {
						background: #FAFAFA;
					}
				}

				form {
					textarea {
						width: 100%;
						height: 120px;
					}

					input[type="submit"] {
						display: inline-block;
						float: right;
						border-radius: 4px;
						border: 1px solid var(--ac-border-grey);
						height: 32px;
						text-align: center;
						line-height: 32px;
						font-weight: bold;
						font-size: 12px;
						padding: 0 32px;
						color: #CCC;
						background: none;
						text-decoration: none;
						cursor: pointer;

						&:hover {
							background: #FAFAFA;
						}
					}

					p.description {
						float: left;
						font-size: 10px;
					}
				}

				ul {
					margin: 0;

					&.share {
						li {
							margin: 0;
							display: block;
							float: left;
							margin-left: 9px;
							width: 30%;

							a {
								text-decoration: none;
								vertical-align: middle;
								line-height: 20px;
								padding: 16px 0;
								width: 100%;
								text-align: center;
								border: 1px solid var(--ac-border-grey);
								border-radius: 4px;
								display: block;

								&:hover {
									background: #FAFAFA;
								}
							}

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

			#feedback-support .inside ul.share li {
				width: 48%;
			}
		}
	}
}

/**
 * Side box
 * ----------------------------------------------------------------------------
 */
#ac-pro-version {
	background: none;

	.padding-box {
		padding: 20px 10px 10px;
		background: $ac-dark;
		color: #fff;
	}

	.nopadding {
		margin: 0;
		padding: 0;
	}

	h2 {
		color: #fff;
	}

	h3 {
		font-size: 34px;
		line-height: 40px;

		a {
			text-decoration: none;
			color: #fff;

			span {
				color: $ac-pink;
			}
		}
	}

	sup {
		text-decoration: line-through;
		font-size: 13px;
		color: #ccc;
	}

	.ac-pro-prices {
		margin: 8px 0 0;
		font-style: italic;
	}

	.acp-button {
		background: $ac-pink;
		border: none;
		color: #fff;
		text-decoration: none;
		text-align: center;
		display: block;
		padding: 6px 20px;
		border-radius: 3px;
		cursor: pointer;
	}

	.more {
		color: $ac-yellow;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	p {
		&.center {
			text-align: center;
		}

		&.nomargin {
			margin-bottom: 0;
		}
	}

	ul {

		&.features {
			a:hover {
				text-decoration: underline;
			}
		}

		li {
			padding-bottom: 3px;

			a {
				color: #fff;
				text-decoration: none;
				padding-left: 25px;
				position: relative;
				display: block;

				&:before {
					content: '\2713';
					font-weight: bold;
					font-size: 16px;
					position: absolute;
					left: 0;
					top: 0;
				}
			}

			&.acp-integration {
				padding: 0;
				min-height: 23px;
				line-height: 23px;

				img {
					height: 23px;
					display: inline-block;
					vertical-align: middle;
					margin-right: 3px;

					&.ac-addon-pods {
						margin-top: -4px;
					}

					&.ac-addon-types {
						height: 18px
					}

					&.cac-addon-acf {
						margin-top: -4px;
						height: 15px
					}
				}

				a {
					color: $ac-yellow;

					&:before {
						content: '+';
					}
				}
			}
		}
	}

	.padding-box.ac-pro-deal {
		backface-visibility: hidden;
		transform: translateZ(0);
		color: $ac-dark;
		padding-bottom: 20px;
		text-align: center;
		background: lighten($ac-yellow, 2);
		animation: deal_blur 2s ease 0s infinite;

		h3 {
			font-size: 20px;
			line-height: 26px;
			padding-top: 0;
			padding-bottom: 0;
			margin-bottom: 18px;
		}

		a.acp-button {
			font-size: 16px;
		}
	}

	.padding-box.ac-pro-newsletter {
		background: #fff;
		color: $ac-dark;

		h3 {
			font-size: 20px;
			padding-bottom: 0;
		}

		input {
			width: 100%;
			margin-bottom: 8px;


		}

		.acp-button {
			margin-top: 12px;
			margin-bottom: 0;
			padding: 7px 20px;
		}
	}

	.acp-button {
		background: $ac-pink;
		border: none;
		color: #fff;
		text-decoration: none;
		text-align: center;
		display: block;
		padding: 6px 20px;
		border-radius: 3px;
	}
}

/**
 * Label Settings
 * ----------------------------------------------------------------------------
 */
.ac-column-setting--label {
	.ac-setting-input__container {
		position: relative;

		input {
			height: 28px;
			line-height: 28px;
			padding-right: 34px;
		}

		.ac-setting-label-icon {
			background: #fff;
			position: absolute;
			top: 4px;
			height: 22px;
			color: #ccc;
			right: 0;
			border: none;
			cursor: pointer;
			outline: none !important;
			transition: color .1s;

			&:hover, &:focus {
				color: #999;
			}

			&:active {
				color: var(--ac-primary-color);
			}
		}
	}
}

.ac-ipicker {

	&__modal {
		background: #fff;
		max-width: 90%;
		width: 770px;
		height: 450px;
		display: flex;
		padding: 20px;
	}

	&.fixed {
		position: fixed;
		z-index: 99999;
		background: rgba(0, 0, 0, .8);
		display: flex;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: auto;
		align-items: center;
		justify-content: center;
	}

	&__icons {
		flex: 1 1 auto;

		&__group__title {
			display: block;
			clear: both;
			padding-top: 15px;
			margin-top: 20px;
			margin-bottom: 10px;
			font-size: 16px;
			font-weight: normal;

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

	&__icon {
		display: inline-block;
		width: 49px;
		height: 49px;
		text-align: center;
		white-space: nowrap;
		cursor: pointer;

		.dashicons {
			width: 49px;
			height: 49px;
			line-height: 49px;
			font-size: 28px;
		}

		&:hover, &:focus {
			color: var(--ac-primary-color);
		}

		&.active {
			background: var(--ac-primary-color);
			color: #fff;
		}

	}

	&__handles {
		flex: 0 0 100px;
		text-align: center;
		padding-top: 20px;
	}
}

/**
 * Modal
 */
.ac-modal.-pro {
	$e: '.ac-modal';

	#{$e}__dialog {
		&__list {
			li {
				&:before {
					content: '\f147';
					font-family: Dashicons, sans-serif;
					position: absolute;
					left: 0;
					top: 0;
					color: #3D4350;
				}

				&:nth-child(2n) {
					color: $ac-pink;
				}

				position: relative;
				padding-left: 25px;
				font-weight: 400;
				font-size: 16px;
				letter-spacing: 0.5px;
				margin-bottom: 10px;
			}
		}

		&__mascot {
			position: absolute;
			right: 20px;
			bottom: 20px;
			width: 150px;
			height: 225px;
			z-index: 4;

		}

		&__footer {
			.button {
				margin-left: 0;
				padding-left: 15px;
				padding-right: 15px;
			}

			span {
				display: inline-block;
				margin-top: 4px;
				margin-left: 10px;
				font-size: 14px;
			}
		}
	}

}

.ac-modal.-setting {
	$e: '.ac-modal';

	#{$e}__dialog {
		width: 970px;

		&__content {
			max-height: 400px;
		}

		&__footer {
			text-align: right;
			padding: 0 15px;

			input[type=search] {
				float: left;
				margin-top: 18px;
				width: 200px;
			}

			.button {
				display: inline-block;
				vertical-align: middle;
				padding-left: 30px;
				padding-right: 30px;
			}

			.ac-ipicker__selection {
				display: inline-block;
				vertical-align: middle;
				text-align: center;
				width: 68px;
				height: 68px;
				line-height: 58px;
				background: #E5E5E5;
				margin-right: 15px;
				color: #404040;

				.dashicons {
					width: 68px;
					height: 68px;
					line-height: 68px;
					font-size: 30px;
				}
			}

		}
	}
}

.ac-modal.-iconpicker {
	.ac-modal__dialog__content {
		overflow: hidden;
		overflow-y: scroll;
	}
}

.select2-container--acs2 {
	z-index: 2;

	.select2-dropdown.-customfields {
		.select2-results > .select2-results__options {
			max-height: 600px;
		}
	}
}

@keyframes loading_text {
	0% {
		background-position: -100%;
	}
	100% {
		background-position: 100%;
	}

}

.ac-loading-msg-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ac-loading-msg {
	display: inline-block;
	text-align: center;
	max-width: 300px;

	&__logo {
		width: 228px;
		text-align: center;
		margin-bottom: 15px;
	}

	&__content {
		position: relative;
		font-family: sans-serif;
		text-transform: uppercase;
		font-size: 1.3em;
		letter-spacing: 4px;
		overflow: hidden;
		color: #999;
		font-weight: 300;
		background-repeat: no-repeat;
		background-size: 60%;
	}
}

.ac-notice.visit-ls {
	display: none
}

.ac-setbox .select2-container .select2-search--inline .select2-search__field {
	margin-top: 0 !important;
}

.ac-column__header {
	$e: '.ac-column__header';
	background: #fafafa;
	display: flex;
	border: 1px solid var(--ac-border-grey);
	border-bottom: 0;

	&__move {
		font-size: 13px;
		padding: 10px 13px;
		cursor: move;
		display: flex;
		align-items: center;

		span {
			visibility: hidden;
		}
	}

	&:hover {
		#{$e}__move span {
			visibility: visible;
		}
	}

	&__label {
		display: flex;
		align-items: center;
		flex-grow: 1;

		&__link {
			color: #5a5a5a;
			font-weight: bold;
			margin-right: 15px;

			&:hover {
				color: #333;
			}
		}
	}

	&__actions {
		opacity: 0;

		a {
			font-size: 12px;
			margin-left: 5px;

			&.remove-button {
				color: var(--ac-notification-red);

				&:hover {
					opacity: .9;
				}
			}

			&.close-button {
				display: none;

				.ac-column-opened & {
					display: block;
				}
			}

			&.edit-button {
				.ac-column-opened & {
					display: none;
				}
			}
		}

	}

	&__info {
		small {
			display: none;
			margin-right: 3px;
		}

		.show-column-id & .column-id {
			display: inline;
		}

		.show-column-type & .column-type {
			display: inline;
		}
	}

	&:hover {
		#{$e}__actions {
			opacity: 1;
		}
	}

	&__features {
		display: flex;
		align-items: center;
		width: 180px;
		position: relative;

		@media screen and (max-width: 700px) {
			display: none;
		}

		.ac-column-heading-setting {
			color: #b2b2b2;
			font-size: 14px;

			&.-width {
				color: #737373;
				font-size: 12px;
				position: absolute;
				right: 150px;
			}
		}

		.ac-column-indicator {
			width: 25px;
			font-size: 22px;
			text-align: center;
			position: absolute;
			cursor: pointer;

			&.on {
				color: var(--ac-primary-color);
			}

			&.-export {
				font-size: 14px;
				transform: translateY(3px);
			}

			&.-edit {
				transform: translateY(-2px);
			}

			&.-search {
				font-size: 17px;
			}

			$features: ("-filter": 0, "-search": 1, "-bulk_edit": 2, "-edit": 3, "-sort":4, "-export":5);
			@each $feature, $position in $features {
				&.#{$feature} {
					right: $position * 25px;
				}
			}

		}

	}

	&__type {
		display: flex;
		align-items: center;
		justify-content: right;
		color: #999999;

		span {
			text-align: right;
			width: 150px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			@media screen and (max-width: 700px) {
				width: 200px;
			}
		}

	}

	&__arrow {
		color: #bdbdbd;
		padding: 15px;
		margin-left: auto;
		flex: 0 0 20px;
		transform-origin: center;
	}

	.ac-column.opened & {
		background: #eaeaea;
		border-color: #ccc;

		#{$e}__actions {
			.edit-button {
				display: none;
			}

			.close-button {
				display: inline;
			}
		}

		#{$e}__features {
			.ac-column-indicator:not(.on) {
				color: #8d8d8d;
			}
		}

		#{$e}__type {
			color: #5C5C5C;
		}

		#{$e}__arrow {
			transform: rotate(180deg);
			color: #5C5C5C;
		}
	}

	.ac-column.loading & {
		position: relative;
		background: #eee;
		filter: grayscale(80);
		cursor: not-allowed;

		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: #eee;
			opacity: .2;
		}
	}

}

.ac-column-type-icon {
	margin-top: -1px;
	float: left;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

#listscreen_settings.-disabled {
	.ac-column__header__move {
		span {
			visibility: hidden!important;
		}
		cursor: default!important;
	}
}