@import 'snippets';


.mk-options-container,
.mk-metabox-wrapper,
.vc_edit_form_elements  {
		color:#525252;

		input[type=text], 
		input[type=password], 
		input[type=checkbox], 
		input[type=color], 
		input[type=date], 
		input[type=datetime], 
		input[type=datetime-local], 
		input[type=email], 
		input[type=month], 
		input[type=number], 
		input[type=radio], 
		input[type=tel], 
		input[type=time], 
		input[type=url], 
		input[type=week], 
		input[type=search], 
		select, 
		textarea {
			.box-shadow(none) !important;
			.border-radius(6px);
			border-color:#d9d9d9;
		}

		a {
			text-decoration: none;
		}
		a:focus, li:focus {
		    outline: none;
		    .box-shadow(none) !important;
		}
}
/* **
**
** Specific Options Layouts
------------------------------------------------------------- */

.mk-groupset-holder {
	background-color: #f2f2f2;
	padding:10px 0 0;
	margin: 0px 0 30px;
	position: relative;
	h3 {
		padding:0 0 15px 25px;
		font-size: 22px;
		color: #222222;
	}
	.mk-single-option {
		border-bottom: 1px solid #d9d9d9 !important;
	}
	> div:last-of-type {
		border:none !important;
		margin-bottom: 0 !important;
	}
}
.mk-groupset-heading {
	position: absolute;
	right:15px;
	top:15px;
}

.mk-groupset-desc {
	color: #686b70;
	display: block;
	font-size: 13px;
	font-style: italic;
	margin-bottom: 10px;
}


/* Textboxes */
.mk-single-option {
	.mk-highlighted-text {
		background-color: #bbbbbb;
		color: #fff;
		padding: 5px 10px;
		font-size: 14px;
		margin-right: 10px;
	}
	input[type="text"], textarea {
		padding: 10px;

	}
	textarea {
		margin-bottom: 10px;
		width: 100%;
	}
}
.masterkey-options-page .mk-single-option {
	padding-left: 25px;
}
.wp-editor-container textarea {
	border: none !important;
}
@media handheld, only screen and (max-width:1300px) {
	.mk-textbox, .chzn-container {
		width: 100% !important;
	}
}

/* Upload Option */
.show-upload-image {
	display: block;
	margin-top: 20px;
	width: 300px;
	img {
		max-width: 100%;
		width: auto\9;
		height: auto;
		border: 0;
		vertical-align: middle;
		-ms-interpolation-mode: bicubic;
	}
}
.mk-select,
.vc_edit_form_elements select{
	display: block;
	padding: 10px 70px 10px 13px !important;
	max-width: 100%;
	height: auto !important;
	border: 1px solid #e3e3e3;
	background: url('../../images/selectbox-arrow.png')  right center  no-repeat;
	background-color: #fff;
	color: #444444;
	font-size: 12px;
	line-height: 16px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	option {
		padding: 0 4px; 
	}
}
 
/* Toggle Button */
.mk-toggle-button {
	display: block;
	background-color: #e9e9e9;
	width: 62px;
	height: 32px;
	cursor: pointer;
	position: relative;
    direction: ltr;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	.toggle-handle {
		width: 26px;
		height: 26px;
		background-color: #fff;
		position: relative;
		display: block;
		left: 4px;
		top: 3px;
		.box-shadow(1px 1px 3px rgba(0,0,0,0.3));
	}
	&.mk-toggle-on {
		background-color: #89daff;
		.toggle-handle {
			left: 32px;
		}
	}
	&.mk-toggle-off {
		background-color: #e9e9e9;
	}
}
-html[dir="rtl"] {
	.mk-toggle-button {
		&.mk-toggle-on {
			background-color: #89daff;
			.toggle-handle {
				right: 32px;
			}
		}
	}
}
.mk-toggle-button, .toggle-handle {
	.border-radius(40px);
	.transition(all 0.2s ease);
}

