#jet_engine_dashboard {
	visibility: hidden;
	&.is-mounted {
		visibility: visible;
	}
}

a.jet-engine-dash-help-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-weight: bold;
	svg {
		margin: -2px 7px 0 0;
		.rtl & {
			margin: -2px 0 0 7px;			
		}
	}
}

.wp-admin .cx-vui-select.size-fullwidth {
	width: 100%;
	max-width: 100%;
}

.jet-engine-skins-wrap {
	padding: 0 0 20px;
}

.cx-vui-component.jet-import-preset {
	justify-content: space-between;
}

.jet-shortocde-generator {
	p {
		font-size: 13px;
		line-height: 17px;
		color: #7b7e81;
	}
	&__result {
		position: relative;
		margin: 15px 20px 0;
		background: #f5f5f5;
		padding: 10px 40px 10px 10px;
		border: 1px dotted #dcdcdd;
		font-size: 15px;
		line-height: 20px;
		font-family: 'Courier New', monospace;
		direction: ltr;
		word-break: break-word;
		&-copy {
			position: absolute;
			top: 2px;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8px;
			cursor: pointer;
			svg {
				fill: currentColor;
				width: 22px;
				height: 22px;
			}
			&:hover {
				svg {
					fill: #007cba;
				}
			}
		}
		.cx-vui-tooltip {
			width: 60px;
		}
	}
}

.jet-engine-modules {
	&.cx-vui-repeater__items {
		display: flex;
		flex-wrap: wrap;
		.cx-vui-repeater-item {
			flex: 0 0 calc( 33.33333% - 20px );
			margin: 10px;
		}
	}
	.info-notice {
		padding: 20px;
		margin: 0 0 20px;
		border-radius: 3px;
		background: #cce5f1;
		a {
			color: #007cba;
		}
	}
}

.je-module-heading {
	display: flex;
	align-items: center;
}

.jet-module-icon {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 5px;
	svg {
		width: 20px;
		height: 20px;
		margin: 0;
	}
	&--blocks {
		svg {
			width: 14px;
			height: auto;
			margin: 0 3px;
		}
	}
	&--inactive {
		opacity: .4;
	}
}

.jet-engine-module-supports {
	padding: 15px 0 0 0;
}

.jet-enigne-modules-save {
	padding: 10px 10px 0;
}

.jet-engine-module-info-close {
	width: 24px;
	height: 24px;
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	svg {
		path {
			transition: all 150ms linear;
			fill: #dcdcdd;
		}
	}
	&:hover {
		svg {
			path {
				fill: #007cba;
			}
		}
	}
}

.jet-engine-module-update {
	height: 24px;
	display: flex;
	margin: 0 2px;
	align-items: center;
	color: #007cba;
	font-weight: 500;
	font-size: 15px;
	svg {
		width: 24px;
		margin: 0 2px;
		path {
			fill: #007cba;
		}
	}
}

.jet-engine-module-update-notice {
	display: flex;
	align-items: center;
}

.jet-engine-module-info {
	width: 24px;
	height: 24px;
	svg {
		path {
			transition: all 150ms linear;
			fill: #dcdcdd;
		}
	}
}

.jet-engine-module-info,
.jet-engine-module-update-notice {
	position: relative;
	cursor: pointer;

	.cx-vui-tooltip {
		left: 50%;
		margin-left: -80px;
		width: 160px;
		bottom: calc( 100% + 15px );
		box-sizing: border-box;
		pointer-events: none;
		transition: all 150ms linear;
		opacity: 0;
		padding-left: 0;
		padding-right: 0;
	}
	&:hover {
		.cx-vui-tooltip {
			opacity: 1;
			bottom: 100%;
		}
		svg {
			path {
				fill: #007cba;
			}
		}
	}
}

.jet-engine-module-box {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	&-overlay {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: rgba( 0, 0, 0, .6 );
	}
}

.jet-engine-module {
	display: flex;
	position: relative;
	z-index: 2;
	padding: 40px;
	background: #fff;
	box-shadow: 0 2px 6px rgba( 35, 40, 45, .07 );
	border-radius: 6px;
	width: 1100px;
	max-width: 90vw;
}

.jet-engine-module-video {
	padding-right: 20px;
	.rtl & {
		padding-right: 0;
		padding-left: 20px;
	}
}

.jet-engine-module-installed {
	&-message {
		padding: 0 0 15px;
	}
	&-actions {
		display: flex
	}
	&-action {
		margin: 0 10px 0 0;
	}
}

