@import "variables/colors";
@import "colormag-dashboard";
$color_1: #383838;
$color_2: #2563EB;
$color_3: #fff;
$color_4: #7A7A7A;
$color_5: #000;
$color_6: #6B6B6B;
$color_7: #999;
$color_8: #555cff;
$color_9: #22543d;
$color_10: #1a202c;
$color_11: #44337a;
$color_12: #234e52;
$color_13: #f00000;
$color_14: #ffffff;
$color_15: #23282d;
$color_16: #FFF;
$color_17: #111;
$color_18: #727374;
$color_19: #232323;
$color_20: #6547DB;
$color_21: #6048D3;
$background-color_1: #fff;
$background-color_2: #2563EB;
$background-color_3: #7A7A7A;
$background-color_4: #e8eefd;
$background-color_5: #eee;
$background-color_6: transparent;
$background-color_7: #FAFDFF;
$border-color_1: rgba(37, 99, 235, 0.9);
$border-color_2: #5cb85c;
$border-color_3: transparent;
$border-color_4: #999999;
$border-color_5: #6547DB;
$border-top-color_1: #333;
$border-top-color_2: #C3C4C7;
$border-right-color_1: transparent;
$border-right-color_2: #333;
$border-right-color_3: #C3C4C7;
$border-bottom-color_1: transparent;
$border-bottom-color_2: #333;
$border-bottom-color_3: #C3C4C7;
$border-left-color_1: transparent;
$border-left-color_2: #5cb85c;
$border-left-color_3: #333;
$border-left-color_4: #2563EB;
$border-left-color_5: #6547DB;

@charset "UTF-8";
/* Dashboard */
/* Products Page */
/* Help page */
/* Free Vs Pro */
/* Dialog */
/* Starter Templates */
/**
 * Tooltips
 */
/*rtl:raw:
#tiptip_arrow {
	right: 50%;
	margin-right: -6px;
}
*/
/**
 * Demo Import message CSS.
 */
/* Starter Templates - Blank State */
/* Responsive */
/* Responsive */
/* Notices. */
/* Welcome notice. */
/* Colormag review notice */
/* Responsive. */

.wp-theme-colormag {
	&.update-php {
		.colormag-notice {
			display: none;
		}
	}
}