/* Masterkey Built-in Selectbox */
.mk-fancy-selectbox {
	position: relative;
	margin-bottom: 15px;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	&.selectbox-focused > .mk-selector-heading .mk-selector-arrow {
		position: relative;
		z-index: 50;
		background-color: #dddddd;
	}
	&.selectbox-focused > .mk-selector-heading {
	}
	.mk-selector-heading {
		height: 40px;
		font-weight: bold;
		line-height: 40px;
		cursor: pointer;
		background: #dddddd;
		.selected_item {
			white-space: nowrap;
			overflow-x: hidden;
			display: inline-block;
			margin-left: 12px;
			height: 40px;
			color: #555555;
			line-height: 40px;
		}
		.selected_color {
			display: inline-block;
			width: 32px;
			height: 23px;
			margin: 5px 10px 0 5px;
		}
		.mk-selector-arrow {
			display: block;
			float: right;
			width: 40px;
			height: 40px;
			background: url(../../images/selectbox-arrow.png) center center no-repeat;
		}
	}
	.mk-select-options {
		position: absolute;
		top: 40px;
		left: 0;
		z-index: 40;
		display: none;
		background: #dddddd;
		border-top: 1px solid #aaaaaa;
		.mk-select-option {
			display: block;
			padding: 6px 7px 6px 17px;
			color: #555555;
			font-size: 12px;
			cursor: pointer;
			margin: 3px;
			b {
				display: inline-block;
				font-weight: normal;
				line-height: 25px;
				vertical-align: top;
			}
			.mk-option-color {
				display: inline-block;
				width: 60px;
				height: 20px;
				margin-right: 10px;
			}
			&:hover {
				background-color: #aaaaaa;
			}
			&.selected {
			}
		}
	}
	&.color-based .mk-select-option {
		padding: 5px 7px 0px 10px;
	}
	&.color-based .selected_item {
		line-height: 30px;
		vertical-align: top;
		height: 30px;
		margin: 3px 0 0 0;
	}
}

/* Range Input */
.mk-ui-input-slider {
	margin: 30px 0 20px 0;
	direction: ltr;
	.ui-slider-horizontal {
		position: relative;
		float: left;
		clear: right;
		width: 266px;
		height: 6px;
		top: 0;
		background: #d9d9d9 !important;
		border: none !important;
		cursor: pointer;
	}
	.progress {
		display: none;
		height: 9px;
		background-color: #C5FF00;
		opacity: 0.6;
	}
	.ui-slider-handle {
		position: absolute;
		top: -9px !important;
		z-index: 2;
		width: 22px !important;
		height: 22px !important;
		background-color: #fff !important;
		border: none !important;
		cursor: move;
		margin-left: -10px !important;
		.box-shadow(1px 1px 4px rgba(0,0,0,0.3)) !important;
	}
	.range-input-selector {
		float: left;
		margin: -14px 0 5px 25px !important;
		padding: 8px 0 !important;
		width: 90px;
		background-color: #fff;
		color: #555555;
		text-align: center;
	}
	.unit {
		font-family: georgia;
		display: inline-block;
		margin-left: 8px;
		color: #aaaaaa;
		font-style: italic;
		font-size: 14px;
		line-height: 14px;
		position: relative;
		top:-8px;
	}
}

.mk-main-sidebar-navigator {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 188px;
}

html[dir="rtl"] .mk-main-sidebar-navigator {
	float: right;
	text-align: right;
}

.mk-main-sidebar-navigator-ul {
	&, li {
		margin: 0;
		padding: 0;
	}

	a {
		display: block;
	}

	li a {
		color: #525252;
		padding: 12px;
	}

	li.menu a {
		font-weight: bold;
	}

	li.menu.ui-state-active,
	li.menu.active,
	li.menu.ui-state-hover {
		background-color: #6d808f;

		> a {
			color: #fff !important;
		}
	}

	li.sub-menu {
		display: none;
		background-color: #cbcfd4;

		> a {
			padding-left: 24px;
		}

		&.ui-state-hover,
		&.active,
		&.ui-state-active {
			background-color: #babec3;
		}
	}
}

html[dir="rtl"] {

	.mk-ui-input-slider {
		float: right;
	}

	.mk-main-navigator li {
		float: right;
		margin: 13px 15px 5px 0;
	}
	.masterkey-branding {
		right:auto;
		left:40px;
	}
	.mk-heading-option .mk-page-heading {
		padding: 0 33px 0 0;
	}
	.mk-groupset-holder h3 {
		padding: 0 25px 15px 0;
	}
	.secondary-button {
		margin-right: 10px;
	}
}

