@panel-background: lighten(#1B1B1B, 8%);
@panel-heading-background: linear-gradient(90deg, #2c2a29 0%, #32302f 100%);
@panel-heading-color: lighten(#818285, 10%); 
@panel-color: #D1D2D4;
@panel-box-background: lighten(#2D2D2D, 8%);
@panel-box-font-size: 13px;
@attributes-select-width: 148px;
@panel-box-shadow: 0 0 1px 1px rgba(209, 210, 212, 0.30);
@panel-border: 1px solid lighten(@panel-box-background, 8%);

@dash-header-bg: darken(#f2f2f2, 5%);
@dash-body-bg: #f2f2f2;

@import 'vendor/spectrum.less';
@import 'vendor/bootstrap/bootstrap.less';
@import 'vendor/alertify.less';
@import 'vendor/jquery.mCustomScrollBar.less';
@import 'widgets/checkbox.less';
@import 'widgets/slider.less';
@import 'widgets/select.less';
@import 'widgets/toggle.less';
@import 'widgets/linker.less';
@import 'elementsPanel.less';
@import 'textToolbar.less';
@import 'fontsModal.less';
@import 'contextMenu.less';
@import 'codeEditor.less';
@import 'panels/base.less';
@import 'panels/themesPanel.less';
@import 'panels/settingsPanel.less';
@import 'panels/pagesPanel.less';
@import 'panels/exportPanel.less';
@import 'panels/templatesPanel.less';
@import 'modals/base.less';
@import 'modals/imagesManager.less';
@import 'modals/publish.less';
@import 'install.less';
@import 'pages/login.less';
@import 'pages/dashboard.less';
@import 'pages/newProject.less';

#not-found {

	.align {
		width: 30%;
		margin: 0 auto;
		position: relative;
		top: 20%;
		text-align: center;
	}

	h1 {
	  	font-size: 90px;
	  	letter-spacing: 2px;
	  	text-align: center;
	  	margin-bottom: 40px;
	}

	h2 {
  		text-align: center;
  		margin-bottom: 20px;
	}

	p {
  		font-size: 17px;
  		margin-bottom: 40px;
	}

	.btn {
  		border-bottom: 4px solid darken(@brand-primary, 10%);
  		border-radius: 0;
	}

	 .fa {
  		padding-right: 10px;
	}
}

.scale-iframe {
	width: 150% !important;
	height: 150% !important;
	border: none;
    -moz-transform: scale(0.66);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.66);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.66);
    -webkit-transform-origin: 0 0;
    transform: scale(0.66);
    transform-origin: 0 0;
}

#architect footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 20px;
	background-color: @dash-header-bg;
	.clearfix();
	border-top: 4px solid darken(@dash-header-bg, 10%);

	> .copyright {
		float: right;
		font-size: 15px;
	}
}

#drag-helper {
	background-color: @panel-box-background;
	color: @panel-color;
	border: @panel-border;
	padding: 8px;
	border-radius: 4px;
}

//edit columns
#edit-columns {
	background-color: darken(@brand-primary, 5%);
	color: #fff;
	text-align: center;
	position: absolute;
	z-index: 10;
	margin: 10px 0 0 10px;
	.transition(height 0.20s linear);
	pointer-events: all;
	text-transform: uppercase;
	font-family: roboto;
	font-size: 14px;
	height: 0;
	width: 0;
	overflow: hidden;
	box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5);
	border-radius: 2px;

	> .fa {
		padding-right: 4px;
		font-size: 15px;
		top: 1.2px;
		position: relative;

	}

	&:hover {
		cursor: pointer;
		background-color: darken(@brand-primary, 10%);
	}
}

