:root {
	--classifai-admin-theme-color: #007cba;
	--classifai-admin-theme-color--rgb: 0, 124, 186;
	--classifai-admin-theme-color-darker-10: #006ba1;
	--classifai-highlight-color: #007cba;
}

body.admin-color-light {
	--classifai-admin-theme-color: #0085ba;
	--classifai-admin-theme-color--rgb: 0, 133, 186;
	--classifai-admin-theme-color-darker-10: #0073a1;
	--classifai-highlight-color: #04a4cc;
}

body.admin-color-modern {
	--classifai-admin-theme-color: #3858e9;
	--classifai-admin-theme-color--rgb: 56, 88, 233;
	--classifai-admin-theme-color-darker-10: #2145e6;
	--classifai-highlight-color: #3858e9;
}

body.admin-color-blue {
	--classifai-admin-theme-color: #096484;
	--classifai-admin-theme-color--rgb: 9, 100, 132;
	--classifai-admin-theme-color-darker-10: #07526c;
	--classifai-highlight-color: #096484;
}

body.admin-color-coffee {
	--classifai-admin-theme-color: #46403c;
	--classifai-admin-theme-color--rgb: 70, 64, 60;
	--classifai-admin-theme-color-darker-10: #383330;
	--classifai-highlight-color: #c7a589;
}

body.admin-color-ectoplasm {
	--classifai-admin-theme-color: #523f6d;
	--classifai-admin-theme-color--rgb: 82, 63, 109;
	--classifai-admin-theme-color-darker-10: #46365d;
	--classifai-highlight-color: #a3b745;
}

body.admin-color-midnight {
	--classifai-admin-theme-color: #e14d43;
	--classifai-admin-theme-color--rgb: 225, 77, 67;
	--classifai-admin-theme-color-darker-10: #dd382d;
	--classifai-highlight-color: #e14d43;
}

body.admin-color-ocean {
	--classifai-admin-theme-color: #627c83;
	--classifai-admin-theme-color--rgb: 98, 124, 131;
	--classifai-admin-theme-color-darker-10: #576e74;
	--classifai-highlight-color: #9ebaa0;
}

body.admin-color-sunrise {
	--classifai-admin-theme-color: #dd823b;
	--classifai-admin-theme-color--rgb: 221, 130, 59;
	--classifai-admin-theme-color-darker-10: #d97426;
	--classifai-highlight-color: #dd823b;
}

#classifai-activation-notice {
	padding: 20px 10px;

	.classifai-logo {
		line-height: 0;

		img {
			width: 180px;
		}
	}

	.classifai-activation-message {
		margin: 16px 0px;
	}
}

a.classifai-button,
input.classifai-button {
	font-size: 14px;
	padding: 8px 16px;
	background: var(--classifai-admin-theme-color);
	color: #fff;
	font-style: normal;
	font-weight: 400;
	display: inline-block;
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	border-color: var(--classifai-admin-theme-color);
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;

	&:hover,
	&:focus,
	&:active {
		color: #fff;
		background: var(--classifai-admin-theme-color-darker-10);
		border-color: var(--classifai-admin-theme-color-darker-10);
	}

	&:focus {
		box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--classifai-admin-theme-color-darker-10);
	}

	&:active {
		box-shadow: none;
	}

	&:disabled,
	&.disabled {
		color: #fff;
		background: #9ea3a8;
		cursor: not-allowed;
		box-shadow: none;
	}
}