.ui-slider-horizontal, .ui-slider-handle, .range-input-selector {
	.border-radius(30px) !important;
}

/* Checkbox & Radio Button */
.mk-select-radio {
	input[type="checkbox"] {
		display: none;
	}
	input[type="checkbox"] + label {
		margin-right: 30px;
		font-size: 12px;
	}
	input[type="checkbox"] + label span {
		display: inline-block;
		margin: 0 5px 0 0;
		width: 25px;
		height: 25px;
		background: url(../../images/mk-checkbox-radio.png) left top no-repeat;
		vertical-align: middle;
		cursor: pointer;
	}
	input[type="checkbox"]:checked + label span {
		background: url(../../images/mk-checkbox-radio.png) right top no-repeat;
	}
	input[type="radio"] {
		display: none;
	}
	input[type="radio"] + label {
		margin-right: 30px;
		font-size: 12px;
	}
	input[type="radio"] + label span {
		display: inline-block;
		margin: 0 5px 0 0;
		width: 25px;
		height: 25px;
		background: url(../../images/mk-checkbox-radio.png) left bottom no-repeat;
		vertical-align: middle;
		cursor: pointer;
	}
	input[type="radio"]:checked + label span {
		background: url(../../images/mk-checkbox-radio.png) right bottom no-repeat;
	}
}

/* Custom Sidebar */
.custom-sidebar-wrapper {
	margin-bottom: 40px;
}
.selected-sidebar {
	display: block;
	width: 300px;
	margin-top: 20px;
	border-bottom: none;
}
.default-sidebar-item {
	display: none;
}
.sidebar-item {
	position: relative;
	display: none;
	overflow: hidden;
	padding: 12px 10px;
	width: 300px;
	background-color: #f2f2f2;
	border: 1px solid #d9d9d9;
	margin-bottom: 3px;
	.delete-sidebar {
		position: absolute;
		top: 12px;
		right: 12px;
		font-size: 16px;
		color: #ed1c24;
	}
}

/* Visual Selector */
.mk-visual-selector {
	margin-top: 20px;

	a {
		position: relative;
		display: inline-block;
		line-height: 4px;
		margin: 16px 10px 10px 0;
		border: 3px solid transparent;
		vertical-align: top;
		.selector-tick {
			position: absolute;
			top: -10px;
			right: -10px;
			display: block; 
			width: 35px;
			height: 35px;
			background: url(../../images/selector-tick.png) no-repeat;
			z-index: 2;
		}
		&.current {
			border: 3px solid #14a5ed;
		} 
	}
	&.shape-selector {
		a {
			border: 3px solid #e4e4e4;
			border-radius: 8px;
			margin-right: 15px;
			&.current {
				border: 3px solid #14a5ed;
			}
		}
	}
}
.mk-visual-selector {
  margin-top: 20px;
  
}

/* Message Boxes */
.mk-message-box {
	position: fixed;
	top: 50%;
	left: 50%;
	.translate(-50%, -50%);
	display: none;
	z-index: 10000;
	padding: 80px;
	.border-radius(6px);
	min-width: 100px;
	max-width: 500px;
	border: 1px solid #d9d9d9;
	background-color: #fff;
	text-align: center;
	.box-shadow(0 5px 23px rgba(0,0,0,0.2));
	.mk-message-text {
		display: block;
		padding: 30px 0 45px;
		font-size: 24px;
		font-weight: 300;
		line-height: 35px;
	}
	&.is-active {
		display: block;
	}
}