#row-editor {
	position: absolute;
	background-color: @panel-box-background;
	color: #fff;
	z-index: 8;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	display: none;
	box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5);
	.user-select(none);

	> .column-controls-footer {
		padding: 10px;
		background-color: @panel-background;
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;

		> .close-row-editor {
			float: left;
			font-size: 17px;
			margin: 7px 0 0 3px;
			color: lighten(@panel-color, 7%);

			&:hover {
				cursor: pointer;
				transform: scale(1.1);
			}
		}
	}

	> .row-presets {
		padding: 12px;
		border-top: 1px solid lighten(#333, 15%);

		> .btn {
			background-color: lighten(@panel-box-background, 10%);
			border-color: transparent;
			color: lighten(@panel-color, 7%);
			margin-top: 5px;

			&:hover {
				background-color: @brand-primary;
				color: #fff;
			}
		}
	}

	.row-preset {
		display: inline-block;
		height: 40px;
		width: 40px;
		background-color: lighten(@panel-box-background, 10%);
		border-radius: 3px;
		padding: 4px;
		margin-right: 5px;

		> div {
			height: 100%;
			background-color: @panel-color;
			display: inline-block;
			border-right: 1px solid lighten(@panel-box-background, 10%);
			border-left: 1px solid lighten(@panel-box-background, 10%);
			border-radius: 1px;

			&:last-of-type {
				border-right: none;
			}

			&:first-of-type {
				border-left: none;
			}
		}

		#columns (@i) when (@i > 0) {
     
		    .row-preset-@{i} {
		        width: round(percentage((@i/12)), 7);
		    }
		     
		    #columns (@i - 1);
		}
		#columns (12);

		&:hover {
			cursor: pointer;
			transform: scale(1.1);
		}
	}

	> .column-controls {
		padding: 0;
		width: 101%;
		.clearfix();
		border-bottom: 1px solid lighten(#111, 15%);
	}

	.col-control {	
		font-size: 18px;
		padding: 0;
		display: inline-block;
		position: relative;
		padding: 5px 0;
		
		> .delete-column {
			width: 90%;
			text-align: center;
			display: inline-block;
			padding: 4px 0;
			margin-left: 5%;
			vertical-align: top;

			&.first {
				width: 75%;
				margin-left: 15%;
			}

			&.last {
				width: 75%;
				margin-left: 10%;
			}

			&:hover {
				cursor: pointer;
				background-color: @brand-primary;
				border-radius: 3px;
			}
		}

		> .add-column {
			position: absolute;
			top: 0;
			right: -25px;
			z-index: 100;
			padding: 5px 18px 4px;
			margin-top: 4px;

			&.first {
				left: 0;
				width: 30px;
				padding-left: 8px;
				padding-right: 8px;
				border-top-left-radius: 0 !important;
				border-bottom-left-radius: 0 !important;

			}

			&.last {
				right: 0;
				width: 30px;
				padding-left: 8px;
				padding-right: 8px;
				border-top-right-radius: 0 !important;
				border-bottom-right-radius: 0 !important;
			}

			&:hover {
				background-color: @brand-primary;
				cursor: pointer;
				border-radius: 3px;
			}
		}

	}
}

.tet-row {
	> div:empty {
		height: 50px;
	}
}

//


.tooltip {
	z-index: 100;
}

#el-class {
	min-height: 30px;
	background-color: @panel-box-background;
	cursor: text;
	border: @panel-border;
	color: @panel-color;
	display: inline-block;
	width: @attributes-select-width;
	vertical-align: middle;
	padding: 1px 5px;
	float: right;

	> #addclass-flyout {
		margin-bottom: 6px;
		height: 22px;

		> #addclass-input {
			border: @panel-border;		
			border-radius: 0;
			width: 70%;
			height: 100%;
			outline: none;
		}

		> .btn {
			border-radius: 0;
			height: 100%;
			padding: 0 10px;
		}
	}

	> .list-unstyled {
		padding: 1px 5px;

		> li {
			background: @brand-primary;
			cursor: default;
			margin-bottom: 3px;
			font-size: 75%;
			font-family: Helvetica;
			color: darken(#fff, 5%);
			margin-right: 3px;
			border-radius: 0;

			.fa {
				padding-left: 5px;
				&:hover {
					cursor: pointer;
				}
			}
		}	
	}
}