.colormag-wrap {
	.colormag-header {
		background-color: $background-color_1;
		padding: 0;
		border-bottom: 1px solid #E9E9E9;
	}
}
.colormag-wrap.overlay {
	background: rgba(0, 0, 0, 0.05);
	filter: blur(1px);
}
.colormag-message__cta {
	.button.button-hero,.updating-message {
		display: flex;
		padding: 10px 20px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 3px;
		background: #2563EB;
		line-height: normal;
		font-weight: 500;
		font-size: 14px;
		min-height: 37px;
		max-height: 37px;

		&:hover {
			background: #124CC9;
		}
	}
	.button.button-secondary.button-hero {
		background: rgba(15, 103, 173, 0.04);
		border: 1px solid #0F67AD;
		border-radius: 4px;
		padding: 8px 16px;
		line-height: 1.6;
	}
	.btn-contact-support {
		line-height: 1.4;
	}
}
.appearance_page_colormag {
	.colormag-wrap {
		margin: 0 0 0 0;
	}
	#wpcontent {
		padding: 0;
	}
	#wpbody-content {
		.metabox-holder {
			padding: 0;
		}
	}
	.demo-importer {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 20px;
		.wp-filter {
			padding: 0 20px;
			.search-form {
				margin-left: 1em;
			}
			.filter-section {
				float: left;
			}
			.filter-section.right {
				float: right;
			}
			.filter-links {
				li {
					>a {
						&:focus {
							box-shadow: none;
						}
					}
				}
			}
		}
		.theme-browser {
			.theme {
				.premium-demo-banner {
					position: absolute;
					top: 15px;
					right: -16px;
					color: $color_3;
					padding: 0 20px;
					font-weight: 600;
					min-height: 30px;
					line-height: 28px;
					background: #5fbd0a;
					text-transform: uppercase;
					&::before {
						content: '';
						position: absolute;
						left: -15px;
						color: $color_3;
						border: 15px solid #5fbd0a;
						border-left-color: $border-left-color_1;
					}
					&::after {
						content: '';
						position: absolute;
						top: 30px;
						right: 0;
						border: 8px solid #478d07;
						border-right-color: $border-right-color_1;
						border-bottom-color: $border-bottom-color_1;
					}
				}
				.theme-screenshot {
					img {
						object-fit: cover;
					}
				}
			}
		}
		.theme-install-overlay {
			.wp-full-overlay-header {
				background-color: $background-color_5;
			}
			.wp-full-overlay-sidebar-content {
				z-index: 1;
				bottom: 132px;
				.install-theme-info {
					.theme-version {
						margin-top: 0;
					}
					.theme-screenshot {
						width: 100%;
						box-sizing: border-box;
					}
					.premium-demo-tag {
						color: $color_3;
						font-size: 13px;
						font-weight: 400;
						margin-left: 5px;
						padding: 0 10px;
						line-height: 22px;
						border-radius: 3px;
						background: #67c016;
						display: inline-block;
					}
					table.plugins-list-table {
						margin-bottom: 1em;
						.plugin-status {
							float: right;
							span {
								width: 20px;
								height: 20px;
								overflow: hidden;
								border-radius: 50%;
								position: relative;
								vertical-align: top;
								white-space: nowrap;
								text-indent: -9999px;
								display: inline-block;
								border: 2px solid #bfbfbf;
							}
							span.active {
								border-color: $border-color_2;
								&::after {
									position: absolute;
									left: 50%;
									top: 50%;
									opacity: 1;
									width: 25%;
									height: 50%;
									content: '';
									transform-origin: left top;
									border-top: 2px solid #5cb85c;
									border-right: 2px solid #5cb85c;
									transform: scaleX(-1) rotate(135deg) translate(-58%, -40%);
								}
							}
							span.updating-message {
								border-left-color: $border-left-color_2;
								animation: spin .75s linear infinite;
							}
						}
					}
				}
			}
			.wp-full-overlay-footer {
				height: 132px;
				.devices {
					button {
						&:hover {
							background-color: $background-color_6;
						}
						&:focus {
							background-color: $background-color_6;
						}
					}
				}
				.demo-import-actions {
					padding: 20px;
					background: #fff;
					border-bottom: 1px solid #ddd;
					.button {
						width: 100%;
						text-align: center;
					}
					.button.updated-message {
						&::before {
							margin-top: 11px;
						}
					}
					.button.updating-message {
						&::before {
							margin-top: 11px;
						}
					}
				}
			}
		}
		.theme-install-overlay.expanded {
			.wp-full-overlay-footer {
				left: initial;
			}
		}
	}
}
.cm-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	a {
		text-decoration: none;
		font-size: 13px;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	.postbox {
		border: 0;
		min-width: initial;
		margin-bottom: 20px;
		padding: 16px;
		.hndle {
			cursor: inherit;
			margin-bottom: 12px;
			.dashicons {
				padding-right: 5px;
			}
		}
	}
	.postbox-title {
		padding: 24px 24px 32px 24px;
	}
}
.colormag-header {
	background-color: $background-color_1;
	text-align: center;
	margin-bottom: 24px;
	padding: 20px;
	.cm-dashboard-menu-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		ul {
			display: flex;
			flex-wrap: wrap;
			margin-left: 26px;
			gap: 32px;
			li {
				position: relative;
				margin: 0;
				a {
					color: $color_1;
					margin: 0 8px;
					text-align: center;
					font-size: 14px;
					font-weight: 600;
				}
			}
			li.active {
				a {
					color: $color_2;
				}
				&::before {
					height: 3px;
					width: 100%;
					bottom: 0;
					background-color: $background-color_2;
					content: "";
					position: absolute;
					top: 40px;
				}
			}
		}
	}
	.cm-dashboard-head-left {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		img {
			width: 42px;
		}
	}
	>.cm-container {
		display: flex;
		align-items: center;
	}
	.cm-title {
		display: flex;
		align-items: center;
		flex-basis: unset;
		+ {
			div {
				float: right;
				align-items: center;
				a {
					display: inline-block;
					margin: 0 10px;
					vertical-align: middle;
				}
			}
		}
	}
}
.postbox {
	border-radius: 4px;
	border: 1px solid var(--Grey-grey-25, #F4F4F4);
	background: #FFF;
	p {
		color: $color_1;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		margin: 0 0 20px 0;
	}
}
h1.hndle {
	color: $color_1;
	font-size: 26px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
.dashboard-title {
	display: flex;
	span {
		display: flex;
		padding: 4px 6px;
		justify-content: center;
		align-items: center;
		gap: 2px;
		position: absolute;
		left: 295.5px;
		top: 39.5px;
		border-radius: 2px;
		background: rgba(32, 125, 175, 0.1);
		color: $color_2;
		text-align: center;
		font-size: 10px;
		font-style: normal;
		font-weight: 600;
	}
}
.btn-create-new-page {
	display: inline-block;
	background: #2563EB;
	border-radius: 3px;
	color: $color_3;
	padding: 12px 24px;
	font-size: 13px;
	line-height: 1.6;
	box-shadow: 0 1px 0 0 rgba(204, 204, 204, 0.5);
	&:hover {
		color: $color_3;
		opacity: 0.9;
	}
}
.cm-starter-templates {
	margin-bottom: 12px;
	img {
		width: 320px;
	}
}
.cm-quick-settings {
	.cm-quick-settings-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		a {
			&:hover {
				text-decoration-line: none;
				opacity: 0.9;
			}
			color: $color_2;
			font-size: 13px;
			font-style: normal;
			font-weight: 600;
			line-height: 20px;
			text-decoration-line: underline;
		}
	}
	.cm-premium-features-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		a {
			&:hover {
				text-decoration-line: none;
				opacity: 0.9;
			}
		}
	}
	a {
		display: flex;
		align-items: center;
		text-align: center;
		color: $color_4;
		font-feature-settings: 'clig' off, 'liga' off;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 18px;
		text-transform: capitalize;
		&:hover {
			color: $color_2;
		}
		svg {
			margin-right: 4px;
		}
	}
	h2 {
		margin: 0;
	}
	h4 {
		color: $color_1;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 21px;
		margin: 0 0 8px 0;
	}
	.cm-quick-settings-content {
		display: flex;
		flex-direction: column;
		gap: 24px;
		.cm-quick-settings-item {
			border: 1px solid #E2E8F0;
			padding: 20px;
			border-radius: 4px;
			display: flex;
			flex-flow: column nowrap;
		}
	}
}
.cm-premium-features {
	.cm-quick-settings-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		a {
			&:hover {
				text-decoration-line: none;
				opacity: 0.9;
			}
		}
	}
	.cm-premium-features-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		a {
			&:hover {
				text-decoration-line: none;
				opacity: 0.9;
			}
			color: $color_2;
			font-size: 13px;
			font-style: normal;
			font-weight: 600;
			line-height: 20px;
			text-decoration-line: underline;
		}
	}
	a {
		display: flex;
		align-items: center;
		text-align: center;
		color: $color_4;
		font-feature-settings: 'clig' off, 'liga' off;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 18px;
		text-transform: capitalize;
		&:hover {
			color: $color_2;
		}
		svg {
			margin-right: 4px;
		}
	}
	h2 {
		margin: 0;
	}
	h4 {
		color: $color_1;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 21px;
		margin: 0 0 8px 0;
	}
	.cm-premium-features-content {
		display: flex;
		flex-direction: column;
		gap: 24px;
		.cm-premium-features-item {
			border: 1px solid #E2E8F0;
			padding: 20px;
			border-radius: 4px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cm-icon {
				height: 18px;
			}
		}
	}
}
.cm-notification {
	margin-left: 17px;
	&:hover {
		cursor: pointer;
	}
}
.cm-upgrade-to-pro {
	color: $color_2;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.24px;
}
.cm-icon {
	height: 38px;
}
.cm-version {
	color: $color_2;
	display: flex;
	padding: 2px 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 12px;
	border: 1px solid #2563EB;
	background: #F8FAFF;
	margin-left: 5px;
}
.pro-feature {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	margin: 0;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
	>a {
		font-weight: bold;
	}
}
.col-30 {
	a {
		color: $color_2;
		font-size: 13px;
		font-weight: 400;
		line-height: normal;
		text-decoration-line: underline;
		&:hover {
			text-decoration-line: none;
			opacity: 0.9;
		}
	}
	a.activated-plugin {
		color: $color_5;
		text-decoration: none;
		cursor: default;
	}
	.postbox {
		padding: 16px;
		.inside {
			padding: 0;
			p {
				color: $color_6;
				font-size: 13px;
				font-style: normal;
				font-weight: 400;
				line-height: 19.3px;
			}
		}
	}
	h3.hndle {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0;
		span {
			color: $color_1;
			font-size: 16px;
			font-style: normal;
			font-weight: 600;
			line-height: 2.4;
		}
	}
	.ratings {
		display: flex;
		gap: 12px;
		margin-bottom: 14px;
		span {
			color: $color_7;
			font-size: 11px;
			font-weight: 400;
			display: flex;
			align-items: center;
		}
		svg {
			padding-right: 4px;
		}
	}
	.cm-useful-plugins {
		.hndle {
			margin-bottom: 24px;
		}
		.inside {
			margin: 0;
			display: flex;
			justify-content: space-between;
			padding-bottom: 18px;
			align-items: center;
			&:nth-child(2) {
				border-radius: 4px 4px 0 0;
				border-bottom: 1px solid #F4F4F4;
				background: #FFF;
			}
			&:nth-child(3) {
				padding: 18px 0;
			}
		}
	}
	.content-left {
		display: flex;
		gap: 12px;
		align-items: center;
		svg {
			height: 40px;
			width: 40px;
		}
		h4 {
			margin: 0;
		}
		p {
			margin: 0;
		}
	}
}
.postbox-container {
	.colormag-update {
		.colormag-message__content {
			.colormag-message__image {
				flex-basis: 242px;
			}
		}
	}
	.colormag-message__content {
		.colormag-message__cta {
			flex-direction: column;
			align-items: flex-start;
		}
	}
}
.products-page {
	.postbox {
		background: unset;
		box-shadow: unset;
		padding: 0;
		margin-bottom: 32px;
		.hndle {
			margin-bottom: 24px;
		}
	}
	.item {
		background: #fff;
		min-width: 0;
	}
	.inside {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 0;
		margin: 0;
		border-radius: 4px 4px 4px 4px;
		img {
			max-width: -webkit-fill-available;
			border-radius: 4px 4px 0px 0px;
		}
		.content {
			padding: 20px 16px;
			min-height: 130px;
		}
		.cta {
			padding: 20px 16px;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #F4F4F4;
			.activated {
				background: #ACACAC;
				a {
					cursor: default;
				}
				&:hover {
					opacity: unset;
				}
			}
		}
		p {
			color: $color_6;
			font-size: 13px;
			font-weight: 400;
			line-height: 2.0;
		}
		a {
			color: $color_4;
			font-size: 12px;
			font-weight: 400;
			line-height: 1.8;
			letter-spacing: 0.12px;
			text-decoration-line: underline;
			text-transform: capitalize;
			margin-right: 8px;
			&:nth-child(2) {
				&:before {
					height: 12px;
					width: 1px;
					bottom: 24px;
					background-color: $background-color_3;
					content: "";
					position: absolute;
					left: 83px;
				}
			}
		}
		span {
			color: $color_3;
			display: flex;
			height: 32px;
			padding: 4px 16px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			border-radius: 4px;
			background: #2563EB;
			a {
				color: $color_3;
				font-size: 13px;
				text-decoration: none;
				margin: 0 auto;
			}
			&:hover {
				color: $color_3;
				opacity: 0.9;
			}
		}
		h3 {
			margin: 0 0 8px 0;
		}
	}
	.inside__themes {
		margin-bottom: 32px;
	}
	.inside__plugins {
		a {
			&:nth-child(2) {
				&:before {
					bottom: 34px;
				}
			}
		}
	}
}
.help-page {
	.cm-help-top-row {
		display: flex;
		gap: 20px;
		flex-direction: column;
		.postbox {
			display: flex;
			flex-direction: column;
			flex: 1;
			align-items: center;
			padding: 32px 24px;
		}
		h3 {
			color: $color_1;
			font-size: 16px;
			font-weight: 600;
			padding: 24px 0 12px !important;
		}
		p {
			color: $color_6;
			text-align: center;
			font-size: 13px;
			font-weight: 400;
			line-height: 1.9;
			padding: 0 0 32px 0;
		}
		a {
			color: $color_2;
			font-size: 14px;
			font-weight: 400;
			text-decoration-line: underline;
			span {
				&:hover {
					border-color: $border-color_1;
					opacity: 0.9;
				}
			}
		}
		a.help-box {
			padding: 10px 14px;
			&:hover {
				text-decoration-line: none;
				opacity: 0.9;
			}
		}
		span {
			display: inline-flex;
			padding: 10px 14px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			border-radius: 3px;
			border: 1px solid #2563EB;
		}
	}
	h2 {
		margin: 0 0 20px 0;
	}
	.postbox.cm-community {
		padding: 16px;
		display: flex;
		gap: 30px;
		flex-direction: column;
		img {
			max-width: 100%;
		}
		.cm-content {
			padding: 8px 0;
		}
		h3 {
			color: $color_1;
			font-size: 20px;
			font-weight: 400;
			line-height: 2.4;
			margin: 0;
		}
		p {
			margin: 0 0 20px 0;
		}
		span {
			color: $color_3;
			display: flex;
			width: 98px;
			height: 30px;
			padding: 4px 16px;
			justify-content: center;
			align-items: center;
			gap: 2px;
			border-radius: 4px;
			background: #2563EB;
			&:hover {
				opacity: 0.9;
			}
		}
	}
}
.free-vs-pro-page {
	table {
		width: 100%;
		margin-bottom: 32px;
		-webkit-border-horizontal-spacing: 0;
	}
	.fvp-table {
		tbody {
			tr.fvp-heading {
				td {
					background: #F4F4F4;
					color: $color_6;
					font-weight: 600;
				}
			}
			tr {
				td {
					&:first-child {
						width: 50%;
						text-align: left;
					}
					width: 25%;
					background: #fff;
					color: $color_1;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: 2.2;
					padding: 12px;
					text-align: center;
					border-left: 0;
					border-right: 0;
				}
			}
		}
	}
	.postbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 32px;
		background: #F4F4F4;
		h3 {
			padding: 16px 0 12px 0;
		}
		p {
			margin: 0;
			color: $color_6;
			text-align: center;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.8;
		}
		a {
			margin-top: 24px;
		}
		span {
			color: $color_3;
			display: flex;
			padding: 10px 16px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			border-radius: 3px;
			background: #2563EB;
			box-shadow: 0 1px 0 0 rgba(204, 204, 204, 0.5);
		}
	}
}
.cm-dialog {
	position: fixed;
	right: 0;
	top: 32px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 386px;
	background: #fff;
	transform: translateX(100%);
	transition: transform 0.3s;
	z-index: 9999;
	box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.05);
	.dialog-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24px 20px;
		border-bottom: 1px solid #E9E9E9;
		h3 {
			color: $color_1;
			font-size: 16px;
			font-weight: 600;
			line-height: 2.4;
			margin: 0;
		}
		.dialog-close {
			&:hover {
				cursor: pointer;
			}
		}
	}
	.dialog-content {
		overflow: auto;
		.cm-changelog {
			padding: 20px;
			flex: 1 1 0;
		}
		.cm-changelog__list-item {
			margin-bottom: 28px;
		}
		.cm-changelog__list-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			gap: 0.5rem;
			h4 {
				margin: 0;
				line-height: 1.33;
				font-size: 14px;
				font-weight: 600;
			}
			p {
				font-size: 11px;
				line-height: 1;
				margin: 0;
			}
		}
		.cm-changelog__change-item {
			position: relative;
			margin: 20px 0;
			&::after {
				background-color: $background-color_4;
				bottom: 0;
				content: "";
				height: 100%;
				left: 11px;
				position: absolute;
				top: 0;
				width: 2px;
			}
			span {
				display: inline-flex;
				vertical-align: top;
				align-items: center;
				max-width: 100%;
				line-height: 1.7;
				outline: transparent solid 2px;
				outline-offset: 2px;
				border-radius: 0.375em;
				font-size: 14px;
				padding: 0 8px;
				position: sticky;
				z-index: 9999;
				top: 0;
				margin-bottom: 20px;
			}
			.cm-changelog__change-list {
				padding-top: 10px;
			}
			p {
				margin: 0 0 16px 0;
				padding-left: 40px;
				position: relative;
				&::before {
					content: "✓";
					position: absolute;
					left: 9px;
					top: 50%;
					transform: translateY(-50%);
					font-size: 10px;
					z-index: 999;
				}
				&::after {
					background-color: $background-color_4;
					background-position: 50% center;
					border-radius: 50%;
					content: "";
					height: 20px;
					width: 20px;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 2px;
					z-index: 99;
				}
			}
		}
		.cm-changelog__change-item.item--fix {
			span {
				color: $color_8;
				background: #efefff;
			}
			p {
				&::before {
					color: $color_8;
				}
				&::after {
					background: #efefff;
				}
			}
		}
		.cm-changelog__change-item.item--feature {
			span {
				color: $color_9;
				background: #c6f6d5;
			}
			p {
				&::before {
					color: $color_9;
				}
				&::after {
					background: #c6f6d5;
				}
			}
		}
		.cm-changelog__change-item.item--added {
			span {
				color: $color_10;
				background: #edf2f7;
			}
			p {
				&::before {
					color: $color_10;
				}
				&::after {
					background: #edf2f7;
				}
			}
		}
		.cm-changelog__change-item.item--tweak {
			span {
				color: $color_11;
				background: #e9d8fd;
			}
			p {
				&::before {
					color: $color_11;
				}
				&::after {
					background: #e9d8fd;
				}
			}
		}
		.cm-changelog__change-item.item--enhancement {
			span {
				color: $color_12;
				background: #b2f5ea;
			}
			p {
				&::before {
					color: $color_12;
				}
				&::after {
					background: #b2f5ea;
				}
			}
		}
	}
}
.cm-dialog.open {
	transform: translateX(0%);
}
.tips {
	cursor: help;
	text-decoration: none;
}
img.tips {
	padding: 5px 0 0;
}
#tiptip_holder {
	display: none;
	z-index: 8675309;
	position: absolute;
	top: 0;
	left: 0;
}
#tiptip_holder.tip_top {
	padding-bottom: 5px;
	#tiptip_arrow_inner {
		margin-top: -7px;
		margin-left: -6px;
		border-top-color: $border-top-color_1;
	}
}
#tiptip_holder.tip_bottom {
	padding-top: 5px;
	#tiptip_arrow_inner {
		margin-top: -5px;
		margin-left: -6px;
		border-bottom-color: $border-bottom-color_2;
	}
}
#tiptip_holder.tip_right {
	padding-left: 5px;
	#tiptip_arrow_inner {
		margin-top: -6px;
		margin-left: -5px;
		border-right-color: $border-right-color_2;
	}
}
#tiptip_holder.tip_left {
	padding-right: 5px;
	#tiptip_arrow_inner {
		margin-top: -6px;
		margin-left: -7px;
		border-left-color: $border-left-color_3;
	}
}
#tiptip_content {
	color: $color_3;
	font-size: 0.8em;
	max-width: 150px;
	background: #333;
	text-align: center;
	border-radius: 3px;
	padding: 0.618em 1em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	code {
		padding: 1px;
		background: #888;
	}
}
#tiptip_arrow {
	position: absolute;
	border-color: $border-color_3;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}