/* Background Seclector */
.mk-general-bg-selector {
	position: relative;
	max-width: 820px;
	min-height: 700px;
	margin-bottom: 30px;
	.outer-wrapper {
		border: 3px solid #aaaaaa;
		padding: 0;
		position: relative;
	}
	&.full_width_layout {
		.hover-state-body, .body-section .mk-transparent-bg-indicator, .body-section .mk-bg-preview-layer {
			display: none;
		}
	}
	&.boxed_layout {
		.body-section .mk-transparent-bg-indicator, .body-section .mk-bg-preview-layer {
			display: block !important;
		}
	}
	&.boxed_layout .body-section {
		left: 0;
		top: 0;
		height: 100%;
		cursor: pointer;
		background-color: #fff;
		position: absolute;
		z-index: 50;
		width: 100%;
		.hover-state-body {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #cbeeff;
			opacity: 0;
			.transition(opacity 0.2s);
			z-index: 10;
			.section-indicator {
				position: absolute;
				top: 30px;
				left: 30px;
				color: #252525;
				font-weight: bold;
				display: inline-block;
				z-index: 60;
			}
			&:hover {
				.opacity(100);
			}
		}
	}
	.header-section {
		height: 120px;
		border-bottom: 3px solid #aaaaaa;
	}
	.banner-section {
		height: 130px;
		border-bottom: 3px solid #aaaaaa;
	}
	.page-section {
		height: 370px;
		border-bottom: 3px solid #aaaaaa;
	}
	.footer-section {
		height: 111px;
	}
	&.boxed_layout .main-sections-wrapper {
		margin: 0 130px;
		background-color: #aaa;
		padding: 0 3px;
		position: relative;
		z-index: 55;
	}
	.header-section, .page-section, .footer-section, .banner-section {
		cursor: pointer;
		position: relative;
		.hover-state {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 10;
			background-color: #cbeeff;
			opacity: 0;
			.transition(opacity 0.25s);
			.section-indicator {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -20px 0 0 -45px;
				color: #252525;
				padding: 4px 20px;
				font-weight: bold;
				display: inline-block;
				z-index: 60;
			}
			&:hover {
				.opacity(100);
			}
		}
	}
}
.mk-transparent-bg-indicator, .mk-bg-preview-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mk-bg-preview-layer {
	z-index: 2;
}
.mk-transparent-bg-indicator {
	background-image: url(../../images/transparent-bg.png);
	z-index: 1;
} 
.mk-bg-edit-panel {
	z-index: 90;
	display: none;
	position: absolute;
	left: -1px;
	top: -1px;
	width: 100%;
	height: 100%;
	border: 2px solid #aaa;
	background: #f0f0f0;
}
.mk-bg-panel-heading {
	border-bottom: 1px solid #ccc;
	.mk-bg-edit-panel-heading-cancel {
		display: block;
		float: right;
		margin: 13px 13px 0 0;
		font-size: 24px;
		color: #14a5ed;
	}
	.mk-bg-edit-panel-heading-text {
		color: #252525;
		line-height: 50px;
		font-size: 18px;
		margin: 10px 0 0 20px;
		text-transform: capitalize;
		font-weight: bold;
	}
}
.mk-bg-edit-left {
	width: 33%;
	float: left;
}
.mk-bg-edit-right {
	width: 67%;
	border-left: 1px solid #ccc;
	margin-right: -1px;
	float: right;
	min-height: 500px;
}
.mk-bg-edit-bg-color {
	border-bottom: 1px solid #ccc;
}
.mk-bg-edit-option {
	display: block;
	padding: 7px 10px;
}
.bg-edit-panel-color {
	float: left;
	padding:0 20px 10px 0;
}
.mk-bg-edit-label {
	display: block;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 5px;
}

.panel-gradient-element.is-hidden,
.panel-linear-gradient-el.is-hidden {
	display: none;
}

.bg-repeat-option, .bg-attachment-option, .bg-position-option {
	float: right;
	line-height: 4px;
	overflow: hidden;
	a {
		width: 31px;
		height: 31px;
		display: inline-block;
		margin: 4px;
		padding: 0;
		background-color: #fff;
		.border-radius(4px);
		.box-shadow(0 1px 3px rgba(0,0,0,0.15));
		background-image: url(../../images/background-selector.png) ;
		background-repeat: no-repeat;
		background-position:-49px -97px;
		.transition(none);
		&:hover {
			background-color: #f4f4f4;
		}
		&.selected, &:focus {
			background-color: #dbdbdb;
			.box-shadow(inset 0px 2px 1px rgba(0,0,0,0.3)) !important;
		}
		&.repeat {
			background-position: -41px -3px;
		}
		&.no-repeat {
			background-position: 0px -3px;
		}
		&.repeat-y {
			background-position: -125px -3px;
		}
		&.repeat-x {
			background-position: -84px -3px;
		}
		&.fixed {
			background-position: -37px -46px;
		}
		&.scroll {
			background-position: -78px -47px;
		}
		
	}
}
.bg-position-option a.selected {
	background-position: -1px -96px;
}