#inspector-filter-select {
	border-radius: 0;
	outline: none;
	height: 35px;
	padding: 0 10px 0;
	background-color: @panel-box-background;
	border: @panel-border;
	margin: 13px;
	width: 88%;
	border-radius: 3px;
	color: @panel-color;
	text-transform: capitalize;
}

#preview-closer {
	background-color: @gray;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px 15px;
	border-radius: 4px;

	> .fa {
		color: @gray-lighter;
		font-size: 30px;
	}

	&:hover {
		background-color: darken(@gray, 10%);
		cursor: pointer;
	}
}

#preview-frame {
	width: 100%;
	height: 100%;
}

#theme-loading {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 4;
	top: 0;

	> span {
		position: absolute;
		color: #fff;
		font-size: 30px;
		top: 50%;
		text-align: center;
		width: 100%;
	}
}

.pricing-table {
	> .panel-heading {
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
	}

	> .panel-body {
		background-color: @gray;
		color: #fff;
		text-align: center;

		.price {
			font-size: 40px;
			display: inline-block;
			
			> .dollar-sign {
				vertical-align: super;
				font-size: 16px;
			}
		}

		.time-period {
			color: @gray-light;
			font-size: 15px;
			font-weight: lighter;
		}
	}

	.list-group {
		padding: 0 15px;

		> .list-group-item {
			border-style: dotted;
			text-align: center;
			color: #808080;

			> .fa {
				font-size: 13px;
				margin-right: 5px;
			}
		}
	}

	> .btn {
		display: block;
		text-transform: uppercase;
		margin: 30px auto 20px;
		padding: 13px 35px 13px 35px;
		border-radius: 4px;
	}
}


#save-status {
	margin-left: 0;
	margin-right: 0 !important;

	> #save-saved {
		color: @gray;
	}

	> #save-saving {
		color: lighten(@gray-light, 15%);
	}

	.spinner {
		position: absolute;
		font-size: 70px;
		padding: 20% 37%;
		width: 90%;
		height: 100%;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		pointer-events: none;
		top: 0;
		display: none;
	}
}

.navbar {
	font-family: Roboto;
	font-size: 14px;
	background-image: linear-gradient(90deg, #2c2a29 0%, #32302f 100%);
	background-image: -webkit-linear-gradient(90deg, #2c2a29 0%, #32302f 100%);
	box-shadow: inset 0 0 2px rgba(255,255,255,0.1),0 0 10px 0 rgba(0,0,0,0.5);
	z-index: 20;
	max-height: @navbar-height + 3;
	overflow: hidden;
	
	.preview-btn {
		background-color: transparent;
		border: none;
		font-size: 25px;
		color: @panel-heading-color;
		margin-right: 45px;
		padding-top: 6px;
	}

	.nav-locales {
		margin-right: 25% !important;

		li {
			padding: 11px 11px;
			cursor: pointer;

			&:hover {
				img {
					transform: scale(1.1);
				}
			}

			&.active {
				background-color: lighten(@panel-background, 10%);
			}
		}
	}

	.logo {
		width: 125px;
		height: auto;
		padding-top: 9px;
		margin-left: 45px;
	}

	.navbar-brand {
		border-right: solid 1px #393f44;
		font-size: 26px;
		padding: 13px 20px 20px 20px;
	}

	.navbar-tabs > li {
		border-right: solid 1px #393f44;
		text-shadow: 0 -1px 0 rgba(0,0,0,0.25);

		&:first-of-type {
			border-left: solid 1px #393f44;
		}
	}

	#undo-actions {
		margin: 0 15%;

		@media screen and (max-width: 1800px) {
			margin: 0 7%;
		}

		@media screen and (max-width: @screen-md) {
			margin: 0 15px;
		}

		.navbar-btn {
			font-size: 25px;
			margin: 7px 0 0;
		}
	}

	.navbar-right {
		height: @navbar-height;
	}

	.navbar-btn {
		border-radius: 0;

		.fa {
			padding-right: 5px;
		}
	}

	.nav-actions {
		//padding: 0 300px 0 0;

		button {
			background: none;
			border: none;
			outline: none;
			color: @panel-heading-color;
			font-size: 20px;
			margin: 10px 0 0 0;

			&:disabled {
				color: darken(@panel-heading-color, 30%);
			}
		}

		&:first-of-type {
			padding: 0 25px;
		}
	}

}

#account-actions {
	margin-left: 25px;

	.fa-power-off {
		font-size: 20px;
		color: @brand-danger;

		&:hover {
			cursor: pointer;
			color: darken(@brand-danger, 10%);
		}
	}
}