#tiptip_arrow_inner {
	position: absolute;
	border-color: $border-color_3;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}
.demo-import-confirm-message {
	font-size: 14px;
	padding: 10px 10px 0;
	ol {
		margin-left: 20px;
		.warning {
			color: $color_13;
		}
	}
}
.jconfirm-buttons {
	.demo-import-confirm-button {
		background: #f00000;
		color: $color_14;
	}
	.demo-import-cancel-button {
		background: #eeeeee;
		border-color: $border-color_4;
		color: $color_15;
	}
}
body.demo-import-message-popup {
	overflow: visible;
	visibility: visible;
}
.themegrill-demo-importer-BlankState {
	position: relative;
	padding-top: 200px;
	padding-bottom: 400px;
	text-align: center;
	background: url("../images/starter-templates-background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	.themegrill-demo-importer-BlankState-icon {
		fill: #ddd;
		width: 128px;
		height: 128px;
		margin: 0 0 .875em;
	}
	.themegrill-demo-importer-BlankState-info {
		position: relative;
		margin: 20px 10px;
		background: #fff;
		max-width: 100%;
		padding: 10px 20px;
		border-radius: 9px;
		z-index: 99;
	}
	.starter-template-overlay {
		position: absolute;
		inset: 0;
		background: #F0F0F1;
		opacity: 0.5;
	}
	h2.themegrill-demo-importer-BlankState-message {
		color: $color_1;
		text-align: center;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.6;
	}
	span {
		color: $color_3;
		display: flex;
		padding: 10px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		align-self: stretch;
		border-radius: 4px;
		background: #2563EB;
	}
}
.colormag-update {
	background-color: $background-color_7;
	.colormag-message__heading {
		max-width: 768px;
		display: flex;
		align-items: center;
	}
	.colormag-message__content {
		flex-wrap: wrap;
		.colormag-message__image {
			flex-basis: 320px;
			height: 214px;
			min-height: 100px;
		}
	}
	.colormag-message__text {
		flex: 1;
	}
}
.notice.colormag-notice {
	margin-top: 16px;
}
.colormag-notice {
	position: relative;
	padding: 0;
	border-left-color: $border-left-color_4;
	border-right-color: $border-right-color_3;
	border-bottom-color: $border-bottom-color_3;
	border-top-color: $border-top-color_2;
	border-right-width: 0;
	border-bottom-width: 0;
	border-top-width: 0;
	border-radius: 0 8px 8px 0;
	.links {
		margin: 1.2em 0;
		display: flex;
		flex-wrap: wrap;
		a {
			margin: 0;
			>span {
				vertical-align: middle;
				color: $color_16;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				padding: 10px 20px;


			}
		}
	}
	.notice-text {
		.coupon-code {
			display: inline-block;
		}
	}
	.notice-dismiss {
		text-decoration: none;
	}
}
.notice-dismiss {
	&:before {
		color: $color_17;
	}
}