.mk-bg-edit-option-repeat {
	padding-bottom: 25px !important;
}
.mk-bg-edit-option-repeat, .mk-bg-edit-option-attachment {
	border-bottom: 1px solid #ccc;
}
.mk-bg-edit-option-stretch {
	border-top: 1px solid #ccc;
}
.mk-bg-edit-buttons {
	display: block;
	text-align: right;
	padding: 30px;
}
.bg-image-preset-wrapper {
	margin: 0px;
}
.bg-background-type-panes {
	min-height: 230px;
	.bg-background-type-pane {
		display: none;
	}
}
.bg-edit-panel-upload {
	.mk-upload-bg-wrapper {
		position: relative;
	}
	.mk-upload-url {
		margin: 0 !important;
		width: 280px !important
	}
	.bg-edit-panel-upload-title {
		margin: 10px 30px 10px 0px;
		display: block;
	}
	
	.custom-image-preview-block {
		overflow: hidden;
		max-width: 400px !important;
		height: 100px;
		text-align: left;
	}
}
.vc-mk-upload-url {
	width: 70% !important;
}


.bg-background-type-tabs {
	text-align: left;
	margin: 0;
	padding: 0;
	li {
		float: left;
		padding: 0;
		margin: 0 10px 10px 0;
		a.bg-image-buttons {
			float: right;
			display: inline-block;
			margin: 4px;
			padding: 7px 16px;
			background-color: #fff;
			color: #848484;
			.border-radius(30px);
			.box-shadow(0 1px 3px rgba(0,0,0,0.15));
			&:hover {
				color: #848484;
			}
		}
		&.current a{
			background-color: #dbdbdb;
			.box-shadow(inset 0px 2px 1px rgba(0,0,0,0.3)) !important;
		}
	}
}