#classifai-header {
	background-color: #fff;
	box-sizing: border-box;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	position: sticky;
	z-index: 1001;
	margin-left: -20px;
	padding: 0 10px;
	box-shadow: 0px 10px 10px 0px #f0f0f1;

	@media screen and (max-width: 782px) {
		margin-left: -10px;
		padding: 0 5px;
	}

	body.admin-bar & {
		@media (min-width: 601px) {
			top: 46px;
		}

		@media (min-width: 783px) {
			top: 32px;
		}
	}

	.classifai-setup-page & {
		position: relative;

		body.admin-bar & {
			@media (min-width: 601px) {
				top: 0px;
			}

			@media (min-width: 783px) {
				top: 0px;
			}
		}
	}

	.classifai-header-layout {
		justify-content: space-between;
		padding: 18px 20px;
		display: flex;
		align-items: center;
		max-width: 1260px;
		margin: 0 auto;
		box-sizing: content-box;
	}

	#classifai-logo {
		line-height: 0;

		img {
			max-width: 180px;
		}
	}

	#classifai-header-controls {
		display: flex;
		flex-direction: row;
		align-items: center;

		.header-control-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			outline: none;
			cursor: pointer;
			height: 32px;
		}

		a.classifai-help-links {
			text-decoration: none;
			color: #757575;
			text-align: center;

			&[aria-expanded="true"] {
				color: var(--classifai-admin-theme-color);
			}

			&:hover {
				color: var(--classifai-admin-theme-color);
			}

			span.control-item-text {
				display: block;
			}
		}
	}

	.classifai-help-menu {
		display: block;
		width: 200px;

		&__menu-item {
			display: block;
			text-decoration: none;
			color: #757575;
			padding: 8px 12px;

			&:hover {
				color: var(--classifai-admin-theme-color);
			}
		}
	}

	.admin_page_classifai_setup & {
		box-shadow: none;
	}
}