.mCSB_inside > .mCSB_container {
	margin-right: 0;
}

.mCSB_draggerContainer {
	margin-left: 8px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	width: 7px !important;
	background-color: lighten(@panel-box-background, 20%) !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
	width: 7px;
	background-color: lighten(@panel-box-background, 5%) !important;
	border-radius: 0;
}

html, body  {
	max-width: 100%;
}

html, body, #viewport {
	height: 100%;
	overflow: hidden;
}

#viewport {
	padding-top: @navbar-height + 1;

	&.left-collapsed {
		#middle {
			width: 88%;
			width: ~"calc(100% - 236px) !important";
			margin-left: 0;
		}
	}

	&.right-collapsed {
		#middle {
			width: 88%;
			width: ~"calc(100% - 236px) !important";
			margin-right: 0;
		}
	}

	&.left-collapsed.right-collapsed {
		#middle {
			width: 100% !important;
			margin: 0;
		}
	}
}

#elements-container, #middle {
	float: left;
}

.el-description {
	font-size: 12px;
	margin: 3px 0 3px;
	font-weight: normal;
	display: none;
}

#iframe {
	display: block;
	width: 100%;
	height: 93%;
	height: ~"calc(100% - 66px)";
	margin: 0 auto;
	position: relative;
	z-index: 2;
	.transition(all 0.4s ease-in-out);
	box-shadow: 0 0 10px #666;

	&.full-width {
		width: 100%;
	}

	&.xs-width {
		width: @screen-xs;
	}

	&.sm-width {
		width: @screen-sm;
	}

	&.md-width {
		width: @screen-md;
	}
}

.sidebar-toggler {
	position: absolute;
	width: 10px;
	height: 30px;
	top: 43%;
	z-index: 4;
	background-color: #454342;

	> .toggler-carret {
		width: 0;
		height: 0;
		border: 3px solid transparent;
		margin-top: -3px;
		position: relative;
		top: 50%;
	}

	&.left {
		right: 0;
		margin-right: -11px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		
		.toggler-carret {
			border-right: 3px solid rgba(255, 255, 255, 0.7);
			border-left: none;
			left: 2px;
		}
	}

	&.right {
		left: 0;
		margin-left: -11px;
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;

		.toggler-carret {
			border-left: 3px solid rgba(255, 255, 255, 0.7);
			border-right: none;
			right: -4px;
		}
	}

	&:hover {
		cursor: pointer;
		background-color: lighten(#454342, 10%);
	}
}

.bl-panel-heading {
	background: #f2f2f2;
	height: 33px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46);
	color: #303030;
	font-size: 14px;
	font-weight: bold;
	padding: 8px 15px;
	font-family: "alternate-gothic-no-2-d",Helvetica,Arial,serif;
	.user-select(none);
	margin: 0;

	> .fa {
		float: right;
		pointer-events: none;
	}

	&:hover {
		cursor: pointer;
	}
}

.panel-subheading {
	padding-bottom: 3px;
	margin-bottom: 5px;
	color: @panel-heading-color;
	text-align: left;
	font-size: 14px;

	> .fa {
		float: right;
	}
}

.panel-box {
	padding: 15px;

	.panel-box {
		padding: 0;
	}
}

#editor {
	height: 350px;
	margin-top: 70px;
}

.arrow-up {
	position: absolute;
	right: 12px;
	top: -13px;
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid @panel-background;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	position: fixed;
	border-left: 18px solid @panel-background;
	display: none;
	.transition(all 0.4s ease-in-out);
	z-index: 10;
}

