.sp-pagebuilder-admin * {
	&,
	&:before,
	&:after {
		.box-sizing(~'border-box');
	}
}


body.com_sppagebuilder {
	background: #edf0f5!important;

	.container-fluid.container-main {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* Core component */
.com_sppagebuilder {

	/*Page Edit*/
	&.view-page {
		.subhead {
			background: #ffffff;
			border-bottom: 0;
			min-height: 20px;
			margin: 0;
			&.subhead-fixed {
				.box-shadow(~'0 0 5px rgba(0, 0, 0, 0.5)');
			}

			.btn-toolbar {
				margin: 0 -5px;
				padding: 20px 0;

				.btn-wrapper {
					margin: 0 5px;
				}

			}
		}

		.subhead-collapse {
			display: none;
		}

		.sp-page-header {
			margin: 0 -30px;
			padding: 15px 30px;
			background-color: #0054a6;

			.form-inline-header {
				&,
				.control-group,
				.control-label,
				.controls {
					margin: 0;
				}
			}

			input[type="text"] {
				line-height: 30px;
				width: 280px;
				max-width: 100%;
			}

			> .pull-right {
				margin-top: 1px;
			}
		}

		#jform_title-lbl {
			font-size: 16px;
			font-weight: 600;
			color: #fff;
		}

		#jform_title {
			border: 0;
		}

		.tooltip {
			z-index: 999999;
		}
	}
}

.pagebuilder-com-content,
.pagebuilder-com-k2,
.pagebuilder-com-easyblog,
.pagebuilder-module {
	background: #edf0f5;
	padding: 0 20px 20px;
}

.com_modules.view-module {
	#general {
		.control-group {
			.control-label {
				display: none;
			}

			.controls {
				margin-left: 0;
			}
		}
	}
}

/*Page Toolbar*/
.sp-pagebuilder-page-tools {
	margin: 0 -30px 25px;
	padding: 13px 30px;
	background: #fff;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
	z-index: 9999;

	#sp-pagebuilder-btn-save {
		display: none;
	}

	&.fixed-sp-page-tools {
		top: 30px;
		left: 0;
		right: 0;
		margin-left: 0;
		margin-right: 0;
		position: fixed;
		background: #1e7ed8;
		color: #fff;

		#sp-pagebuilder-btn-save {
			display: inline-block;
		}

		.sp-pagebuilder-page-tabs > li {
			> a {
				color: rgba(255, 255, 255, 0.8);

				.pbfont {
					color: rgba(255, 255, 255, 0.8);
				}

				&:hover,
				&:focus,
				&:active {
					color: #fff;
				}
			}
		}

		.sp-pagebuilder-btn.sp-pagebuilder-btn-link {
			color: rgba(255, 255, 255, 0.8);

			&:hover,
			&:focus,
			&:active {
				color: #fff;
				.pbfont {
					color: #fff;
				}
			}

			.pbfont {
				color: rgba(255, 255, 255, 0.8);
			}

			&[disabled] {
				&,
				&:hover,
				&:focus,
				&:active,
				.pbfont-undo,
				.pbfont-redo {
					color: rgba(255, 255, 255, 0.4);
					cursor: not-allowed;
				}
			}
		}
	}

	.sp-pagebuilder-page-tabs {
		list-style: none;
		padding: 0;
		margin: 0 -15px;

		> li {
			display: inline-block;
			margin: 0;
			padding: 0;

			> a {
				font-size: 12px;
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 1px;
				color: #000;
				display: block;
				padding: 0 15px;
				line-height: 30px;
				text-decoration: none;
				transition: color 300ms;
				-webkit-transition: color 300ms;

				.pbfont-add-new-row {
					color: #4bd863;
				}

				.pbfont-import {
					color: #f1452d;
				}

				.pbfont-export {
					color: #f7a44c;
				}

				.pbfont-templates {
					color: #00aeef;
				}

				&:hover,
				&:active
				&:focus {
					text-decoration: none;
					color: #1e7ed8;
				}
			}

			&:last-child {
				>a {
					border-right: 0;
					padding-right: 0;
				}
			}
		}
	}

	.sp-pagebuilder-btn.sp-pagebuilder-btn-link {
		border: 0;
		display: inline-block;
		background: none;
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #000;
		padding: 0;
		margin: 0 15px;
		line-height: 30px;
		text-decoration: none;
		transition: color 300ms;
		-webkit-transition: color 300ms;
		text-decoration: none;

		&:hover,
		&:focus,
		&:active {
			outline: 0;
			color: #0072bc;
			text-decoration: none;
		}

		.pbfont-undo{
			color: #f7a44c;
		}

		.pbfont-redo{
			color: #f1452d;
		}

		&[disabled] {
			&,
			&:hover,
			&:focus,
			&:active,
			.pbfont-undo,
			.pbfont-redo {
				color: rgba(0, 0, 0, 0.4);
				cursor: not-allowed;
			}
		}
	}

	.sp-pagebuilder-sp-checkbox {
		margin-left: 20px;
		display: block;
		float: right;

		> .sp-pagebuilder-checkbox-label > span {
			font-size: 12px;
			font-weight: 500;
			text-transform: uppercase;
			line-height: 30px;
		}
	}
}