.classifai-content {
	.classifai-wrap {
		background-color: #fff;
		border-radius: 4px;
		padding: 24px;
		margin: 0px;

		.form-table td fieldset p {
			margin-bottom: 12px;
		}

		textarea {
			max-width: 600px;
		}

		.description {
			display: block;
			margin-top: 8px;
			max-width: 600px;
			line-height: 1.4;
		}

		tr.allowed_users_row {
			.classifai-search-users-container {
				max-width: 600px;

				label.components-form-token-field__label{
					display: none;
				}
			}
		}

		.components-form-token-field__input-container.is-active {
			border-color: var(--classifai-highlight-color);
			box-shadow: 0 0 0 1px var(--classifai-highlight-color);
			outline: 2px solid transparent;
		}

		.components-form-token-field__suggestion {
			box-sizing: border-box;
		}

		.components-form-token-field__suggestion.is-selected {
			background: var(--classifai-highlight-color);
		}

		.classifai-field-type-prompt-setting {
			padding: 5px 20px;
			border: 1px solid #f0f0f1;
			position: relative;
			display: flex;
			flex-direction:column;
			max-width: 600px;

			&:first-child {
				> input,
				> label {
					display: none;
				}
			}

			&:nth-child(2n + 1) {
				background-color: #f0f0f1;
			}

			label {
				display: block;
			}

			input, textarea {
				margin-right: 0;
				display: block;
			}

			input[type="text"] {
				width: 90%;
			}

			/* Style for prompt action items container */
			.actions-rows {
				display: flex;
				margin: 0.35em 0 .5em!important;

				/* Style for prompt actions */
				a {
					cursor: pointer;
					text-decoration: none;
					margin-left: 8px;

					&.action__remove_prompt {
						color: #b32d2e;
					}
				}

				/* action items separator */
				a:before {
					content: '|';
					color: #a7aaad;
				}

				/* Styling for default prompt first action */
				a:first-child {
					margin-left: 0;

					&.selected {
						color: #a7aaad;
						pointer-events: none;
					}

					&:before {
						content: '';
					}
				}

			}

			+ button {
				margin-top: 10px;
			}
		}
	}

	.classifai-settings-wrapper {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		padding-right: 20px;
		box-sizing: border-box;

		@media screen and (max-width: 782px) {
			padding-right: 10px;
		}
	}

	input[type="text"],
	input[type="password"] {
		height: 38px;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.hide-username {
		display: none;
	}

	.components-form-token-field__input-container input[type=text].components-form-token-field__input {
		height: auto;
		font-size: 14px;
		margin-bottom: 0px;
		min-height: 32px;
	}

	h2.nav-tab-wrapper.classifai-nav-wrapper {
		margin-right: 20px;
		margin-top: 20px;
		padding-top: 0px;
		border-color: transparent;
	}

	a.nav-tab {
		border: none;
		margin-left: 0;
		background: transparent;
		padding: 8px 12px;
		position: relative;

		&:after {
			transition: all .3s cubic-bezier(1, 0, 0, 1);
			will-change: transform, box-shadow, opacity;
			position: absolute;
			content: '';
			height: 3px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			border-radius: 3px 3px 0px 0px;
			background: var(--classifai-admin-theme-color);
			box-shadow: 0px 4px 10px 3px rgba(var(--classifai-admin-theme-color--rgb), .15);
			opacity: 0;
			transform: scale(0, 1);
		}

		&.nav-tab-active,
		&:hover {
			color: var(--classifai-admin-theme-color);
			font-weight: 600;

			&:after {
				opacity: 1;
				transform: scale(1, 1);
			}
		}
	}
}

.classifai-setup {
	margin-left: -20px;

	&__header {
		height: 60px;
		border-top: 1px solid #dcdcde;
		border-bottom: 1px solid #dcdcde;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
	}

	&__step-wrapper {
		margin: 0 16px;
		width: 100%;
		max-width: 980px;
	}

	&__steps {
		display: flex;
		justify-content: space-around;
	}

	&__step {
		padding: 8px;
		font-weight: 400;
		position: relative;

		&__label {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;

			span.step-count {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 24px;
				height: 24px;
				min-width: 24px;
				margin-right: 8px;
				background: #f0f0f0;
				color: #757575;
				border-radius: 50%;
			}

			span.step-title {
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			a,
			a:hover,
			a:active,
			a:focus {
				display: inherit;
				text-decoration: none;
				color: #3c434a;
			}

			@media screen and (max-width: 480px) {
				font-size: 14px;
			}
		}

		&.is-complete {
			span.step-count {
				background: var(--classifai-admin-theme-color);
				color: #fff;
			}
		}

		&.is-active {
			span.step-title {
				font-weight: 600;
			}

			span.step-count {
				background: var(--classifai-admin-theme-color);
				color: #fff;
			}
		}
	}

	&__step-divider {
		align-self: flex-start;
		flex-grow: 1;
		border-bottom: 1px solid #f0f0f0;
		margin-top: 20px;
	}

	&__step-label {
		font-size: 1.2em;
	}

	@media screen and (max-width: 782px) {
		margin-left: -10px;
	}

	&__wrapper,
	.classifai-wrap {
		max-width: 1232px;
		margin: 0px auto;
		padding: 0px;
	}

	&__content {
		padding: 24px;
		background-color: #fff;
		box-sizing: border-box;
		display: block;
		border-radius: 4px;
		margin: 20px;

		&__row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;

			&__column {
				display: flex;
				flex-direction: column;
				flex-basis: 100%;

				img {
					max-width: 400px;
					width: 100%;
				}
			}

			@media screen and (min-width: 767px) {
				&__column {
					flex: 1;
					padding: 0px 10px;
				}
			}
		}

		h1.classifai-setup-heading {
			text-align: center;
			font-size: 22px;
			margin: 24px 0px 24px 0px;
			font-weight: 600;
		}

		.classifai-setup-image {
			text-align: center;
			margin-top: 20px;
		}

		.classifai-step1-content,
		.classifai-step4-content {
			max-width: 400px;
			margin-top: 20px;
		}

		.classifai-step2-content {
			max-width: 480px;
			margin: 0 auto;
		}

		.classifai-setup-footer {
			margin-top: 40px;
		}

		.classifai-feature-box {
			margin: 40px 0;
		}

		.classifai-feature-box-title {
			text-transform: uppercase;
			font-weight: 700;
		}

		li.classifai-enable-feature {
			width: 100%;
			list-style: none;
			margin-top: 14px;
			display: block;
			clear: both;

			span.dashicons.dashicons-yes-alt {
				color: #48BE1E;
			}

			span.dashicons.dashicons-dismiss {
				color: #cc0000;
			}
		}

		.classifai-feature-box-divider {
			border: 1px solid #ddd;
		}

		span.classifai-feature-text,
		label.classifai-feature-text {
			color: #707070;
			font-size: 14px;
		}

		span.classifai-feature-text {
			float: left;
		}

		.classifai-setup-footer {
			text-align: right;
		}

		a.classifai-setup-skip-link {
			text-decoration: none;
			color: #000;
			font-weight: 400;
		}

		.classifai-setup-footer__right {
			margin-left: 40px;
		}

		@media screen and (max-width: 767px) {

			.classifai-step1-content,
			.classifai-step4-content {
				max-width: 100%;
				margin-top: 20px;
			}

			h2.classifai-setup-title {
				text-align: center;
			}
		}

		.classifai-setup-form {
			.classifai-step3-content & {
				margin: 0 auto;
			}

			.classifai-setup-form-field-label {
				text-align: left;
			}

			.classifai-setup-form-field {
				padding: 0px;
			}

			.classifai-setup-form-field-label > label {
				display: block;
				font-weight: 700;
				text-transform: uppercase;
				margin-bottom: 0px;
			}

			input[type="text"],
			input[type="password"] {
				width: 100%;
				height: 38px;
				font-size: 14px;
				margin-bottom: 4px;
			}

			.classifai-setup-footer {
				margin-top: 40px;
			}
		}

		.classifai-step3-content {
			margin: 0 auto;
			max-width: 840px;
			width: 100%;

			.classifai-setup-title {
				text-align: center;
				margin-bottom: 12px;
			}

			.classifai-setup-form {
				padding-left: 48px;
				width: 70%;
				box-sizing: border-box;

				@media screen and (max-width: 782px) {
					padding-left: 18px;
				}

				@media screen and (max-width: 600px) {
					width: 100%;
					padding-left: 0px;
					margin-bottom: 20px;
				}
			}

			.classifai-setup-footer {
				margin-top: 20px;
			}
		}

		.classifai-tabs {
			display: block;
			width: 30%;
			box-sizing: border-box;

			@media screen and (max-width: 600px) {
				width: 100%;
			}

			&.tabs-center {
				margin-bottom: 24px;
			}

			&.tabs-justify {
				width: 100%;
				table-layout: fixed;
			}

			a.tab {
				text-decoration: none;
				position: relative;
				display: block;
				transition: all ease 0.3s;
				padding: 16px 12px;
				transform: translate3d(0, 0, 0);
				color: #1d2327;
				cursor: pointer;
				font-size: 14px;

				&:focus {
					box-shadow: none;
				}

				&:hover {
					color: var(--classifai-admin-theme-color);
				}

				&.active {
					background: #f0f0f0;
					box-shadow: none;
					border-radius: 4px;
					font-weight: 600;

					&:after {
						opacity: 1;
						transform: scale(1, 1);
					}
				}
			}
		}

		.classifai-providers-wrapper {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		p.classifai-setup-error {
			text-align: center;
			color: red;
		}

		span.description {
			font-size: 12px;
		}

		.dashicons-clock {
			color: #a7aaad;
		}
		.dashicons-yes-alt{
			color: #48BE1E;
		}
		.dashicons-warning {
			color: #dba617;
		}
	}
}

.classifai-toggle {
	cursor: pointer;
	display: inline-block;
	width: 100%;
	text-align: right;
}

.classifai-toggle-switch {
	display: inline-block;
	background: transparent;
	border-radius: 9px;
	border: 1px solid #1e1e1e;
	width: 36px;
	height: 18px;
	position: relative;
	vertical-align: middle;
	transition: background 0.25s;
	box-sizing: border-box;

	&:before,
	&:after {
		content: "";
	}

	&:before {
		display: block;
		background: #1e1e1e;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		position: absolute;
		top: 2px;
		left: 2px;
		box-sizing: border-box;
		transition: left 0.25s;
	}

	.classifai-toggle-checkbox:checked+& {
		background: var(--classifai-admin-theme-color);
		border-color: var(--classifai-admin-theme-color);

		&:before {
			background-color: #fff;
			left: 20px;
		}
	}
}

.classifai-toggle-checkbox {
	position: absolute;
	visibility: hidden;
}

#classifai-generate-excerpt {
	position: absolute;
	right: 12px;
	top: 70px;
}

// Start: Classify Post Modal
.classify-post-component {
	hr {
		margin-bottom: 20px;
	}
}
.classify-modal {
    width: 500px;

	hr {
		margin-bottom: 20px;
	}
}

.classifai-modal__notes {
    max-width: 350px;
    float: left;
    font-size: 10px;
}

.classifai-modal__footer {
    overflow: hidden;

	button {
		float: right;
	}
}

.editor-post-publish-panel {
	.classifai-modal__footer {
		button {
			float: none;
			margin-top: 10px;
		}
	}
}
// End: Classify Post Modal

// Profile page
#classifai-profile-features-section tr.classifai-features-row {
	th {
		padding: 10px 10px 10px 0;
	}

	td {
		padding: 10px 10px;
	}
}