.sp-container {
	position: absolute !important;
	.transition(all 0.4s ease-in-out);
	.box-shadow(-1px 0px 2px rgba(0,0,0,.5));
}

#inspector-inner {
	overflow-y: auto;
	overflow-x: hidden;
	height: 95%;
	height: ~"calc(100% - 50px)";
	height: ~"-webkit-calc(100% - 50px)";
}


#inspector {
	width: 236px;
	height: 100%;
	background: @panel-background;
	color: @panel-color;
	.user-select(none);
	.box-shadow(-1px 0px 2px rgba(0,0,0,.5));
	.transition(right 0.2s linear);
	border-left: 1px solid #111010;
	position: fixed;
	z-index: 8;
	float: right;
	right: 0;

	.sp-container {
		display: block;
		left: -450px;
	}

	.inspector-panel {
		border-bottom: 2px solid @panel-box-background;
	}

	> #inspector-overlay {
		height: 95%;
		height: ~"calc(100% - 51px)";
		height: ~"-webkit-calc(100% - 51px)";
		position: absolute;
		background-color: rgba(0,0,0,.7);
		z-index: 4;
		width: 100%;

		> span {
			display: block;
			width: 100%;
			padding: 15px;
			font-size: 17px;
			margin-top: 150%;
			text-align: center;
			color: #fff;
		}
	}

	#background-arrow {
		right: 232px;
		transition: none;
	}

	.bl-panel-header {
		border-bottom: 1px solid @panel-box-background;
		margin: -10px -10px 15px;

		> .name {
			padding: 8px 0 8px 8px;
			float: left;
			font-size: 14px;
		}

		> .bl-panel-btns {
			padding: 8px 12px;
			height: 100%;
			border-left: 1px solid @panel-box-background;
			float: right;

			&:hover {
				background-color: @panel-box-background;
				cursor: pointer;
				border-top-right-radius: 6px;
			}
		}
	}

	
	#fill-color, #image, #gradient {
		width: 30%;
		display: inline-block;
		height: 60px;
		border: 2px solid @panel-heading-color;
		color: @panel-heading-color;
		border-radius: 3px;
		margin-right: 5px;
		background-image: none;

		> .background-box {
			width: 100%;
			height: 100%;

			> .fa {
				padding: 17px 0 0 15px;
				font-size: 25px;
			}
		}

		> .background-name {
			margin-top: 5px;
			color: @panel-heading-color;
			text-align: center;
			font-size: 13px;
		}

		&:hover {
			cursor: pointer;
			color: @panel-color;
			border-color: @panel-color;
		}
	}

	#gradient {
		margin-right: 0;
	}

	#background-flyout-panel {
		position: fixed;
		display: block;
		right: 250px;
		top: 130px;
		width: 261px;
		background-color: @panel-background;
		padding: 10px;
		border-radius: 6px;
		z-index: 5;
		.box-shadow(-1px 0px 2px rgba(0,0,0,.5));

		.btn-block {
			border-radius: 2px;
			border: none;
			outline: none;
			box-shadow: 0 5px #27496d;
			margin: -5px 0 15px;

			&:hover, &:active, &:focus {
				background-color: darken(@brand-primary, 5%);
			}
		}

		#texturePresets, #gradientPresets {
			display: none;
		}

		h5 {
			color: @panel-heading-color;
			background-color: #fff;
			margin: 10px -10px;
			padding: 10px;
		}

		#img-positioning {
			padding: 0 10px;

			h5 {
				margin: 0 -10px;
			}

			h6 {
				text-align: center;
				margin: 0 0 10px;
			}

			input {
				outline: none;
			}

			> .pull-right {
				width: 80px;
			}

			.radio {
				margin: 0;
			}

			.alignment-box {
				width: 24px;
				height: 24px;
				background-color: @panel-box-background;
				border-radius: 3px;
				display: inline-block;

				&:hover {
					background-color: @brand-success;
					cursor: pointer;
				}

				&.active {
					background-color: @brand-success;
				}

				&:nth-child(2), &:nth-child(5), &:nth-child(8) {
					margin: 0 4px;
				}
			}
		}		
	}


	.img-presets-list {		
		list-style: none;		
		padding: 0;
		max-height: 190px;
		overflow: hidden;

		li {
			display: inline-block;
			padding: 5px;
			
			> .preset {
				border: 1px solid @brand-primary;
				width: 50px;
				height: 50px;

				&:hover {
					cursor: pointer;
					border: 2px solid @brand-success;
				}
			}
		}
	}

	#el-font-weight-button {
		margin: 0 0 0 5px;
	}

	label {
		font-size: 12px;
		vertical-align: sub;
		margin: 6px 5px 0 0;
	}

	#shadows-panel {
		#shadow-knob-container {
			margin-bottom: 8px;
		}

		.slider-group {
			> .range-slider {
				width: 70%;
				display: inline-block;
			}

			.ui-slider {
				margin-top: 5px;
			}

			.slider-label {
				font-size: 13px;
			}

			> .pretty-input {
				width: 20%;
				display: inline-block;
				padding: 0;
				text-align: center;
				margin: 0 0 -19px 16px;
				height: 25px;
				border-radius: 3px;
			}
		}

		.ui-selectmenu-button {
			width: 97px !important;
			display: inline-block;
			margin-top: 8px;	

			&:last-of-type {
				margin-right: 0;
			}
		}

		.color-picker-trigger {
			width: 120px;
			display: inline-block;
			margin: 0 0 4px 15px;
			border-radius: 3px;
			height: 50px;
		}
	}

	#visibility {
		margin: 10px 0 0 10px;

		> .list-inline {
			display: block;
			padding: 0;
			margin-left: 3px;

			> li {
				font-size: 20px;
				background-color: @panel-box-background;
				padding: 5px 10px;
				border-radius: 3px;
				border: 1px solid transparent;

				&.disabled {
					color: @panel-color;
					background-color: lighten(#222, 3%);
    				border: 1px solid #000;
    				border-right: 1px solid #353535;
    				border-bottom: 1px solid #353535;
    				border-radius: 3px;
				}

				&:hover {
					cursor: pointer;
				}
			}
		}
	}

	#attributes-panel .btn-block {
		margin-top: 15px;
		border-radius: 0;
		border-bottom: 3px solid darken(@brand-primary, 15%);
	}

	#attributes-panel input, .pretty-input {
		background-color: @panel-box-background;
		border: @panel-border;
		color: @panel-color;
		display: inline-block;
		width: @attributes-select-width;
		height: 30px;
		vertical-align: middle;
		padding-left: 10px;
	}

	#custom-attributes {
		> .form-group {
			> label {
				text-transform: capitalize;
			}
			
			> input, select {
				float: right;
			}
		}

		.long-name {
			float: none;
			display: block;
			width: 100%;
			margin-bottom: 10px;
		}
	}

	#border-box {
		.color-picker-trigger {
			width: 58%;
			float: left;
			height: 30px;
			margin: 5px 7px 15px 0;
			background-image: none;
			border-width: 6px;
			border-style: solid;
			background: @panel-box-background;
			opacity: 0.7;
		}

		#border-style {
			width: 38.4%;
			margin-top: 0px;
			margin: 5px 0 15px 0;
		}
	}

	.icon-box {
		width: 30px;
		height: 28px;
		text-align: center;
		font-weight: bold;
		padding: 5px 10px;
		font-size: 13px;
		margin-right: 3px;
		background: @panel-box-background;
		float: left;
		border-radius: 2px;

		&:hover {
			cursor: pointer;
			background: darken(@panel-box-background, 1%);
		}

		&.active {
			color: @brand-success;
		}
	}

	h3 {
		margin: 0;
		text-align: center;
		color: @panel-heading-color;
		padding: 10px 0;
		font-size: 21px;
	}

	.color-picker-trigger {
		width: 100%;
		height: 25px;
		background-image: url('../images/transparent.png');
		cursor: pointer;
	}

	#text-box {
		> .clearfix {
			margin: 5px 0;

			.icon-box:last-of-type {
				margin-right: 0;
			}

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

		.italic {
			font-style: italic;
		}

		.underline {
			text-decoration: underline;
		}

		.strike {
			text-decoration: line-through;
		}

		.overline {
			text-decoration: overline;
		}
	}

	#border-style, #border-width {
		width: 60%;
		float: left;
		height: 30px;
		margin-top: 15px;
		background-color: @panel-box-background;
		border: none;
		outline: none;
		border-radius: 2px;
		text-align: center;
		font-weight: bold;
		font-size: 13px;
	}

	#el-font-size {
		width: 35%;
		float: left;
		height: 28px;
		background-color: @panel-box-background;
		border: none;
		outline: none;
		border-radius: 2px;
		text-align: center;
		font-weight: bold;
		font-size: 13px;
		color: @panel-color;
		margin-right: 11px;
	}

	#el-font-style-box {
		margin-bottom: 15px !important;
	}

	#more-fonts {
		background: @panel-box-background;
		padding: 8.4px 15px;
		text-align: center;
		font-size: 20px;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

		&:hover {
			cursor: pointer;
		}
	}

	#el-font-family-button {
		height: 45px;
		padding-top: 11px;
		font-size: 16px;
		font-weight: bold;
		text-shadow: 0px 1px 2px #000000;
	}

	#el-font-weight-menu {
		overflow: auto;
		> .ui-menu-item {
			font-size: 12px;
		}
	}

	#border-style {
		padding-left: 7px;
	}

	#border-width {
		width: 35%;
		margin-right: 9px;
	}

	.radius-boxes {
		> .big-box {
			height: 80.8px !important;
		}

		> .small-boxes {
			padding: 0;

			> input {
				width: 47px !important;
				margin-bottom: 5px;
				height: 37.8px;

				&:nth-child(1), &:nth-child(3) {
					margin-right: 2px;
				}
			}
		}
	}

	.input-boxes {
		text-align: center;
		height: 96px;

		> .small-boxes > .row {
			height: 28px;

			> input {
				height: 100%;
			}
		}
		
		> .small-boxes > .row > div:nth-child(1) {
			padding: 6px 3px 6px 0;
		}

		> .small-boxes > .row > div:nth-child(2) {
			padding: 6px 0 6px 3px;
		}

		.big-box {
			height: 100%;
			padding: 0 5px 0 0;

			> input {
				height: 100%;
			}
		}

		.big-box input, .small-boxes input {	
			width: 100%;
			background: @panel-box-background;
			border: @panel-border;
			padding: 4px;
			text-align: center;
			font-size: @panel-box-font-size;
		}
	}
}