.page-composer-icon-filter {
	margin-bottom: 10px;
}
.mk-system-diagnose {
	margin-bottom: 20px;
	ul {
		li {
			display: block;
			padding: 6px 10px;
			background-color: rgba(0, 0, 0, 0.03);
			margin-bottom: 1px;
			strong {
				margin-right: 10px;
			}
			.error {
				color: red;
			}
		}
	}
}
.wp-picker-holder {
	position: absolute;
	z-index: 100;
} 
.mk-general-bg-selector .vc_color-picker .wp-picker-holder {
	position: absolute !important;
	z-index: 100;	
}
.wp-color-picker {
	padding: 1px 6px !important;
	margin-right: 5px !important;
	width: 150px;
}
.color-picker-holder .wp-picker-clear {
	padding: 2px 4px;
}
.color-picker-holder .wp-picker-holder {
	//position: relative;
}
.color-picker-holder .wp-picker-holder .vc_alpha-container {
	border-radius: 0;
	border: 1px solid #dfdfdf;
	padding: 6px;
	background: #ffffff;
	position: absolute;
	width: 243px;
	left: -1px;
	z-index: 1000;
	bottom: -60px !important;
    border-top: none !important;
}
.vc_color-picker .wp-picker-holder .vc_alpha-container {
	bottom: -50px !important;
    border-top: none !important;	
}
.color-picker-holder .wp-picker-holder .vc_alpha-container label {
	display: block;
}
.color-picker-holder .wp-picker-holder .vc_alpha-container label output {
	padding-top: 0px;
	display: inline;
	vertical-align: top;
}
.color-picker-holder .wp-picker-holder .vc_alpha-container input {
	padding: 0;
	margin: 0;
	width: 100%;
}
.mk-metabox-wrapper {
	margin: 20px !important;
	[class*='mk-single-option']:last-of-type {
		border-bottom: none !important;
	}
}
.mk-metabox-wrapper .form-table tr, .masterkey-options-page .form-table tr {
	border-bottom: 1px solid #e7e7e7;
}
.mk-metabox-wrapper .form-table tr:last-child, .masterkey-options-page .form-table tr:last-child {
	border-bottom: 0;
}
.mk-metabox-wrapper .form-table tr th, .mk-metabox-wrapper .form-table tr td, .masterkey-options-page .form-table tr th, .masterkey-options-page .form-table tr td {
	color: #333333;
}
.mk-metabox-wrapper .form-table tr th, .masterkey-options-page .form-table tr th {
	font-weight: normal;
	width: 35%;
	padding: 15px 10px 15px 0;
	label {
		margin-bottom: 5px;
	}
}
#mk-header-switcher {
	margin-top: 60px;
}
.header-style-unit {
	max-width: 800px;
	height: 117px;
	border: 7px solid #d4d4d4;
	background-color: #fff;
	margin-bottom: 10px;
	position: relative;
}
.mk-header-styles-number {
	position: absolute;
	top: -45px;
	right: -7px;
	span {
		padding: 6px 10px;
		font-size: 14px;
		line-height: 16px;
		display: inline-block;
		.border-radius(3px);
		border: 2px solid #d4d4d4;
		color: #d4d4d4;
		float: right;
		margin-left: 10px;
		cursor: pointer;
		&:hover {
			border-color: #bababa;
		}
		&.active {
			border-color: #7f7f7f;
			color: #7f7f7f;
		}
	}
}
.mk-header-style-tools {
	position: absolute;
	top: -50px;
	left: -7px;
	background-color: #d4d4d4;
	.border-radiuses(3px, 0, 0, 3px);
	display: inline-block;
	padding: 8px 8px 8px 16px;
}
.mk-header-align {
	float: left;
	margin-right: 20px;
	.label {
		font-size: 13px;
		color: #5f5f5f;
		float: left;
		display: inline-block;
		line-height: 32px;
		padding-right: 10px;
	}
	span {
		background-image: url(../../images/header-align.png);
		background-repeat: no-repeat;
		width: 32px;
		height: 32px;
		display: inline-block;
		float: left;
		.border-radius(3px);
		margin-right: 5px;
		cursor: pointer;
		&:hover {
			background-color: #ccc;
		}
		&.active {
			background-color: #555555;
		}
	}
}
.header-align-left {
	background-position: -2px 0;
	&.active {
		background-position: -2px -48px;
	}
}
.header-align-center {
	background-position: -59px 0;
	&.active {
		background-position: -59px -48px;
	}
}
.header-align-right {
	background-position: -106px 0;
	&.active {
		background-position: -106px -48px;
	}
}
.mk-header-toolbar-toggle {
	float: left;
	.label {
		font-size: 13px;
		color: #5f5f5f;
		float: left;
		display: inline-block;
		line-height: 32px;
		padding-right: 10px;
	}
	span {
		background: url('../../images/header-toolbar-toggle.png') 0px -52px no-repeat;
		width: 89px;
		height: 33px;
		display: block;
		float: right;
		margin-left: 10px;
		cursor: pointer;
		&.enabled {
			background-position: 0 0;
		}
	}
}