a.components-button.classifai-disable-feature-link {
    display: block;
    margin-top: 12px;
}

div.classifai-openai__result-disable-link {
    display: block;
    padding: 0 1em 1.5em 1em;
}

div.classifai-title-generation__result-disable-link {
    display: block;
    padding: 0 0 20px 20px;
}

.classifai-content .classifai-term-cleanup {
	margin-top: 20px;
}

.classifai-term-cleanup .classifai-tabs.tabs-center {
	margin-bottom: 24px
}

.classifai-term-cleanup .classifai-tabs.tabs-justify {
	table-layout: fixed;
	width: 100%
}

.classifai-term-cleanup .classifai-tabs a.tab {
	color: #1d2327;
	cursor: pointer;
	display: block;
	font-size: 14px;
	padding: 16px 12px;
	position: relative;
	text-decoration: none;
	transform: translateZ(0);
	transition: all .3s ease;
	margin-bottom: 4px;
	background: #f9f9f9;
}

.classifai-term-cleanup .classifai-tabs a.tab:focus {
	box-shadow: none
}

.classifai-term-cleanup .classifai-tabs a.tab:hover {
	color: var(--classifai-admin-theme-color)
}

.classifai-term-cleanup .classifai-tabs a.tab.active {
	background: #f0f0f0;
	border-radius: 4px;
	box-shadow: none;
	font-weight: 600
}

