// NOTES 
// - Don't have/create an .clearfix rule accessible by html, it breaks radio/checkbox multi-column.


@import "global";
@import "sidebar";
@orange: #ff8900;
@orange-dark: #DCAB62;
@system-font: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;

html, body { height: 100%; overflow-x: hidden; }

div#form-toolbar {
	display: none !important;
}
.holy-wrapper { min-height: 100%; height: 100%; width: 100%; 
	& > .row { height: 100%; }
}

.supernova {
	.transition(background-color; 0.3s; ease);
	.main, .main *, .header {
		.transition(background-color, color, height, width, font-size, line-height, font-family, margin, padding; 0.3s; ease);
	}
}

#previewOverlay {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #eee;
	z-index: 15;
	overflow-y: auto;
	.close-preview {
		display: inline-block;
		cursor: pointer;
		border: 1px solid fade(black, 20%);
		color:fade(black, 40%);
		top: 15px;
		left: 15px;
		padding: 0 20px 0 16px;
		.rounded(24px);
		white-space: nowrap;
		font-weight: normal;
		line-height: 38px;
		height: 40px;
		text-align: center;
		letter-spacing: -0.3px;
		background: #fafafa;
		position: fixed;
		z-index: 5;
		transition-duration: 0.3s;
		transition-property: all;
		transition-timing-function: ease;
		span {
			display: inline-block;
		    font-size: 14px;
		    overflow: hidden;
		    position: relative;
		    text-indent: 4px;
		    vertical-align: middle;
		}
		.fa {
			position: relative;
			top: 1px;
		}
		&:hover {
			color: #ff8900;
			border-color: #ff8900;
			.fa {
				color: #ff8900;
			}
		}
	}


	.preview-toggle-buttons {
		display: inline-block;
		color:fade(black, 25%);
		border: 1px solid fade(black, 20%);
		.rounded(24px);
		font-weight: normal;
		font-size: 27px;
		text-align: center;
		padding: 0 12px;
		position: fixed;
		right: 25px;
		top: 15px;
		z-index: 5;
		background: #fafafa;
		-moz-user-select: -moz-none;
	    -khtml-user-select: none;
	    -webkit-user-select: none;
	    -o-user-select: none;
	    user-select: none;

	    span {
			float: left;
			width: 38px;
			height: 38px;
			text-align: center;
			display: table;
			vertical-align: middle;
			padding-top: 2px;
		}

		.fa {
			.transition(all; 0.3s; ease;);
			display: table-cell;
			vertical-align: middle;
			cursor: pointer;
			&:hover, &.selected {
				color: #ff8900;
			}
		}
		#iPhone {
			font-size: 30px;
		}
		#iPhoneLandscape {
			font-size: 30px;
			-moz-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}
		#iPadLandscape {
			-moz-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}

	}


	.device-frame {
		.border-box();
		background: #fff;
		.transition(width;0.3s;ease);
		border: 1px solid #ccc;
		clear: both;
		margin: 20px auto;
		position: relative;
		&.iPhone {
			width: 360px;
			padding: 96px 20px;
			.rounded(50px);
			.preview-stage {
				width: 322px;
				height: 570px;
				border: 1px solid #ccc;
			}
			&:before {
				position: absolute;	width: 60px; height: 60px; .rounded(50%); border: 1px solid #ccc; bottom: 18px; left: 150px; content: ""; display: inline-block;
			}
			&:after { position: absolute; width: 24px; height: 24px; .rounded(6px); border: 1px solid #ccc; left: 168px; bottom: 36px; content: ""; display: inline-block; }
		}
		&.iPhoneLandscape {
			width: 760px;
			margin-top: 120px;
			padding: 20px 96px;
			.rounded(50px);
			.preview-stage {
				width: 570px;
				height: 322px;
				border: 1px solid #ccc;
			}
			&:before {
				position: absolute;	width: 60px; height: 60px; .rounded(50%); border: 1px solid #ccc; right: 18px; top: 150px; content: ""; display: inline-block;
			}
			&:after { position: absolute; width: 24px; height: 24px; .rounded(6px); border: 1px solid #ccc; top: 168px; right: 36px; content: ""; display: inline-block; }
		}
		&.iPad {
			width: 890px;
			padding: 60px 60px 96px 60px;
			.rounded(50px);
			.preview-stage {
				width: 770px;
				height: 1026px;
				border: 1px solid #ccc;
			}
			&:before {
				position: absolute;	width: 60px; height: 60px; .rounded(50%); border: 1px solid #ccc; bottom: 18px; left: 415px; content: ""; display: inline-block;
			}
			&:after { position: absolute; width: 24px; height: 24px; .rounded(6px); border: 1px solid #ccc; left: 433px; bottom: 36px; content: ""; display: inline-block; }
		}
		&.iPadLandscape {
			width: 1182px;
			//height: 1146px;
			padding: 60px 96px 60px 60px;
			.rounded(50px);
			.preview-stage {
				width: 1026px;
				height: 770px;
				border: 1px solid #ccc;
			}
			&:before {
				position: absolute;	width: 60px; height: 60px; .rounded(50%); border: 1px solid #ccc; right: 18px; top: 415px; content: ""; display: inline-block;
			}
			&:after { position: absolute; width: 24px; height: 24px; .rounded(6px); border: 1px solid #ccc; top: 433px; right: 36px; content: ""; display: inline-block; }
		}

		&.desktop {
			width: 100%;
			height: 100%;
			margin: 0;
			border: 0;
			.preview-stage {
				height: 100%;
			}
		}
		.preview-stage iframe { 
			width: 100%;
			height: 100%;
			display: inherit;
		}
	}
}
.jotform-form {
	width: 100%;
	padding-left: 84px;
	padding-right: 84px;
	display: inline-block;
	text-align:left;
	.accessibility-advanced-designer-warning {
		position: relative;
		background: #F9D592;
		color: #99670B;
		font-size: 16px;
		padding: 8px 0 8px 35px;
		border-radius: 4px;
		margin: 8px 0;
		&:before {
			content: '';
			position: absolute;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cg fill='none' fill-rule='evenodd'%3e%3ccircle cx='10' cy='10' r='10' fill='%2399670B'/%3e%3cg fill='%23F9D592' transform='translate(9 5)'%3e%3cpath d='M0 0h2.6364v6.5909H0z'/%3e%3ccircle cx='1.3182' cy='9.2273' r='1.3182'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
			width: 20px;
			height: 20px;
			background-repeat: no-repeat;
			left: 10px;
			top: 5px;
		}
	}
}
.main {
	padding:0;
	z-index: 10;
	height:100%;
	overflow: auto;

	.form-iframe-container {
		font-size: 0;
		text-align: center;
		padding-left: 62px;
	}
}
* {
  box-sizing: border-box;

}

.search-box { 
	float: right;
	position: relative;
	display: none;
	margin: 24px 15px 0 0;
	

	input {
		border:1px solid fade(#464646, 0%);
		background-color: fade(#5e5e5e, 0%);
		width: 30px;
		.box-shadow(0 1px 0 fade(#5e5e5e, 0%));
		cursor: pointer;
	    
		padding: 4px 18px 4px 12px;
		margin:0;		
		color:fade(#aaa, 0%);
		line-height: inherit;
		font-size: inherit;
		position: relative;
		z-index: 10;
		.rounded(50px);


		.transition(all;0.3s;ease);
		
		&::-webkit-input-placeholder { color: fade(#aaa, 0%); }
		&:-moz-placeholder { color: fade(#aaa, 0%); } /* Firefox 18- */
		&::-moz-placeholder { color: fade(#aaa, 0%); } /* Firefox 19+ */
		&:-ms-input-placeholder { color: fade(#aaa, 0%); }

		&:focus {
			outline: none;
		}
	}


	.fa {
		color:#999;
		position: absolute;
		display: block;
		top: 1px;
		right: 1px;
		font-size: 18px;
		line-height: 28px;
		cursor: pointer;
		z-index: 9;
	
		border:1px solid #999;
		height: 30px;
		width: 30px;
		text-align: center;
		.rounded(50%);
		.transition(color,border-color,line-height;0.3s;ease);

		&.fa-search {
			font-size: 16px;
		}
	}

	&:hover .fa {
		border-color: #fff;
		color:#fff;
	}
	&.active {
		input {
			color:#aaa;
			width: 180px;
			border:1px solid #464646;
			background-color: #5e5e5e;
			.box-shadow(0 1px 0 #5e5e5e);
			cursor: text;	

			&::-webkit-input-placeholder { color: #aaa; }
			&:-moz-placeholder { color: #aaa; } /* Firefox 18- */
			&::-moz-placeholder { color: #aaa; } /* Firefox 19+ */
			&:-ms-input-placeholder { color: #aaa; }
		}

		.fa {
			z-index: 11;
			border-color: fade(#999, 0%);
		}
	}
}

// -----------------------
// 1 - BOOTSTRAP OVERRIDES
// -----------------------

// -------------
// 2 - HEADER
// -------------



.header {
	position: fixed;
	top:0;
	left:0;
	z-index: 12;
	.border-box();
	height: 100%; 
	width: 62px;
	padding: 0 10px;
	background: #4e4e4e;

	.masthead {
		float: left;
		margin: 12px 0 16px 0; 
		white-space: nowrap;
		position: relative;
		cursor: default;
		&:after {
			content: ""; display: inline-block; height: 2px; width: 62px; background: #333; border-bottom: 1px solid #555; position: absolute; left: -10px; bottom: -14px;
		}
		a {
			float: left;
			position: relative;
			z-index: 3;
			height: 42px;
			width: 42px;
			display: block;
			&:before {
				content: attr(data-tooltip);
				display: inline-block; 
				position: absolute;
				top: 6px; 
				font-size: 14px;
				line-height: 30px;
				height: 30px;
				left: 60px;
				color: #333;
				overflow: hidden;
				width: 0;
				text-align: left;
				.transition(width,padding;0.3s;ease);
				background: #333;
				.rounded(3px);
			}
			&:after {
				content: "";
				display: inline-block;
				position: absolute;
				opacity: 0;
				height: 0;
				width: 0;
				top: 15px;
				border: 6px solid transparent;
				border-right-color: #333;
				left: 54px;
				.transition(left,opacity;0.3s;ease);
			}
			&:hover {
				&:before {
					width: auto;
					padding: 0 12px;
					color: #efefef;
				}
				&:after {
					opacity: 1;
					left: 48px;
				}
			}
		}
		
		.fa {
			height: 42px;
			width: 42px;
			text-align: center;
			line-height: 40px;
			border: 1px solid #fff;
			position: absolute;
			top: 1px;
			font-size: 18px;
			left: 0;
			color: #fff;
			.rounded(50%);
			opacity: 0;
			cursor: pointer;
			.transition(transform,opacity;0.3s;ease);
		}


		img {
			width: 42px;
			height: 42px;
			float: left;
			margin-right: 12px;
			opacity: 0.5;
			cursor:pointer;
			background-image:url(//cdn.jotfor.ms/assets/img/logo-wh.png);
			background-repeat: no-repeat;
			background-position: 0 0;
			.transition(transform,opacity;0.3s;ease);
		}

		div {
			font-size: 10px;
			color: fade(black, 50%);
			font-weight: bold;
			line-height: 12px;
			letter-spacing: 2px;
			font-style: normal;
			margin-top: 3px;
			opacity: 1;
			padding-left: 64px;
			.transition(opacity;0.3s;ease);
		}

		h3 {
			font-size: 20px;
			line-height: 24px;
			font-style: italic;
			color: fade(black, 30%);
			letter-spacing: 0.1px;
			padding-left: 64px;
			opacity: 1;
			margin:0;
			.transition(opacity;0.3s;ease);
		}

		&:hover {
			text-decoration: none;
			img {
				.transform(rotateY(180deg));
				opacity: 0;
				.transition(transform,opacity;0.3s;ease);
			}

			.fa-times {
				.transform(rotateY(180deg));
				opacity: 0.5;	
				.transition(transform,opacity;0.3s;ease);
			}
		
			h3, div {
				opacity: 0;
			}	
		}

		&.navOpen {
			img {
				.transform(rotateY(180deg));
				opacity: 0;
				.transition(transform,opacity;0.3s;ease);
			}

			.fa {
				.transform(rotateY(180deg));
				opacity: 0.25;	
				.transition(transform,opacity;0.3s;ease);
			}
		
			h3, div {
				opacity: 0;
			}	
		}
	}


	.controls {

		li {
			display: inline-block;
			float: right;
			height: 42px;
			width: 42px;
			border: 1px solid fade(white, 40%);
			color: fade(white, 40%);
			margin-top: 8px;
			.rounded(24px);
			.transition(all; 0.3s; ease;);
			white-space: nowrap;
			font-weight: normal;
			line-height: 42px;
			text-align: center;
			letter-spacing: -0.3px;
			cursor: pointer;
			position: relative;
			&:before {
				content: attr(data-tooltip);
				display: inline-block; 
				position: absolute;
				top: 6px; 
				font-size: 14px;
				line-height: 30px;
				height: 30px;
				left: 60px;
				color: #333;
				overflow: hidden;
				width: 0;
				text-align: left;
				.transition(width,padding;0.3s;ease);
				background: #333;
				.rounded(3px);
			}
			&:after {
				content: "";
				display: inline-block;
				position: absolute;
				opacity: 0;
				height: 0;
				width: 0;
				top: 15px;
				border: 6px solid transparent;
				border-right-color: #333;
				left: 54px;
				.transition(left,opacity;0.3s;ease);
			}

			&:hover {
				color: fade(white, 75%);
				border: 1px solid fade(white, 75%);
				.fa {
					color: fade(white, 80%);
				}
				&:before {
					width: auto;
					padding: 0 12px;
					color: #efefef;
				}
				&:after {
					opacity: 1;
					left: 48px;
				}
			}

			&.saved {
				color: #109C2C;
				border-color: #59A869;
				.fa {
					color:#109C2C;
				}
			}
		}

		.fa {

			display: inline-block;
			width: 36px;
			height: 40px;
			.rounded(50%);
			.transition(all; 0.3s; ease;);
			
			font-size: 18px;
			line-height: 40px;
			color: fade(white, 60%);
			text-align: center;
			text-indent: 0;
		}

	}
}

// -------------
// 3 - SIDEBAR
// -------------

.sidebar {
	top:0;
	right: 0;
	bottom: 0;
	margin-right: 0;
	z-index: 12;
	line-height: 1.42857143;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;

	border-left:1px solid #353535;
	background: #4e4e4e;
	.box-shadow(inset 6px 0 30px fade(black, 10%));
	.transition(width,margin;0.3s;ease);
	&.closed {
		margin-right: -33.33333333%;
	}

// 3.1 - Tabs

	.nav-tabs { 
		width: 100%;
		position: absolute;
		z-index: 15;
		top: 0;
		padding-bottom: 10px;

		li { 
			display: block;
			width: 50%;
			float: left;
			a {
				background-color: #3e3e3e;
				border-bottom-color: #2e2e2e;
				color:@orange-dark;
				white-space: nowrap;
				.rounded(0);
				letter-spacing: 1.5px;

				&:hover {
					border-color:transparent transparent #2e2e2e;
				}
			}
			
			&.active a { 
				font-weight: bold;
				color:#fff;
				border-color: transparent #2e2e2e transparent #2e2e2e;
			}

			&.active a,
			&.active a:hover,
			&.active a:focus {
				background-color: #4E4E4E;
				border-color: transparent #2e2e2e transparent #2e2e2e;
			}

			&:first-child a { border-left: none !important;}
			&:last-child a { border-right: none !important;}
			&:first-child:not(.active) a { .box-shadow(inset 36px 0 30px -30px fade(black, 10%)) }
		}

		&.sm {
			li {
				width: 33%;
			}
		}

		&.triple li {
			width: 33.3%;
		}
	}

}


/* ömer - touchspin */

	.bootstrap-touchspin {
		position: relative;
		display: table;
		border-collapse: separate;
		width: 100%;

		.input-group-btn-vertical {
			position: absolute;
			top: 0;
			margin: 0;
			right: 0;
			width: 25px;
			.bootstrap-touchspin-up, .bootstrap-touchspin-down {
				padding: 8px 12px;
				i {
					top: 4px;
					left: 8px;
				}
			}

		}
	}

/* ömer - touchspin */



// -----------------
// 4 - INSPECT MODE
// -----------------

.reverseActive {
	outline: 3px solid fade(@orange, 50%) !important;
	.box-shadow( 0 0 9px 3px fade(@orange, 50%));	
}


.hover {
	outline: 3px solid fade(green, 20%) !important;

	position: relative;
	cursor: pointer;
	background-color: fade(green, 10%);
	.box-shadow( 0 0 9px 3px fade(green, 50%));
}

.hoverSticky {
	outline: 3px solid fade(green, 20%) !important;

	position: relative;
	cursor: pointer;
	background-color: fade(green, 10%);
	.box-shadow( 0 0 9px 3px fade(green, 50%));
}

.hover-name {
	background: fade(green, 50%);
	color:white;
	z-index:99;
	font-size: 14px !important;
	outline: 0 !important;
	padding:6px 12px; 
	font-weight: normal !important;
	white-space: nowrap;
	line-height: 21px !important;
	.rounded(0 0 3px 3px);
	.box-shadow(none);
}

.hover-outline {
	background-color: fade(green, 50%);
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
}

// -----------------
// 5 - FORM SELECTOR
// -----------------

.form-selector {
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	z-index: 50;
	height: 100%;
	background: #fff;
	text-align: center;

	& > div {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -80%);
		-moz-transform: translate(-50%, -80%);
		transform: translate(-50%, -80%);
	}

	p {
		font-size: 24px;
		font-weight: 300;
		color:#666;
		margin-bottom: 48px;
	}

	button {
		margin: 0 12px;
		min-width: 240px;
		padding: 12px;
	}

	.forms-list {
		display: none;
		-webkit-transform: translate(-50%, -65%);
		-moz-transform: translate(-50%, -65%);
		transform: translate(-50%, -65%);
		min-width: 600px;
		text-align: left;

		h2 {
			font-weight: 300;
			margin-bottom: 24px;
		}

		ul {
			border:1px solid #eee;
			background: #fafafa;
			max-height: 300px;
			overflow:scroll; 
			.rounded(6px);
			.box-shadow(inset 0 2px 6px fade(black, 5%));
		}

		li {
			display: block;
			padding: 18px 24px;
			border-bottom: 1px solid #eee;
			position: relative;
			cursor: pointer;

			&:hover {
				background-color: #f5f5f5;
			}

			&:after {
				content: '\f00c';
				color:green;
				font-size: 24px;
				font-family: FontAwesome;
				position: absolute;
				right: 24px;
				top: 12px;
				opacity: 0;
			}

			&.selected { 
				background-color: #fff;

				&:after {
					opacity: 1;
				}

			}


			&:first-child { .rounded(6px 6px 0 0); }
			&:last-child { border-bottom: none; .rounded(0 0 6px 6px); }
		}

		button {
			margin: 24px 0 0;
		}
	}
}


// -------------------
// 6 - MISC & EXTERNAL
// -------------------


// Custom Scroll Style override
.mCustomScrollbar {
	margin: 0 -15px;
}

.mCSB_container {
	margin-right: 0 !important;
}

// Ace Editor custom errors
.aceCustomError{
	background-color: rgba(255, 0, 0, 0.3);
	color: white;
	bottom: -50px;
	font-size: 12px;
	height: auto;
	white-space: normal;
	left: 0;
	padding: 12px 12px 6px 50px;
	position: absolute;
	width: 100%;
	z-index: 100;
}

// Ace Editor custom errors
.aceCustomSuccess{
	background-color: rgba(0, 255, 0, 0.5);
	bottom: -50px;
	color: white;
	font-size: 12px;
	height: 40px;
	left: 0;
	padding-left: 50px;
	padding-top: 12px;
	position: absolute;
	width: 100%;
	z-index: 100;
}

.ace_errored_line{
	background : rgba(255, 0, 0, 0.1);
}

// Ace Editor positioning & remove css transition
#editor,#inspectEditor {
	width: 100%;
	float: left;
	min-height: 300px;
	height: 99%;
	margin: 0;
	margin-top: 1%;
	vertical-align: top;

	& * { .transition(); }
}


#editor,#inspectEditor.zaw {
	left: -16px;
	right: -16px;
	height: 100%;
	top: -54px;
}
/* Fix for IE9 & IE10 */
.jotMSIE9, .jotMSIE10{
	#inspectEditor {
		height: 500px;
	}
}
// Remove CSS transition from colorpicker 
.sp-container {	
	overflow: hidden; 
	&, & * {
		.transition;
		-moz-transition-property:none;
	}

	background-color: #5e5e5e;
	border-color: #2e2e2e;
	.rounded(3px); 
	.box-shadow(0 3px 9px fade(black, 50%));


	.sp-input {
		background-color:#3e3e3e;
		color:#999;
		border: 1px solid #2e2e2e;
	}

	.sp-button-container {
		display: block;
		float:none;
		.sp-cancel {
			margin-top: 7px;
			color: @orange-dark !important;
			float: left;
		}

		.sp-choose {
			margin-top: 3px;
			float: right;
			padding: 4px 12px 3px 12px;
			font-size:12px;
			line-height: 16px;
			color:#ddd;
			text-shadow: 0 -1px 1px #000;
			border-color:#3e3e3e;

			background-color: #4e4e4e;
			background-image: -webkit-linear-gradient(top, #5e5e5e, #4e4e4e);
			background-image: -moz-linear-gradient(top, #5e5e5e, #4e4e4e);
			background-image: -ms-linear-gradient(top, #5e5e5e, #4e4e4e);
			background-image: -o-linear-gradient(top, #5e5e5e, #4e4e4e);
			background-image: linear-gradient(to bottom, #5e5e5e, #4e4e4e); 
		}
	}
	
	.sp-palette-container {
		border-right-color:#3e3e3e;
	}

	.sp-picker-container {
		border-left-color: #6e6e6e;
	}

	.sp-palette .sp-thumb-el {
		float: none;
	}
}

// Style for elimintaing bg color and border in form builder
#stage {
	.container-fluid {
		background-color: none;
	}

	.form-all {
		border:none;
	}
}


#saveAsTheme {
	display: none;
}

.footnote {
	position: absolute;
	bottom: 8%;
	right: 21px;
	display: inline-block;
	font-size: 14px;
	line-height: 21px;
	color:#aaa;


	label {
		cursor: pointer;
		letter-spacing: 0.1px;
		font-weight: 300;
		&:before {
			content: '';
			display: inline-block;
			width: 20px;
			height: 20px;
			margin-right: 6px;
			.rounded(6px);
			vertical-align: baseline;
			border: 2px solid fade(black, 20%);
			background: fade(white, 20%);
			position: relative;
			top: 4px;
			.bg-clip(content);
		}
		&:after {
			font-family: FontAwesome;
			content: '\f00c';
			color:#FFD39E;
			position: absolute;
			z-index: 10;	
			display: inline-block;
			opacity: 0;
			.transition(opacity;0.15s;ease;);
			top:4px;
			left:3px;
		}
	}

	input:checked ~ label:after {
		opacity: 1;
	}
	input { display:none; }

	#showAll {
		color: @orange-dark;
	}
}

// Rangeslider.js Styling

.rangeslider {
	height: 10px;
	border:1px solid #464646;
	background: #5e5e5e;
	margin-bottom: 36px;
	.box-shadow( 0 1px 0 #5e5e5e);
}

.rangeslider__fill {
	height: 8px;
	background: #ECA44F;
	.box-shadow(none);
}

.rangeslider__handle {
	background: #ddd;
	height: 20px;
	width: 20px;
	top:-6px;
	.box-shadow(0 1px 3px 1px fade(black, 20%)~", inset" 0 1px 0 #fff);
	z-index: 10;
}

.slidervalue-handle {
	position: absolute;
	display: block;
	padding: 3px;
	width: 36px;
	margin: 0!important;
	
	background: #eee;
	color: #6e6e6e;
	text-shadow:0 1px 0 #fff;
	font-size: 10px;
	line-height: 12px;
	text-align: center;
	margin-left: -18px;
	z-index: 11;
	text-indent: -2px;

	.rounded(3px);
	.box-shadow(0 1px 3px fade(black, 20%));
	&:after {
		background: none;
		display: block;
		content: '';
		height: 0;
		width: 0;
		position: absolute;
		top: -12px;
		left:50%;
		margin-left: -6px;
		border:6px solid fade(#eee, 0%);
		border-bottom:6px solid #eee;
		z-index: 12;
		.rounded(0);
	}
}

.slider-min {
	display: inline-block;
	position: absolute;
	top: 66px;
	left: 26px;
	color:#7e7e7e;
	font-size: 10px;
}

.slider-max {
	display: inline-block;
	position: absolute;
	top: 66px;
	right: 26px;
	color:#7e7e7e;
	font-size: 10px;
}


// Select2 styling

.select2-container{
	background: #5e5e5e;
	border:1px solid #464646;
	.box-shadow(0 1px 0 #5e5e5e) !important;

	span {
		margin: 0 !important;
	}
	.select2-choice {
		height: auto;
		background:none;
		padding: 0;
		border:0;

		.select2-chosen {
			color:#aaa;
			margin-right: 26px !important;
			padding: 6px 0 6px 8px;
			height: 32px;
			line-height: 20px;
		}

		.select2-arrow {
			border-left:1px solid #3e3e3e;
			background: #4e4e4e;
			padding:0 3px;
			width: 24px;
			.rounded(0 2px 2px 0);
			.box-shadow(inset 1px 0 0 #6e6e6e);
			b {
				background-position: 0 3px;
			}
		}
	}
	
	&.select2-container-active .select2-choice {
		.box-shadow(none) !important;
	}

	&.form-control.select2-dropdown-open {
		border-color:#3e3e3e;

		.select2-choice {
			.rounded(4px 4px 0 0);
			background-color: #EEE;
			background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFF), color-stop(0.5, #EEE));
			background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
			background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
			background-image: linear-gradient(to top, #FFF 0%, #EEE 50%);
		}
		.select2-chosen {
			color:#6e6e6e;
		}
		.select2-arrow {
			background: transparent;
			border-color: transparent;
			.box-shadow(none);

			b {
				background-position: -18px 3px;
			}
		}
	}
}

.select2-drop-active {
	border:1px solid #3e3e3e;
	border-top:none;

	.select2-results .select2-highlighted {
		background: #ECA44F;
	}
}

.zen-editor-wrapper {
	position: fixed;
	right: 10px;
	width: 41%;
	height: 100%;
}

.zenmode {
	color: #fff;
	padding-top: 16px;
	padding-right: 19px;
	cursor: pointer;
}

.zenmode.zaw {
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
}



.slide-nav {
	font-family: Circular, @system-font;
	top:0;
	left: 0;
	margin-left: -33.33333333%;
	bottom: 0;
	z-index: 12;
	line-height: 1.42857143;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;

	border-right:1px solid #3e3e3e;
	background: #4e4e4e;
	.box-shadow(inset -6px 0 30px fade(black, 10%));
	.transition(width,margin;0.3s;ease);

	&.open {
		margin-left: 0;
	}
}

.no-form {	
    margin: 15px 15px;
    background: rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    color: #ccc;
    padding: 18px 21px;
    p {
    	font-size: 16px;
    	margin: 0;
    	letter-spacing: -1px;
			font-weight: bold;
			color:@orange-dark;
			text-transform: uppercase;
			line-height: 30px;
    }
    a.create-form {
    	margin-top: 15px;
	    padding: 12px;
	    background: #D69E5C;
	    text-align: center;
	    color: #fff;
	    cursor: pointer;
	    border-radius: 4px;
	    display: block;
    }
}


.slide-nav {
	& > div {
		overflow: auto;
		margin: 0 -15px;
	}

	.mCustomScrollbar {
		margin:0;
	}
	.slideNavHeader {    
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color:#ccc;
		color:@orange-dark;
		font-weight:300;
		text-transform: uppercase;
		font-size: 24px;
		line-height: 30px;
		margin: 24px 15px 18px;

		&.choose-form-double-title {

			margin-bottom: 0;
			font-weight: 400;

			& + .slideNavSubHeader {
				max-width: 320px;
				margin-top: 5px;
				text-indent: 1px;
				font-size: 14px;
				color: #ccc;
				padding:0px 15px 10px;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				font-weight: 300;
			}
		}
	}
	li {
		background: #535353;
		position: relative;
		.box-shadow(0 2px 6px fade(black, 10%));
		margin:6px 15px;
		color:#ccc;
		.transition(margin;0.3;ease;);

		a {
			padding: 12px 15px;
			display: block;
			color:#ccc;
			font-weight: 300;
			.transition(color;0.3;ease;);
		}

		&:hover a {
			color:@orange-dark;
		}

		&:first-child {
			margin-top: 0;
		}

		&:after {
			position: absolute;
			top: 8px;
			right: 23px;
			z-index: 10;
			height: 30px;
			width: 30px;
			content: "\f00c";
			font-size: 15px;
			text-align: center;
			line-height: 28px;
			font-family: FontAwesome;
			color:white;
			opacity: 0;
			.transition(opacity;0.3s;ease);
			.rounded(50%);
		}

		&.active {
			background-color:@orange-dark;
			color:#fff;
			font-weight: normal;
			a {
				color:white;
			}

			&:after {
				opacity: 1;
			}	
		}

		&.theme-active {
			background-color:@orange-dark;
			color:#fff;
			font-weight: normal;
			button {
				display: block;
				position: absolute;
				top: 8px;
				right: 8px;
				bottom: 8px;
				padding: 0px 12px;
				border: 1px solid #eee;
				background: transparent;

				cursor: pointer;
				text-transform: uppercase;
				.transition(all;0.3s;ease);
				.rounded(4px);			
				font-size: 12px;
				line-height: 28px;
				color: #eee;
				font-weight: bold;
				&:hover {
					background: #fff;
					color: @orange-dark;
				}
				
				&:focus {
					outline: 0;
				}
			}
			&:after {
				display: none!important;
			}

			a {
				color:white;
			}
		}
	}
}

.sb-button-list{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: blue;

  .button-style-item {
    width:  calc(~"100% / 3 - 12px");
    
    .jf-form-buttons{
      border: none;
      margin-left: 0;
    }
  }

  .button-style-item > button {
    width: 100%;
    min-width: auto;
  }
}


.radio-button-style-item,
.dd-style-item,
.error-state-style-item,
.error-state-style-item,
.text-input-style-item {
	float: left;
	padding: 0 12px 12px 0;

	img {
		float: left;
		border: 1px solid #444;
		height: 100%;
	}
}

img#ddStylePreview {
	height: 100%;
}

.list-unstyled.left-side {
	overflow: hidden;
	padding: 12px 0 0 12px;
}


.toggle-props {
	color: rgb(214, 158, 92);
	display: block;
	padding: 0 18px;
	line-height: 48px;
	font-weight: 300;
	position: relative;
	z-index: -1;
	opacity: 0;
	margin-top:-48px;
	.box-shadow(0 10px 20px -15px fade(black, 60%));
	border-bottom: 1px solid #424242;
	cursor: pointer;
	.transition(margin,opacity;0.3s;ease;);
	.fa {
		font-size: 12px;
		width: 21px;
		height: 21px;
		text-align: center;
		line-height: 21px;
		margin-right: 4px;
		border:1px solid @orange-dark;
		.rounded(50%);
		&:before {
			position: relative;
			left: -1px;
		}
	}

	&.active {
		margin-top:0;
		opacity: 1;
		z-index:12;
	}

	&.ao {
		.transition(none;0.3s;ease;);
	    width: 11%;
	    height: 48px;
	    border-radius: 5px 0 0 5px;
	    border: 1px solid #575757;
	    margin: 0!important;
	    float: left;
	    box-sizing: border-box;
	    padding: 0;
	    text-align: center;
	    position: absolute;
		top: 50px;
		left: 14px;
	    background: #363636;
	    border-right: 0;
	    line-height: 50px;
	    z-index: 6;
		.fa {

		    border: 0;
		    font-size: 24px;
		    color: #D69E5C;
		    margin: 0;
		    top: 0;

		}
	}
}


.loading {
	font-weight: 300;
	position: fixed;
	top: 30%;
	z-index: 30;
	text-align: center;
	
	h2 {
		font-size:24px;
		line-height: 30px;
		margin: 0;
	}

	div {
		font-size:18px;
		line-height: 30px;
		margin: 0;
	}

	.fa {
		font-size: 90px;
		height: 90px;
		width: 90px;
		margin: 0 auto 30px;
		line-height: 90px;
		color: @orange;
		text-align: center;
		.rounded(50%);
	}
}

.selected-button-set {
	border: 1px solid #797979!important;
}


.selectedQuestion{
	position: relative;
	outline: 3px solid fade(@orange, 40%);
	background: fade(@orange, 10%);
	.box-shadow( 0 0 9px 3px fade(@orange, 50%));

	&.form-line-active {
		outline: 3px solid fade(@orange, 20%);
		outline-offset:9px;
		.box-shadow(none);
		&:before {
			background: fade(@orange, 30%);
			bottom: -42px;
			right: -12px;
		}
	}

	&:after {
		content: attr(question-label);
		display: inline-block;
		position: absolute;
		color:white;
		z-index:99;
		background: fade(@orange, 50%);
		bottom: 0px;
		right: 0px;
		font-size: 14px !important;
		line-height: 21px !important;
		font-weight: normal !important;
		white-space: nowrap;
		outline: 0 !important;
		padding:6px 12px;
	}
	
	&.form-all.has-form-cover {
		position: relative;
		outline: 0;
		.box-shadow( 0 0 0px 0px fade(@orange, 0%));
	}
	&.form-all.has-form-cover:after {
		bottom: auto;
		top: -33px;
		height: 33px;
	}
	&.form-all.has-form-cover:before {
		outline: 3px solid fade(@orange, 40%);
		.box-shadow( 0 0 9px 3px fade(@orange, 50%));
	}
}

#sb-gallery > ul,#sb-mythemes > ul {
	list-style: none;
	padding: 0;
}

// Added to display conditionally hidden fields on Advanced Designer.
// Do not delete important declaration. Because it provide to visibility hidden for hidden inputs.
.form-field-hidden {
	display: flex !important;
	flex-direction: column;
}

.hasFormUserAvatar .accessibility-advanced-designer-warning + .form-cover-wrapper {
    margin-top: 32px;
}