.mk-header-preview {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	z-index: 10;
	div {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		background-image: url(../../images/header-sen-sprite.jpg);
	}
}
@media handheld, only screen and (max-width:1450px) {
	#mk-metaboxes-styling #mk-header-switcher {
		padding-top: 30px;
	}

	#mk-metaboxes-styling .mk-header-style-tools {
		width: 100%;
		display: block;
		right:0;
		padding-left: 6px;
	}
	#mk-metaboxes-styling .mk-header-styles-number {
		top:-95px;
	}

	.mk-metabox-wrapper .mk-upload-url {
		width: 50%;
	}


}
.toolbar-false .mk-header-preview div {
	//top: -22px;
}
.style-1-align-left {
	.mk-header-preview div{
		background-position: 0 -465px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-1-align-center {
	.mk-header-preview div{
		background-position: 0 -775px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px; 
		}	
	}
}
.style-1-align-right {
	.mk-header-preview div {
		background-position: 0 -620px; 
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-2-align-left {
	.mk-header-preview div {
		background-position: 0 0;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-2-align-center {
	.mk-header-preview div {
		background-position: 0 -155px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-2-align-right {
	.mk-header-preview div {
		background-position: 0 -310px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-3-align-left {
	.mk-header-preview div {
		background-position: 0 -1085px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-3-align-center {
	.mk-header-preview div {
		background-position: 0 -2527px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-3-align-right {
	.mk-header-preview div {
		background-position: 0 -1240px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			top:-24px;
		}	
	}
}
.style-4-align-left {
	.mk-header-preview div {
		background-position: 0 -1705px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			background-position: 0 -1729px; 
		}	
	}
}
.style-4-align-center {
	.mk-header-preview div {
		background-position: 0 -1731px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			background-position: 0 -1707px;
		}	
	}
}
.style-4-align-right {
	.mk-header-preview div {
		background-position: 0 -1884px;
	}
	&.toolbar-false {
		.mk-header-preview div{
			background-position: 0 -1908px;
		}	
	}
}

/*Gallery Type*/
.attachment.details .check div
{
    background-position: -60px 0;
}
.attachment.details .check:hover div
{
    background-position: -60px 0;
}
.gallery_images .details.attachment
{
    box-shadow: none;
}
.eig-metabox-sortable-placeholder
{
    background: #dfdfdf;
}
.gallery_images .attachment.details {
	width: auto !important;
} 
.gallery_images .attachment.details > div
{
    width: 100px;
    height: 100px;
    box-shadow: none;
}

.gallery_images .attachment-preview .thumbnail
{
    cursor: move;
}

.attachment.details div:hover .check
{
    display: block;
} 

.gallery_images:after, #gallery_images_container:after
{
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: '.';
}

.gallery_images > li
{
    float: left;
    margin: 0 10px 10px 0;
    cursor: move;
}

.gallery_images li.image img
{
    width: 150px;
    height: auto;
}



/* ---------- Custom Post Type Preview Button Removal ----------  */

.post-type-edge,
.post-type-faq,
.post-type-pricing,
.post-type-clients
.post-type-testimonial,
.post-type-slideshow,
.post-type-banner_builder,
.post-type-animated-columns,
.post-type-tab_slider {	
	.preview.button {
		display: none; 
	}
	#preview-action:after {
		content: "To preview this post type you need to create a page/post and add it inside Page Composer via appropriate shortcode.";
		font-style: italic;
		color: red;
		font-size: 12px;
		line-height: 18px;
		display: block;
		clear: both;
		text-align: left;
		padding: 10px;	
	
	} 
}

.chosen-container {
  width: 100% !important;
}
.wpb-select.fade {
    opacity: 1 !important;
}

.vc_edit_form_elements .vc_column + .vc_column, .vc_edit_form_elements .vc_column-with-padding {
	padding-top: 20px !important;
}

.mk-param-heading {
	border-top: 3px solid #ccc;
    font-size: 24px;
    font-weight: bold;
    padding: 30px 0;
}



.visual_preloader {
  width: 130px;
  height: 130px;
  background: #525252;
  display: flex;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}

.ball-pulse > div {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  background-color: #fff;
}
.ball-pulse > div:nth-child(1) {
  animation: ball-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div:nth-child(2) {
  animation: ball-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div:nth-child(3) {
  animation: ball-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
@keyframes ball-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
}
.ball-clip-rotate-pulse {
  position: relative;
  transform: translateY(-15px);
  display: inline-block;
  width: 20px;
  height: 20px;
}
.ball-clip-rotate-pulse > div {
  animation-fill-mode: both;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%;
}
.ball-clip-rotate-pulse > div:first-child {
  background: #fff;
  height: 36px;
  width: 36px;
  top: 7px;
  left: -7px;
  animation: ball-clip-rotate-pulse-scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.ball-clip-rotate-pulse > div:last-child {
  position: absolute;
  border: 2px solid #fff;
  width: 50px;
  height: 50px;
  left: -16px;
  top: -2px;
  background: transparent;
  border: 2px solid;
  border-color: #fff transparent #fff transparent;
  animation: ball-clip-rotate-pulse-rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation-duration: 1s;
}
@keyframes ball-clip-rotate-pulse-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes ball-clip-rotate-pulse-scale {
  30% {
    transform: scale(0.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes square-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
.square-spin {
  display: inline-block;
}
.square-spin > div {
  animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.cube-transition {
  position: relative;
  transform: translate(-25px, -25px);
  display: inline-block;
}
.cube-transition > div {
  animation-fill-mode: both;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -5px;
  left: -5px;
  background-color: #fff;
  animation: cube-transition 1.6s 0s infinite ease-in-out;
}
.cube-transition > div:last-child {
  animation-delay: -0.8s;
}
@keyframes cube-transition {
  25% {
    transform: translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    transform: translate(50px, 50px) rotate(-180deg);
  }
  75% {
    transform: translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.ball-scale > div {
  background-color: #fff;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  animation: ball-scale 1s 0s ease-in-out infinite;
}
@keyframes ball-scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.line-scale > div {
  animation-fill-mode: both;
  display: inline-block;
  background-color: #fff;
  width: 5px;
  height: 50px;
  border-radius: 2px;
  margin: 2px;
}
.line-scale > div:nth-child(1) {
  animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(2) {
  animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(3) {
  animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(4) {
  animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(5) {
  animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
@keyframes line-scale {
  0% {
    transform: scaley(1);
  }
  50% {
    transform: scaley(0.4);
  }
  100% {
    transform: scaley(1);
  }
}
.ball-scale-multiple {
  position: relative;
  transform: translateY(30px);
  display: inline-block;
  top: -50px;
  left: 5px;
}
.ball-scale-multiple > div {
  background-color: #fff;
  border-radius: 100%;
  animation-fill-mode: both;
  margin: 2px;
  position: absolute;
  left: -30px;
  top: 0px;
  opacity: 0;
  margin: 0;
  width: 50px;
  height: 50px;
  animation: ball-scale-multiple 1s 0s linear infinite;
}
.ball-scale-multiple > div:nth-child(2) {
  animation-delay: .2s;
}
.ball-scale-multiple > div:nth-child(3) {
  animation-delay: .2s;
}
@keyframes ball-scale-multiple {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.ball-pulse-sync {
  display: inline-block;
}
.ball-pulse-sync > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
}
.ball-pulse-sync > div:nth-child(1) {
  animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(2) {
  animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(3) {
  animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out;
}
@keyframes ball-pulse-sync {
  33% {
    transform: translateY(10px);
  }
  66% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.transparent-circle {
  display: inline-block;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: transparent-circle 1.1s infinite linear;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.transparent-circle:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@keyframes transparent-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ball-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -10px;
}
.ball-spin-fade-loader > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  position: absolute;
}
.ball-spin-fade-loader > div:nth-child(1) {
  top: 25px;
  left: 0;
  animation: ball-spin-fade-loader 1s 0s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(2) {
  top: 17.05px;
  left: 17.05px;
  animation: ball-spin-fade-loader 1s 0.12s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(3) {
  top: 0;
  left: 25px;
  animation: ball-spin-fade-loader 1s 0.24s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(4) {
  top: -17.05px;
  left: 17.05px;
  animation: ball-spin-fade-loader 1s 0.36s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(5) {
  top: -25px;
  left: 0;
  animation: ball-spin-fade-loader 1s 0.48s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(6) {
  top: -17.05px;
  left: -17.05px;
  animation: ball-spin-fade-loader 1s 0.6s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(7) {
  top: 0;
  left: -25px;
  animation: ball-spin-fade-loader 1s 0.72s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(8) {
  top: 17.05px;
  left: -17.05px;
  animation: ball-spin-fade-loader 1s 0.84s infinite linear;
}
@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fix the z-index issue inside visual composer content editor dropdown */
.vc_ui-panel.vc_ui-panel-window {
	z-index: 65000 !important;
}

/* Fix WPBakery color picker UI issue */
.wp-picker-container.vc_color-picker.wp-picker-active .wp-color-result-text {
	display: none;
}

.wp-picker-container.vc_color-picker .wp-picker-input-wrap label {
	margin-top: 0;
}