/**
 * Settings > Kit
 */
body.settings_page__wp_convertkit_settings {
	background: #f9f7f4;
}

body.settings_page__wp_convertkit_settings #wpcontent {
	padding-left: 0;
}

/**
 * Header
 */
body.settings_page__wp_convertkit_settings header {
	height: 98px;
	padding: 0 20px;
	background: url(../images/kit-logo.svg) 30px 50% no-repeat;
	background-size: 75px auto;
	background-color: #fff;
}

body.settings_page__wp_convertkit_settings h1 {
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: #d2d8dd;
	text-indent: -9999px;
}

body.settings_page__wp_convertkit_settings header a.convertkit-docs {
	float: right;
	margin: 20px 20px 0 0;
	padding: 0 0 0 30px;
	font-weight: 400;
	color: #144264;
	text-decoration: none;
	background: url(../images/help.svg) 0 0% no-repeat;
	background-size: 20px 20px;
}

body.settings_page__wp_convertkit_settings .wrap {
	margin-left: 20px;
}

/**
 * Notices
 */
body.settings_page__wp_convertkit_settings .notice {
	margin-top: 0;
}

/**
 * Tabs
 */
ul.convertkit-tabs {
	margin: 0 0 25px 0;
	padding: 0;
	list-style-type: none;
	border-bottom: 1px solid #d0d0cf;
}

ul.convertkit-tabs li {
	display: inline-block;
	margin: 0;
	padding: 0;
	height: 64px;
	line-height: 64px;
	list-style-type: none;
}

ul.convertkit-tabs li a {
	display: inline-block;
	padding: 0 20px;
	height: 64px;
	line-height: 64px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: #565656;
}

ul.convertkit-tabs li a:hover {
	color: #144264;
	background: #e7e7e7;
}

ul.convertkit-tabs li a.convertkit-tab-active {
	color: #144264;
	border-bottom: 1px solid #4c596d;
}

/**
 * Section
 */
body.settings_page__wp_convertkit_settings .wrap .postbox {
	background: #fff;
	color: #6e6e6e;
	margin: 0 0 30px 0;
	padding: 40px 30px 30px 30px;
	font-size: 14px;
	border-radius: 8px;
	border: none;
}

body.settings_page__wp_convertkit_settings .wrap .postbox h2 {
	margin: 0 0 30px 0;
	padding: 0 0 30px 0;
	font-size: 24px;
	font-weight: 600;
	border-bottom: 1px solid #e3e3e3;
	color: #3d3d3d;
}

body.settings_page__wp_convertkit_settings .wrap .postbox p {
	font-size: 14px;
}

body.settings_page__wp_convertkit_settings .wrap .postbox input,
body.settings_page__wp_convertkit_settings .wrap .postbox select {
	vertical-align: middle;
}

body.settings_page__wp_convertkit_settings p.submit {
	margin-bottom: 20px;
	padding: 0;
}

body.settings_page__wp_convertkit_settings .button {
	margin: 0 5px 0 0;
	padding: 0 12px;
	font-size: 14px;
	border-radius: 10px;

	/* Required for WordPress 7.0 styling */
	line-height: 2.8;

	/* Required for WordPress 5.x styling */
	height: auto;
	text-shadow: none;
	box-shadow: none;
}

body.settings_page__wp_convertkit_settings .button-primary {
	background: #1e1e1e;
	border-color: #1e1e1e;
	color: #fff;
}

body.settings_page__wp_convertkit_settings .button-primary:hover {
	background: #3d3d3d;
	border-color: #3d3d3d;
}

body.settings_page__wp_convertkit_settings .button-secondary {
	background: #f0f0f0;
	border-color: #f0f0f0;
	color: #3d3d3d;
}

body.settings_page__wp_convertkit_settings .button-secondary:hover {
	background: #ddd;
	border-color: #ddd;
}

body.settings_page__wp_convertkit_settings .wrap .postbox textarea.convertkit-monospace {
	font-family: monospace;
	padding: 20px;
}

/**
 * Beta Label
 */