.cm-welcome-notice-remove {
	color: #7A7A7A;

	&:hover {
		color: #2563EB;
	}
}

.colormag-message__content {
	display: flex;
	gap: 24px;
	justify-content: space-between;
	.colormag-message__image {
		img {
			border-radius: 0 8px 8px 0;
		}
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		.colormag-screenshot {
			width: 100%;
			margin: 0;
			float: none;
			border-radius: 4px;
			object-fit: cover;
		}
	}
	.colormag-message__head {
		margin-bottom: 24px;
	}
	.colormag-message__subheading {
		color: $color_1;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin: unset;
	}
	.colormag-message__heading {
		color: $color_1;
		font-size: 26px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin-top: 6px;
		margin-bottom: 16px;
	}
	.colormag-message__description {
		color: $color_1;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.colormag-message__cta {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-bottom: 16px;

		.plugin-install-notice {
			color: $color_18;
			font-size: 13px;
			font-style: normal;
			font-weight: 400;
		}
		a {
			&:before {
				margin: 5px;
				vertical-align: middle;
			}
		}
	}
}
.colormag-review-message__content {
	display: flex;
	.colormag-message-review__text {
		padding: 24px 0;
	}
}
.cm-review-notice-content {
	display: flex;
	gap: 24px;
	justify-content: space-between;
}
h1.colormag-message__heading {
	font-weight: 600;
	font-size: 28px;
	line-height: 37px;
	color: $color_19;
	margin-bottom: 12px;
}
h2.colormag-message__heading {
	margin-bottom: 24px;
	font-weight: 400;
	color: $color_19;
	font-size: 16px;
	line-height: 180%;
}
a.colormag-message-close {
	position: absolute;
	top: 2px;
	right: 30px;
	padding: 0;
	font-size: 13px;
	line-height: 1.23076923;
	text-decoration: none;
	&:before {
		position: absolute;
		top: 8px;
		left: 0;
		-webkit-transition: all .1s ease-in-out;
		transition: all .1s ease-in-out;
	}
}
.colormag-message__text {
	max-width: 660px;
	align-self: center;
	padding: 28px 0 28px 32px;
	img {
		height: 50px;
		width: 50px;
	}
}
.colormag-notice.theme-review-notice {
	border-left-color: $border-left-color_5;
	.colormag-message__image {
		flex: 0;
		min-height: auto;
		margin: 32px;
		padding-right: 0;
		border-right: none;
	}
	.colormag-logo--png {
		width: 80px;
		height: 80px;
	}
	h3 {
		font-size: 26px;
		line-height: normal;
		color: $color_1;
		margin-bottom: 8px;
		margin-top: 0;
	}
	.cm-review-content {
		font-size: 14px;
		line-height: 24px;
		color: $color_1;
		font-weight: 400;
		margin: 0 0 14px 0;
		max-width: 720px;
		padding: 2px 0;
	}
	span.dashicons.dashicons-smiley.smile-icon {
		background: #f7e143;
		border-radius: 50%;
		font-size: 15px;
		border: 1px solid;
		width: 17px;
		height: 17px;
	}
	.button-primary {
		background: #6547DB;
		border-color: $border-color_5;
		box-shadow: none;
		color: $color_3;

		&:hover {
			background: #452CB9;
		}
	}
	.button-secondary {
		color: $color_20;
		border-color: $border-color_5;
		background: #f6f7f7;
		vertical-align: top;
		span {
			color: $color_21;
			background: #FFF;
			-webkit-border-radius: inherit;
			-moz-border-radius: inherit;
			border-radius: inherit;

			&:hover {
				background: #F2F2F2;
			}
		}
	}
	strong {
		color: $color_5;
	}
	.links {
		margin-top: 16px;
		margin-bottom: 0;
		display: flex;
		gap: 16px;
	}
	a.btn {
		display: flex;
		max-width: fit-content;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
}
.colormag-global_review_image {
	display: flex;
	align-items: center;
}
.colormag-five-start-review {
	display: flex;
	align-items: center;
	gap: 8px;
	p {
		margin: 0;
	}
}
.demo-import-migrate-notice {
	.colormag-message__image {
		.colormag-screenshot {
			height: 100px;
			width: 100px;
		}
	}
	.colormag-message__content {
		max-width: 768px;
		.colormag-message__image {
			flex: 0;
		}
	}
}

@media (min-width: 768px) {
	.themegrill-demo-importer-BlankState {
		padding-bottom: 695px;
		padding-top: 200px;
		padding-bottom: 695px;
		text-align: center;
		background-size: contain;
		.themegrill-demo-importer-BlankState-info {
			margin: 20px auto;
			padding: 40px 50px;
			margin: 0 auto;
			background: #fff;
			max-width: 400px;
			padding: 50px 70px 55px 70px;
			border-radius: 9px;
		}
		span {
			padding: 16px;
			color: $color_3;
			display: flex;
			padding: 16px;
			justify-content: center;
			align-items: center;
			gap: 8px;
			align-self: stretch;
			border-radius: 4px;
			background: #2563EB;
		}
		.themegrill-demo-importer-BlankState-icon {
			fill: #ddd;
			width: 128px;
			height: 128px;
			margin: 0 0 .875em;
		}
		h2.themegrill-demo-importer-BlankState-message {
			color: $color_1;
			text-align: center;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 1.6;
		}
	}
	.colormag-wrap {
		.colormag-header {
			padding: 12px 20px;
		}
	}
	.colormag-header {
		.cm-dashboard-head-right {
			ul {
				gap: 16px;
				li.active {
					&::before {
						top: 44px;
					}
				}
			}
		}
		.cm-dashboard-head-left {
			display: flex;
			align-items: center;
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			a {
				margin-left: 17px;
			}
			img {
				width: 42px;
				border-radius: 20px;
				border: 1px solid rgba(211, 211, 211, 0.4);
			}
		}
		>.cm-container {
			display: flex;
			align-items: center;
			display: flex;
			align-items: center;
		}
		.cm-title {
			display: flex;
			align-items: center;
			flex-basis: 20%;
			display: flex;
			align-items: center;
			+ {
				div {
					float: right;
					align-items: center;
					float: right;
					align-items: center;
					a {
						display: inline-block;
						margin: 0 10px;
						vertical-align: middle;
						display: inline-block;
						margin: 0 10px;
						vertical-align: middle;
					}
				}
			}
		}
		background-color: $background-color_1;
		text-align: center;
		margin-bottom: 32px;
		padding: 20px;
		.cm-dashboard-menu-container {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			ul {
				display: flex;
				flex-wrap: wrap;
				margin-left: 26px;
				gap: 32px;
				li {
					position: relative;
					margin: 0;
					a {
						color: $color_1;
						margin: 0 8px;
						text-align: center;
						font-size: 14px;
						font-weight: 600;
					}
				}
				li.active {
					a {
						color: $color_2;
					}
					&::before {
						height: 3px;
						width: 100%;
						bottom: 0;
						background-color: $background-color_2;
						content: "";
						position: absolute;
						top: 44px;
					}
				}
			}
		}
	}
	.col-70 {
		float: left;
		width: 70%;
		box-sizing: border-box;
	}
	.col-30 {
		float: left;
		width: 30%;
		box-sizing: border-box;
		padding-left: 20px;
	}
	.products-page {
		.inside {
			display: grid;
			gap: 24px;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
	.help-page {
		.cm-help-top-row {
			flex-direction: row;
		}
	}
}
@media (min-width: 1050px) {
	.cm-quick-settings {
		.cm-quick-settings-content {
			display: grid;
			gap: 24px;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
	.cm-premium-features {
		.cm-premium-features-content {
			display: grid;
			gap: 24px;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
	.help-page {
		.postbox.cm-community {
			flex-direction: row;
			img {
				max-width: 348px;
			}
		}
	}
}
@media screen and (max-width: 768px) {
	.colormag-message__content {
		.colormag-message__image {
			display: none;
		}
	}
	.colormag-notice.theme-review-notice {
		.colormag-message__content {
			display: flex;
			flex-direction: column;
		}
		.button-primary {
			margin-bottom: 10px;
		}
		.button-secondary {
			margin-bottom: 10px;
		}
	}
}
@media (max-width: 768px) {
	.colormag-message__content {
		.colormag-screenshot {
			display: none;
		}
		.colormag-message__text {
			padding: 0;
			width: 100%;
		}
	}
}
@media screen and (max-width: 767px) {
	.colormag-header {
		>.cm-container {
			display: flex;
			flex-wrap: wrap;
		}
		.cm-title {
			justify-content: center;
			flex-basis: 20%;
			order: 1;
			+ {
				div {
					float: none;
					margin-top: 20px;
					margin-bottom: 20px;
				}
			}
		}
		.cm-dashboard-head-left {
			flex-basis: 80%;
			order: 2;
		}
		.cm-dashboard-menu-container {
			flex-basis: 100%;
			order: 3;
		}
	}
}
@media (min-width: 1236px) {
	.postbox-container {
		.colormag-message__content {
			.colormag-message__cta {
				flex-direction: row;
			}
		}
	}
}