.classifai-term-cleanup .classifai-tabs a.tab.active:after {
	opacity: 1;
	transform: scale(1)
}

.classifai-term-cleanup .classifai-term-cleanup-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 20px;
}


.classifai-term-cleanup .classifai-term-cleanup-content-wrapper .classifai-term-cleanup-content-wrapper-field-label {
	text-align: left
}

.classifai-term-cleanup .classifai-term-cleanup-content-wrapper .classifai-term-cleanup-content-wrapper-field {
	padding: 0
}

.classifai-term-cleanup .classifai-term-cleanup-content-wrapper .classifai-term-cleanup-content-wrapper-field-label>label {
	display: block;
	font-weight: 700;
	margin-bottom: 0;
	text-transform: uppercase
}

.classifai-term-cleanup .classifai-term-cleanup-content-wrapper input[type=password],
.classifai-term-cleanup .classifai-term-cleanup-content-wrapper input[type=text] {
	font-size: 14px;
	height: 38px;
	margin-bottom: 4px;
	width: 100%
}

.classifai-term-cleanup .classifai-term-cleanup-content-wrapper .classifai-setup-footer {
	margin-top: 40px
}

@media screen and (max-width: 782px) {
	.classifai-term-cleanup .classifai-term-cleanup-content-wrapper {
		padding-left: 18px
	}
}

@media screen and (max-width: 600px) {
	.classifai-term-cleanup .classifai-term-cleanup-content-wrapper {
		margin-bottom: 20px;
		padding-left: 0;
		width: 100%
	}
}

.classifai-term-cleanup-process-status p{
	font-size: 14px;
}

.classifai-term-cleanup-process-status .dashicons-yes-alt{
    color: #48be1e;
}

.classifai-term-cleanup-process-status .button-link-delete {
	color: #cc0000;
}

.classifai-term-cleanup .classifai-term-cleanup-content-wrapper input[type=text].current-page{
	width: auto;
	height: auto;
}

table.similar_terms {
	border-collapse: collapse;
	border: 2px solid #c3c4c7;
}

table.similar_terms tbody tr.border {
	border-left: 2px solid #c3c4c7;
	border-right: 2px solid #c3c4c7;
	border-top: 2px solid #c3c4c7;
}

table.similar_terms tbody tr.border.skip {
	border-top: 0px;
}

table.similar_terms tbody tr.border:last-child {
	 border-bottom: 2px solid #c3c4c7;
}

table.similar_terms th#actions {
    width: 15%;
}

table.similar_terms .term-merge-button {
    margin-top: 16px;
    margin-bottom: 8px;
}

table.similar_terms.widefat td,
table.similar_terms.widefat th {
	padding: 14px;
	font-size: 14px;
}

table.similar_terms.widefat thead th {
	font-weight: bold;
}

#wpbody {

	tr[data-slug="classifai"] {

		th, td {
			box-shadow: none;
			border-bottom: 0;
		}
	}
}