.resizing-columns {
	cursor: w-resize;
	pointer-events: all !important;
}


#resize-handles {
	z-index: 1000;

	.drag-handle {
		width: 11px;
		height: 11px;
		display: block;
		position: absolute;
		border: 1px solid @brand-primary;
		background-color: #fff;
		.box-shadow(0px 0px 5px 0px rgba(0,0,0,0.5));
		z-index: 1000;
		pointer-events: all;
		border-radius: 50%;
	}
	.nw-handle {
		top: -7px;
		left: -7px;

		&:hover {
			cursor: nw-resize;
		}
	}
	.n-handle {
		top: -7px;
		right: 50%;

		&:hover {
			cursor: n-resize;
		}
	}
	.ne-handle {
		top: -7px;
		right: -7px;

		&:hover {
			cursor: ne-resize;
		}
	}
	.e-handle {
		top: 40%;
		right: -7px;

		&:hover {
			cursor: e-resize;
		}
	}
	.se-handle {
		bottom: -5px;
		right: -7px;

		&:hover {
			cursor: se-resize;
		}
	}
	.s-handle {
		bottom: -5px;
		right: 50%;

		&:hover {
			cursor: s-resize;
		}
	}
	.sw-handle {
		bottom: -5px;
		left: -7px;

		&:hover {
			cursor: sw-resize;
		}
	}
	.w-handle {
		top: 40%;
		left: -7px;

		&:hover {
			cursor: w-resize;
		}
	}
}

