body.dxp-toolkit_page_dxp-toolkit-rulesets {
	counter-reset: ruleset-counter;

	.dxp-ruleset-incrementor::before {
		counter-increment: ruleset-counter;
		content: counter(ruleset-counter);
	}

}

body.toplevel_page_dxp-toolkit-dashboard {
	counter-reset: ruleset-counter;

	.under-section {
		padding: 35px;
		width: 100%;
		max-width: 999px;
	}

	.quick-start-steps {
		background-image: url('/wp-content/plugins/dxp-toolkit/admin/assets/images/bg.png');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		min-height: 450px;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 100%;
		padding: 40px;
	}

	.pill-1 {
		margin-right: auto;
		box-shadow: 0 10px 20px 5px rgba(230, 24, 107, 0.1);
	}

	.pill-2 {
		margin-left: auto;
		margin-right: 10%;
		margin-top: -35px;
		box-shadow: 0 10px 20px 5px rgba(74, 26, 222, 0.1);
	}

	.pill-3 {
		margin-right: auto;
		margin-top: -35px;
		box-shadow: 0 10px 20px 5px rgba(74, 26, 222, 0.1);

	}

	.pill {
		max-width: 90%;
		z-index: +1;
		background: white;
		border-radius: 40px;
		height: 30px;
		width: 300px;
		display: flex;
		align-items: center;
		padding: 15px;
		line-height: 20px;
		gap: 10px;
		font-size: 18px;

		.pill-text {
			margin-left: auto;
			margin-right: auto;
		}

		&.right {
			justify-content: flex-end;
		}

		.badge {
			width: 20px;
			height: 20px;
			background: linear-gradient(120deg, #4B1CDD 0%, #E415A0 75%, #E71C1C 95%);
			color: white;
			padding: 10px;
			font-size: 20px;
			line-height: 20px;
			font-weight: 700;
			text-align: center;
			border-radius: 100%;
		}
	}

	.arrow1 {
		margin-right: auto;
		margin-left: 20%;
	}

	.arrow2 {
		--color2: #4a1ade; /* color */
		--radius2: 4px; /* circle size */
		--spacing2: 4px; /* space bettwen circles */
		margin-left: auto;
		margin-right: 30%;
		width: 30%;
		height: 50%;
		display: inline-block;
		position: relative;
		--gradient: radial-gradient(circle closest-side, var(--color2) 85%, transparent);
		background: var(--gradient) calc(var(--spacing2) / -2) 100%/calc(var(--radius2) + var(--spacing2)) var(--radius2) repeat-x,
		var(--gradient) 100% calc(var(--spacing2)/-2)/var(--radius2) calc(var(--radius2) + var(--spacing2)) repeat-y;
		box-shadow: 15px 15px 15px 2px rgba(74, 26, 222, 0.05);

	}

	.arrow2::after {
		content: "";
		position: absolute;
		bottom: -8px;
		right: 100%;
		width: 10px;
		height: 10px;
		transform: translateY(-50%);
		background: var(--color2);
		clip-path: polygon(100% 100%, 0 50%, 100% 0);
	}

	.arrow1 {
		--color: #E6186B; /* color */
		--radius: 4px; /* circle size */
		--spacing: 4px; /* space bettwen circles */

		width: 30%;
		height: 40%;
		display: inline-block;
		position: relative;
		--gradient: radial-gradient(circle closest-side, var(--color) 85%, transparent);
		background: var(--gradient) calc(var(--spacing) / -2) 100%/calc(var(--radius) + var(--spacing)) var(--radius) repeat-x,
		var(--gradient) 0 calc(var(--spacing)/-2)/var(--radius) calc(var(--radius) + var(--spacing)) repeat-y;
		box-shadow: -15px 15px 15px 2px rgba(230, 24, 107, 0.05);
	}

	.arrow1::after {
		content: "";
		position: absolute;
		bottom: -7px;
		left: 100%;
		width: 10px;
		height: 10px;
		transform: translateY(-50%);
		background: var(--color);
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}

	.dxp-ruleset-incrementor::before {
		counter-increment: ruleset-counter;
		content: counter(ruleset-counter);
	}

	.persona-rules-report-table {
		td {
			vertical-align: middle;
		}

		.dxp-rule-delete {
			cursor: pointer;
			display: block;
			height: 24px;
			padding: 0 13px;
			width: 24px;
		}
	}

	#dxptk-reporting-dashboard .page-title-action {
		margin-left: 0;
	}

	h1.dxptk-persona-reporting-heading {
		text-align: center;
		border-bottom: 5px solid $color-purple;
		font-size: 34px;
		margin-bottom: 25px;
		padding-bottom: 10px;
		padding-top: 0;
		max-width: fit-content;
		padding-right: 45px;
	}

	main {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 35px;
		gap: 10%;

		#tab-getting-started {
			flex: 0 0 100%;
		}

		.initial-setup input {
			opacity: 1;
			cursor: default;
			margin-bottom: 3px;

			&:before {
				opacity: 1 !important;
			}
		}

		.right-section.right-section.right-section.right-section.right-section.right-section ul li {
			background: url('/wp-content/plugins/dxp-toolkit/admin/assets/images/toolkit-kb-icon.svg') no-repeat left;
			padding-left: 25px;
			padding-right: 0;
		}

		.left-section, .right-section {
			flex: 1 1 fit-content;

			h1 {
				border-bottom: 5px solid $color-purple;
				font-size: 34px;
				margin-bottom: 25px;
				padding-bottom: 10px;
				padding-top: 0;
			}

			h2 {
				font-size: 20px;
			}

			.dxptk-row {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;

				.column.right {
					margin-left: auto;
					text-align: right;

					ul {
						li {
							background: none;
							color: $color-purple;
							font-weight: 700;

							input {
								margin-top: 0;
							}

							a {
								color: $color-purple;
							}
						}
					}
				}

				.column {
					display: flex;
					flex-direction: column;

					&:not(.right) {
						a {
							font-weight: bold;

							&:not(:hover) {
								text-decoration: none;
							}
						}
					}

					ul {
						margin: 0;

						li {
							background: url('/wp-content/plugins/dxp-toolkit/admin/assets/images/toolkit-cog-icon.svg') no-repeat left;
							background-size: contain;
							margin-bottom: 25px;
							padding-left: 25px;

							a {
								color: $color-purple;
							}
						}
					}
				}
			}
		}
	}
}

.dxp-filter-form select, .dxp-filter-form option {
	color: $color-purple;
}

.search-box input {
	border-radius: 0;
}

.paging-input input {
	color: $color-purple;
	border-color: $color-purple;
}

.toggle-box {
	display: flex;
	align-items: center;
	gap: 10px;
}

.toggle-rule-status {
	color: $color-purple-darkest;
}

.toggle {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 20px;
	margin: 0;
}

.toggle input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 4px;
	bottom: 3px;
	background-color: $color-white;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #5db451;
}

input:checked + .slider:before {
	transform: translateX(200%);
}

table.rulesets {
	th#ordered_number {
		width: 50px;
	}

	th#actions {
		width: 50px;
	}

	tbody {
		tr {
			transition: background-color 200ms ease-in-out;

			&:hover {
				background-color: rgba($color-purple, .1); // $color-purple
			}
		}
	}
}

.disabled {
	opacity: 0.5;
	pointer-events: none;
}

@media(max-width: 1350px) {
	body.toplevel_page_dxp-toolkit-dashboard {
		main {
			padding: 20px;
		}
	}
	.under-section {
		padding: 20px;
	}
}

#tab-kb li {
	max-width: 100%;
}