.jet-engine-links {
	padding: 20px 0 0 0;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
	&__title {
		font-size: 15px;
		line-height: 20px;
		color: #23282d;
		font-weight: 500;
		padding: 0 0 10px;
	}
	&__item {
		padding: 6px 0 0;
	}
	&__link {
		color: #007cba;
		text-decoration: none;
		display: inline-flex;
		align-items: flex-start;
		svg {
			margin: 2px 8px 0 0;
			.rtl & {
				margin: 2px 0 0 8px;
			}
			path {
				fill: #007cba;
			}
		}
	}
}

.jet-engine-details {
	padding: 0;
	overflow: hidden;
	font-size: 13px;
	line-height: 17px;
	color: #7b7e81;
	p {
		padding: 0 0 6px;
		margin: 0;
		&:last-child {
			padding: 0;
		}
	}
}

.cx-vui-component--jet-is-stackable {
	position: sticky;
	bottom: 0;
	background: #fff;
}

.jet-engine-skins {
	&__header {
		padding: 25px 0;
		display: flex;
		align-items: center;
		cursor: pointer;
		&-label {
			font-weight: 500;
			font-size: 15px;
			line-height: 23px;
			color: #007CBA;
			margin: 0 25px 0 0;
			display: flex;
			align-items: center;
			svg {
				margin: -1px 8px 0 0;
			}
			.rtl & {
				margin: 0 0 0 25px;
				svg {
					margin: -1px 0 0 8px;
					transform: scale(-1);
				}
			}
			.jet-engine-skins--active & {
				svg {
					transform: rotate(90deg);
				}
			}
		}
		&-desc {
			font-size: 15px;
			line-height: 23px;
			color: #7B7E81;
		}
	}
	border-bottom: 1px solid #ECECEC;
	&:first-child {
		border-top: 1px solid #ECECEC;
		margin-top: 20px;
	}
	&--active {
		&:last-child {
			border-bottom: none;
		}
	}
	&__content {
		padding: 0 0 30px;
		.cx-vui-subtitle {
			padding: 0 0 15px;
		}
		p {
			font-size: 15px;
			line-height: 23px;
			color: #7B7E81;
			margin: 0;
			padding: 0 0 15px;
		}
	}
}

.jet-engine-import {
	&__btn {
		padding: 20px 0 0 0;
	}
	&__log {
		background: #e9f6ea;
		padding: 20px;
		border-radius: 4px;
		
		& + & {
			margin-top: 15px;
		}
		
		&-title {
			color: #46B450;
			font-weight: 500;
			font-size: 15px;
			line-height: 23px;
			margin: 0 0 6px;
			display: flex;
			align-items: center;
			svg {
				margin: -1px 10px 0 0;
				.rtl & {
					margin: -1px 0 0 10px;
				}
			}
		}
		&-item {
			font-size: 15px;
			line-height: 23px;
			b {
				color: #23282D;
				font-weight: 500;
			}
			span {
				color: #7B7E81;
				font-style: italic;
			}
		}

		&--error {
			background: #fbf0f0;

			.jet-engine-import__log-title {
				color: #c92c2c;
			}
		}
	}
}

.jet-engine-skins-settings-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
	grid-gap: 10px;
}

.jet-engine-skins-settings-item {
	background: #fff;
	padding: 15px 20px;
	.cx-vui-component {
		padding: 0;
		.cx-vui-component__meta {
			border: none;
			padding: 0;
			margin: 0;
		}
		.cx-vui-component__meta {
			padding: 0 0 11px;
		}
	}
}

.cx-vui-component.cx-vui-component--sample-content {
	padding: 20px 0;
	.cx-vui-component__meta {
		margin: 0 15px 0 0;
		.rtl & {
			margin: 0 0 0 15px;
		}
	}
}

.validatation-result {
	padding: 15px 25px;
	margin: 0 0 20px;
	&--success {
		background: #E9F6EA;
	}
	&--error {
		background: #FBF0F0;
	}
}

.jet-engine-maps-triggers {
	a {
		border-bottom: 1px dashed currentColor;
		text-decoration: none;
	}
}

.cx-vui-collapse-mini {
	&__wrap {
		padding: 0 0 20px;
	}
	&__item:first-child {
		border-top: 1px solid #ECECEC;
		margin-top: 20px;
	}
	&__item {
		border-bottom: 1px solid #ECECEC;
	}
	&__header {
		padding: 25px 0;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	&__header-label {
		font-weight: 500;
		font-size: 15px;
		line-height: 23px;
		color: #007CBA;
		margin: 0 25px 0 0;
		display: flex;
		align-items: center;
	}
	&__header-desc {
		font-size: 15px;
		line-height: 23px;
		color: #7B7E81;
	}
	&__content {
		padding: 0 0 30px;
	}
	&__item--active svg {
		transform: rotate(90deg);
	}
	&__header-label svg {
		margin: -1px 8px 0 0;
		transition: 0.3s;
	}
}