#middle {
	position: relative;
	width: 78%;
	width: ~"calc(100% - 470px)";
	height: 100%;
	margin: 0 234px;
	.transition(all 0.2s linear);

	.breadcrumb {
		background-color: #fff;
		.box-shadow(0px 1px 2px 0px rgba(0,0,0,0.15));
		border-radius: 0;
		position: relative;
		z-index: 5;
		margin-bottom: 0;
		height: 39px;

		> li {
			> a {
				color: #303030;
				text-transform: uppercase;
				font-size: 13px;
			}

			&.active > a {
				font-weight: bold;
				pointer-events: none;
				cursor: text;
			}
		}	
	}

	overflow: hidden;

	#hover-box, #select-box {
		border: 1px solid @brand-primary;
	   	position: absolute;
	   	margin-left: 6px;
		padding: 5px;
		pointer-events: none;
		display: none;
		z-index: 7;

		#select-box-actions, #hover-box-actions {
			color: #fff;
			background-color: @brand-primary;
			padding: 1px 5px 2px 5px;
			font-size: 16px;
			top: -27px;
			left: 0;
			position: absolute;
			text-align: center;
			overflow: hidden;
			max-height: 30px;
			pointer-events: all;
			.user-select(none);

			.fa {
				padding-right: 5px;

				&:hover {
					cursor: pointer;
					color: @gray-lighter;
				}

				&:first-of-type {
					margin-left: 7px;
				}
			}
		}

		#select-box-actions {
			min-width: 127px;
			left: -2px;
		}

		#hover-box-actions {
			border-bottom: 1px solid @brand-primary;
			left: -1px;
		}
	}

	#hover-box {
		z-index: 6;
	}

	#highlights.row-editor-open {
		
		> #hover-box {
			display: none;
			visibility: hidden;
		}

		> #select-box {
			border: 4px solid #404040;
			border-top-right-radius: 3px;
			border-top-left-radius: 3px;

			> #column-resizers {
				display: block;
			}

			#select-box-actions {
				background-color: #404040;
			}	
		}

		> #edit-columns {
			height: 0 !important;
			padding: 0 !important;
		}
	}

	#select-box {
		border: 2px solid @brand-primary;
		

		> #column-resizers {
			height: 115%;
			margin: -9px;
			display: none;
		
			> .column-resizer {		
				display: inline-block;
				position: absolute;
				height: 100%;
				width: 2px;
				background-color: @panel-background;		
				margin-left: -6px;
				top: 0px;
			}

			.col-dragger {
				position: relative;
				width: 20px;
				background-color: @panel-box-background;
				border-radius: 3px;
				text-align: center;
				color: #fff;
				pointer-events: all;
				top: 10px;
				right: 9px;
				height: ~"calc(100% - 20px)";
				box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.5);

				> .fa {
					//height: 100%;
					position: relative;
					top: 30%;
				}

				&:hover {
					background-color: @brand-primary;
					cursor: col-resize;
					color: #fff;
				}
			}
		}
	}

	.element-tag {
		font-size: 14px;
		text-transform: uppercase;
		overflow: hidden;
		pointer-events: none;
	}
}

#frame-wrapper {
	height: 100%;
	background-image: linear-gradient(
		45deg, rgba(0, 0, 0, 0.05) 25%,rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)), 
		linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
	background-image: -webkit-linear-gradient(
		45deg, rgba(0, 0, 0, 0.05) 25%,rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)), 
		-webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
	background-size: 48px 48px;
	background-position: 0 0, 24px 24px;
}

#frame-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: @navbar-height;
	z-index: 3;
	.user-select(none);
}

.ui-draggable-dragging {
	//width: 50%;
	z-index: 1000;
}

img.ui-draggable-dragging {
	width: 7%;
}

.container.ui-draggable-dragging {
	min-height: 50px;
	
	&:empty {
		border: 1px dashed gray;
	}
}