$tablet : 768px;
$mobile : 736px;

.toplevel_page_editorskit-getting-started #wpcontent {
	padding-left: 0;
}

.editorskit-settings-wrap {
	color: #111;

	.components-panel {
		min-height: 100vh;

		.components-panel__header {
			border: 0;
			padding: 0;
			display: block;
			height: auto;
			margin-bottom: 50px;

			h2 {
				font-size: 45px;
				line-height: 1;
				font-weight: 300;
				padding-bottom: 10px;
				margin: 0;
			}

			code {
				margin-left: 5px;
				border-radius: 2px;
				font-size: 11px;
				font-weight: 400;
				font-family: inherit;
				background-color: #e5e5e5;
				color: #000;
				opacity: 0.7;
			}

			p {
				color: #333;
				font-size: 18px;
			}

			.editorskit-panel__header-hint {
				font-size: 12px;
				opacity: 0.4;
				margin: 0 0 40px;
				padding: 0;
			}
		}

		.editorskit-settings-tab-panel {
			margin: 0 -50px;
			width: calc(100% + 100px);
		}

		.components-tab-panel__tabs {
			padding: 0 50px;
			border-bottom: 1px solid #e2e4e7;

			.components-button {
				font-size: 18px;
				padding: 10px 15px;
				border-bottom: 5px solid transparent;
				opacity: 0.7;
				font-weight: 500;

				&:hover {
					opacity: 0.9;
					border-color: #ccc;
					background: #f5f6f8;
				}

				&.active-tab {
					opacity: 1;

					&,
					&:hover {
						border-color: #272c56;
						background: #fff;
					}
				}

				&:focus {
					color: #191e23;
					outline-offset: -1px;
					outline: 1px dotted #555d66;
					box-shadow: none;
				}

				@media screen and (max-width: $mobile) {
					display: block;
					width: 100%;
				}
			}
		}

		.components-tab-panel__tab-content {
			padding: 25px 50px;
		}

		.components-panel__body {
			padding: 25px 50px 50px;

			.components-tab-panel__tab-content {

				p,
				button {
					font-size: 16px;
					line-height: 1.5;
					margin-bottom: 16px;
				}


				.editorskit-docs-items-wrapper {
					display: flex;
					flex-wrap: wrap;

					> div {
						flex-grow: 1;
						width: calc(33% - 30px);

						@media screen and (max-width: $tablet)
							and (min-width: $mobile + 1) {
							width: calc(50% - 30px);
						}

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

					@media screen and (min-width: $tablet + 1) {

						> div:not(:first-child):not(:nth-child(3n+1)) {
							margin-left: 30px;
						}
					}

				}

				.editorskit-docs-items-title {
					font-size: 21px;
					margin-top: 24px;
					margin-bottom: 16px;
				}

				.editorskit-docs-items-list {
					margin-left: 0;

					.components-button {
						text-align: left;
						padding-left: 0;
						padding-right: 0;
						height: auto;
					}
				}

				.editorskit-started-items-wrapper {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin: 25px 0;

					.editorskit-started-item {
						padding: 15px;
						flex-grow: 1;
						width: calc(50% - 30px);

						@media screen and (max-width: $tablet) {
							width: calc(100% - 30px);

							iframe {
								max-width: 100%;
							}
						}

						p {
							font-size: 21px;
							font-weight: 300;
						}

						&:nth-child(3) {
							background: #f2f2f2;
							width: 100%;
							margin: 50px;
							padding: 50px;
							font-size: 18px;
							line-height: 1.5;
							text-align: center;
							color: #444;

							@media screen and (max-width: $tablet) {
								margin-left: 0;
								margin-right: 0;
							}
						}
					}
				}

				.editorskit-features-manager-items-wrapper {
					display: flex;
					flex-wrap: wrap;

					.edit-post-options-modal__section {
						padding: 10px;
						width: calc(25% - 20px);

						.components-base-control__field {
							font-size: 15px;
							line-height: 1.5;
						}

						@media screen and (max-width: $tablet)
							and (min-width: $mobile + 1) {
							width: calc(50% - 20px);
						}

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

.components-modal--editorskit-docs {

	.components-modal__icon-container {
		padding-top: 4px;
		padding-right: 4px;

		svg {
			width: 18px;
			height: 18px;
		}
	}

	.components-modal--editorskit-doc {
		padding: 5px 20px 0;

		p,
		ul,
		ol,
		table,
		pre,
		dl {
			font-size: 16px;
			line-height: 1.5;
			margin-bottom: 16px;
		}

		h1,
		h2,
		h3 {
			line-height: 1.25;
			border-bottom: 1px solid #eaecef;
			padding-bottom: 0.3em;
		}

		h1 {
			font-size: 32px;

			&:first-of-type {
				margin-top: 10px;
			}
		}

		h2 {
			font-size: 24px;
		}

		h3 {
			font-size: 20px;
		}

		ul {
			display: block;
			padding-left: 20px;
			list-style-type: disc;
		}

		ol {
			padding: 0;
			margin-left: 20px;
		}

		img {
			max-width: 590px;
			border: 1px solid #eaecef;
		}

	}
}

.ek-admin-licenses {
	display: flex;
	flex-wrap: wrap;

	> div {
		width: 33%;

		.components-panel__row {
			padding: 20px;

			.components-base-control {
				margin-bottom: 10px;
				width: 100%;
			}

			.components-text-control__input {
				width: 100%;
			}

			button {
				text-transform: capitalize;
				margin-bottom: 0 !important;
			}
		}
	}
}

.components-button {

	&.ek-settings-addons {
		position: relative;

		&::after {
			content: "NEW";
			position: absolute;
			top: -2px;
			right: 8px;
			color: #ca4a1f;
			font-size: 9px;
			font-weight: 700;
		}
	}
}

.ek-panel-footer {
	background: #fafafa;
	border-top: 1px solid #eee;
}

.components-editor-notices__snackbar {
	position: fixed;
	right: 0;
	bottom: 20px;
	padding-left: 16px;
	padding-right: 16px;
	left: 0;
}

.ek-addons-list {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;

	> div {
		// flex-grow: 1;
		width: calc(33% - 30px);
		background: #fff;
		padding: 50px 30px;
		color: #0a1231;
		background-color: #f9d3bb;
		border: 3px solid #0a1231;
		box-shadow: 12px 15px #ce6c58;

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

		.components-button {
			font-weight: 500;
			color: #fff;
			background: #272c51;
			border-color: #272c51;
			border-radius: 0;
			box-shadow: 5px 5px #f9d3bb;
			padding: 6px 12px;

			&:hover {
				color: #fff !important;
				background: #272c51 !important;
				border-color: #272c51 !important;
				border-radius: 0;
				box-shadow: 5px 5px #ce6c58;
			}
		}

		&:not(:first-child):not(:nth-child(3n+1)) {
			margin-left: 30px;
		}
	}
}

.editorskit-addon-manager {
	.components-base-control {
		margin-bottom: 0 !important;
	}
}