body.settings_page__wp_convertkit_settings ul.convertkit-tabs li a span.convertkit-beta-label {
	background-color: #f3e3f9;
	border-radius: 9999px;
	color: #4a265a;
	margin: 0 0 0 12px;
	padding: 3px 8px;
	font-weight: 600;
	font-size: 12px;
}

body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta span.convertkit-beta-label {
	display: inline-block;
	background-color: #f3e3f9;
	border-radius: 9999px;
	color: #4a265a;
	border-width: 1px;
	margin: 4px 0 0 12px;
	padding: 4px 8px;
	vertical-align: top;
	font-weight: 600;
	font-size: 12px;
}

body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta > h2 {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: none;
}

body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta > p.description {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #e3e3e3;
}

/**
 * Screen Options
 */
body.settings_page__wp_convertkit_settings #screen-meta-links {
	position: absolute;
	right: 0;
}

/**
 * WP_List_Table Search
 */
body.settings_page__wp_convertkit_settings .wrap .subtitle.left {
	margin: 11px 0;
	display: flex;
	float: left;
	padding-left: 0;
	line-height: 40px;
	font-style: italic;
}

body.settings_page__wp_convertkit_settings .wrap .search-box input[type="search"] {
	min-height: 40px;
}

/**
 * WP_List_Table Bulk Actions
 */
body.settings_page__wp_convertkit_settings .wrap .tablenav.top {
	margin-bottom: 10px;
}

body.settings_page__wp_convertkit_settings .wrap .tablenav input.button {
	height: 20px;
	line-height: 20px;
}

/**
 * Reusable UI components.
 *
 * These deliberately aren't scoped to a single administration screen, so that
 * they can be used on any of the Plugin's administration screens.
 */

/**
 * Numbered Steps
 */
ol.kit-numbered-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kit-numbered-step;
}

ol.kit-numbered-steps > li {
	position: relative;
	margin: 0 0 30px 0;
	padding: 0 0 0 44px;
	counter-increment: kit-numbered-step;
}

ol.kit-numbered-steps > li::before {
	content: counter(kit-numbered-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;
	color: #fff;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
	background-color: #144264;
	border-radius: 9999px;
}

ol.kit-numbered-steps > li > h3 {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 15px;
	line-height: 28px;
}

/**
 * Code Block
 */
.kit-code {
	position: relative;
	max-width: 800px;
	margin: 0 0 15px 0;
}

.kit-code pre {
	margin: 0;
	padding: 15px 90px 15px 15px;
	overflow-x: auto;
	background-color: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

/* WordPress styles inline <code> elements with their own background and spacing,
   which would otherwise display behind each line of a multi line code block. */
.kit-code pre code {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.7;
	background: none;
	border-radius: 0;
}

.kit-code button.kit-code-copy {
	position: absolute;
	top: 8px;
	right: 8px;
}

/**
 * Inline Tabs
 */
.kit-inline-tabs ul.kit-inline-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px 0;
	padding: 0;
	border-bottom: 1px solid #dcdcde;
}

.kit-inline-tabs ul.kit-inline-tabs-nav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.kit-inline-tabs ul.kit-inline-tabs-nav li button.kit-inline-tab {
	margin: 0 0 -1px 0;
	padding: 10px 16px;
	color: #565656;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
}

.kit-inline-tabs ul.kit-inline-tabs-nav li button.kit-inline-tab:hover {
	color: #144264;
}

.kit-inline-tabs ul.kit-inline-tabs-nav li button.kit-inline-tab.is-active {
	color: #144264;
	border-bottom-color: #144264;
}

.kit-inline-tabs .kit-inline-tab-panel {
	display: none;
}

.kit-inline-tabs .kit-inline-tab-panel.is-active {
	display: block;
}

/**
 * MCP
 */
body.settings_page__wp_convertkit_settings .convertkit-mcp {
	margin-top: 20px;
}

body.settings_page__wp_convertkit_settings .convertkit-mcp p code,
body.settings_page__wp_convertkit_settings .convertkit-mcp li code {
	margin: 0;
}

body.settings_page__wp_convertkit_settings ul.convertkit-mcp-capabilities {
	margin: 0 0 15px 20px;
	list-style-type: disc;
}