.pagebuilder-com-content,
.pagebuilder-com-k2,
.pagebuilder-module,
.fixed-sp-page-tools {
	.sp-pagebuilder-page-tools {
		background: #1e7ed8;
		color: #fff;
		margin: 0 -20px 15px;
		padding: 13px 20px;
		border-radius: 3px 3px 0 0;

		.sp-pagebuilder-page-tabs > li {
			> a {
				color: rgba(255, 255, 255, 0.8);

				.pbfont {
					color: rgba(255, 255, 255, 0.8);
				}

				&:hover,
				&:focus,
				&:active {
					color: #fff;
				}
			}
		}

		.sp-pagebuilder-btn.sp-pagebuilder-btn-link {
			color: rgba(255, 255, 255, 0.8);

			&:hover,
			&:focus,
			&:active {
				color: #fff;
				.pbfont {
					color: #fff;
				}
			}

			.pbfont {
				color: rgba(255, 255, 255, 0.8);
			}

			&[disabled] {
				&,
				&:hover,
				&:focus,
				&:active,
				.pbfont-undo,
				.pbfont-redo {
					color: rgba(255, 255, 255, 0.4);
					cursor: not-allowed;
				}
			}
		}
	}
}

/*Checkbox*/
.sp-pagebuilder-sp-checkbox {
	cursor: pointer;
	display: inline-block;
	position: relative;
	input[type=checkbox] {
		display: none;
		&:checked+label>span {
			background: #80c328;
		}
		&:checked+label>span>.sp-pagebuilder-sp-checkbox-1 {
			display: block;
		}
		&:checked+label>span>.sp-pagebuilder-sp-checkbox-2 {
			display: none;
		}
		&:checked+label>span>span {
			background: #fff;
			left: 38px;
		}
	}
	.sp-pagebuilder-checkbox-label {
		display: inline-block;
	}
	label>span {
		-webkit-transition: all 300ms;
		background: #cccccc;
		border-radius: 3px;
		display: inline-block;
		height: 30px;
		position: relative;
		transition: all 300ms;
		width: 66px;
	}
	.sp-pagebuilder-checkbox-label>div {
		-webkit-transition: all 300ms;
		background: #cccccc;
		border-radius: 3px;
		display: inline-block;
		float: right;
		height: 30px;
		margin-left: 10px;
		position: relative;
		transition: all 300ms;
		width: 66px;
	}
	label>span>span {
		-webkit-transition: all 300ms;
		background: #fff;
		border-radius: 3px;
		content: " ";
		height: 26px;
		left: 2px;
		position: absolute;
		top: 2px;
		transition: all 300ms;
		width: 26px;
	}
	.sp-pagebuilder-checkbox-label>div>div {
		-webkit-transition: all 300ms;
		background: #fff;
		border-radius: 3px;
		content: " ";
		height: 26px;
		left: 2px;
		position: absolute;
		top: 2px;
		transition: all 300ms;
		width: 26px;
	}
	input[type=checkbox]+label>span>.sp-pagebuilder-sp-checkbox-1 {
		display: none;
	}
	.sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-1 {
		display: none;
	}

	input[type=checkbox]+label>span>.sp-pagebuilder-sp-checkbox-2 {
		display: block;
	}
	.sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-2 {
		display: block;
	}
	input[type=checkbox]+label>span>.sp-pagebuilder-sp-checkbox-2 {
		margin-left: 30px;
	}
	.sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-2 {
		margin-left: 30px;
	}
}
.sp-pagebuilder-sp-checkbox.active {
	.sp-pagebuilder-checkbox-label>div {
		background: #80c328;
	}
	.sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-1 {
		display: block;
	}
	.sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-2 {
		display: none;
	}
	.sp-pagebuilder-checkbox-label>div>div {
		background: #fff;
		left: 38px;
	}
}
.sp-pagebuilder-sp-checkbox input[type=checkbox]+label>span>.sp-pagebuilder-sp-checkbox-1,
.sp-pagebuilder-sp-checkbox .sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-1,
.sp-pagebuilder-sp-checkbox input[type=checkbox]+label>span>.sp-pagebuilder-sp-checkbox-2,
.sp-pagebuilder-sp-checkbox .sp-pagebuilder-checkbox-label>div>.sp-pagebuilder-sp-checkbox-2  {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	text-transform: uppercase;
	width: 36px;
}

/* Notification */
.sp-pagebuilder-notifications {
	position: fixed;
	width: 360px;
	top: 100px;
	left: 50%;
	margin-left: -180px;
	z-index: 4;
	.box-sizing(~'border-box');

	> div {
		padding: 15px;
		background: rgba(128, 195, 40, 0.9);
		color: #fff;
		font-size: 18px;
		line-height: 1.3;
		border-radius: 4px;

		&.notify-success {
			background: rgba(128, 195, 40, 0.9);
		}

		&.notify-error {
			background: rgba(217, 83, 79, 0.9);
		}
	}
}

/*Admin separator*/
.sp-pagebuilder-admin-separtor {
  display: block;
  margin: 20px -30px 35px;
  font-weight: 600;
  color: #000;
  padding: 0 30px;
  position: relative;

  &:before{
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: #e6eaed;
    margin-top: -1.5px;
  }

  >span {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: #fff;
    padding: 0px 10px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    color: #1e7ed8;
    margin-left: -10px;
    font-size: 12px;
    line-height: 12px;
  }
}

/* Animation */
.spinner {
	width: 70px;
	height: 18px;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -35px;
	margin-top: -9px;

	> div {
		width: 18px;
		height: 18px;
		background-color: #1e7ed8;

		border-radius: 100%;
		display: inline-block;
		-webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
		animation: bouncedelay 1.4s infinite ease-in-out both;
	}

	.bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.bounce2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
	}
}

@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
		} 40% {
			-webkit-transform: scale(1.0);
			transform: scale(1.0);
		}
	}