Fire JS Bin - bootstrapstudio

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

var electron = {};

(function(){

// Preload the getting started guide

var img = new Image()
	img.src = '/assets/bootstrapstudio/tutorials/getting-started.json';

var browserWindow = null;
	var webContents = null;

electron.os = 'linux';

electron.development = false;
	electron.homePath = '';
	
	// Will use this to open files from the command line

electron.commandLineArgs = [];

electron.saveSetting = voidFunc;

electron.readSetting = function(set, def){
		return def || null;
	};

// Prevent the app from triggering the unload dialog

window.addEventListener('beforeunload', function(e){
		e.stopImmediatePropagation();
		e.stopPropagation();
	});

// Misc

electron.reloadWindow = voidFunc;
	electron.toggleDevTools = voidFunc;
	electron.addToRecent = voidFunc;
	electron.quit = voidFunc;
	electron.setTitle = voidFunc;

// Dialog functions

function onlyInBstudio(){
		app.alertDialog.open({
			title: "Not Available",
			message: 'This feature is not available in the web demo.'
		});
	}

function onlyInBstudioPromise(){
		onlyInBstudio();
		return new Promise();
	}

function voidFunc(){}

electron.takeScreenshot = function(){
		
		if(app.colorPicker.active){
			app.colorPicker.discard();
		}

onlyInBstudio();
	}
	
	electron.showFileOpenDialog = onlyInBstudio;
	electron.showFileSaveDialog = onlyInBstudio;

electron.pathExists = function(path){
		return fs.existsSync(path)
	}

electron.readFile = onlyInBstudioPromise;

electron.mkdirSync = function(path){
		return false;
	};

electron.writeFile = onlyInBstudioPromise;

// Binding to ports

electron.previewPort = 12345;
	electron.ssePort = 12345;

var httpServer, sseServer;

electron.listenOnNetwork = onlyInBstudio;

electron.stopListeningOnNetwork = voidFunc;

// Event stream server

electron.notifySSEClients = voidFunc;

// Generic functions

electron.getIPAddresses = function(){
		return ['0.0.0.0'];
	};

electron.openBrowserWindow = voidFunc;

// Application menu

electron.setMenu = voidFunc;

// Clipboard

electron.clipboardGet = function(){
		return '';
	};
		
	electron.clipboardGetText = function(){
		return '';
	};

electron.clipboardGetHTML = function(){
		return '';
	};
	
	electron.clipboardSet = onlyInBstudio;
	electron.clipboardSetText = onlyInBstudio;
	electron.clipboardSetHTML = onlyInBstudio;

})();

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap Studio</title>

<div class="top row">
		<h1 id="logo">Bootstrap Studio</h1>
	</div>

<div class="bottom row">
	
		<div class="left col">
			<p>Recent designs</p>
			<div class="recent"></div>
		</div>

<div class="buttons">
				<div class="button darkgray tutorial">Getting started guide</div>
				<div class="button darkgray create">Create new design</div>
				<div class="button darkgray open">Open existing</div>
			</div>
			
		</div>

</div>
	
</div>

<div id="menu">
	<div class="menu-entry new active">
		<i class="material-icon">insert_drive_file</i> New
	</div>

<div class="menu-entry open active">
		<i class="material-icon">folder</i> Open
	</div>

<div class="menu-entry settings active">
		<i class="material-icon">settings</i> Theme
	</div>

<div class="menu-entry export active">
		<i class="material-icon">flash_on</i> Export
	</div>

<div class="menu-entry preview active">
		<i class="material-icon">movie</i> <span>Preview</span>
	</div>

</div>
<div id="main">

<h3>Components</h3>

<div class="tabs">
				<div class="tab studio active" data-tab="studio">Studio</div>
				<div class="tab user" data-tab="user">User</div>
			</div>

<div class="search">
						<input type="search" required placeholder="Search components" />
						<i class="material-icon search-icon">search</i>
					</div>

<div class="message nothing-found">No components were found.</div>

<div class="tab-target user">
					<div class="list"></div>
					<div class="message no-components">You don't have any saved components. <a href="http://bootstrapstudio.io/library" class="darkgray button">Learn more</a></div>
				</div>

</div>

<div class="suggested">
				<hr>
				<div class="category-name"><span>Suggested</span> <span class="collapse"></span></div>
				<div class="suggested-list"></div>
			</div>
		</div>

<div id="overview-pane" class="pane tree-holder">
			
			<h3>Overview</h3>
			<div class="content"></div>
		</div>

<div class="devices">
					
					<span class="button-size lg" data-id="lg" title="LG">
						<i class="material-icon">desktop_windows</i>
					</span>

<span class="button-size md" data-id="md" title="MD">
						<i class="material-icon">laptop_mac</i>
					</span>
					
					<span class="button-size sm" data-id="sm" title="SM">
						<i class="material-icon">tablet_mac</i>
					</span>

<span class="button-size xs" data-id="xs" title="XS">
						<i class="material-icon">phone_iphone</i>
					</span>

</div>

</div>

<div id="inline-editing-bar" class="bar subbar">
				
				<span class="button darkgray bold" data-id="bold" title="Bold"><i class="material-icon">format_bold</i></span>
				<span class="button darkgray italic" data-id="italic" title="Italic"><i class="material-icon">format_italic</i></span>
				<span class="button darkgray underline" data-id="underline" title="Underline"><i class="material-icon">format_underline</i></span>
				<span class="button darkgray strike" data-id="strike" title="Strikethrough"><i class="material-icon">format_strikethrough</i></span>
				<span class="button darkgray link" title="Link"><i class="material-icon">link</i></span>
				<span class="button darkgray clear-styles" title="Clear Formatting"><i class="material-icon">format_clear</i></span>

<a class="button darkgray save">Apply</a>
				<a class="button darkgray discard">Discard</a>

<a class="button darkgray character-input">Char Input</a>
			</div>

<div id="column-operations-bar" class="bar subbar">
				
				<span class="button darkgray left" data-id="left" title="Move Left"><i class="material-icon">arrow_back</i></span>

<span class="button darkgray right" data-id="right" title="Move Right"><i class="material-icon">arrow_forward</i></span>

<span class="button darkgray widen" data-id="widen" title="Make Wider"><i class="material-icon">keyboard_arrow_left</i><i class="material-icon">keyboard_arrow_right</i></span>

<span class="button darkgray narrow" data-id="narrow" title="Make Narrower"><i class="material-icon">keyboard_arrow_right</i><i class="material-icon">keyboard_arrow_left</i></span>

</div>

</div>
			</div>
			
		</section>

</div>

<div id="right-panel" class="panel">
		
		<div id="options-pane" class="pane">
			<h3>Options</h3>
			<div class="message no-selected">No component selected</div>
			<div class="breadcrumb-holder"></div>
			<div class="content"></div>
		</div>
		
		<div class="handle horizontal visible"></div>

<h3>Design</h3>

</div>

</div>
</div>

<h5>Choose an Icon</h5>

<select>
			<option selected value="0">Glyphicons</option>
			<option value="1">Font Awesome</option>
		</select>

<div class="buttons">
			<div class="button primary ok disable">OK</div>
			<div class="button cancel">Cancel</div>
		</div>
	</div>

<div id="images-dialog" class="dialog">
		
		<h5>Choose an Image</h5>

<div class="buttons">
			<div class="button primary ok disable">OK</div>
			<div class="button cancel">Cancel</div>
			<div class="button aside import">Import Image</div>
		</div>
	</div>

<h5>Link Properties</h5>

<label>
				<span>Target</span>

<select>
					<option selected value="">Default</option>
					<option value="_blank">Blank</option>
					<option value="_parent">Parent</option>
					<option value="_top">Top</option>
				</select>

</label>

</div>

<div class="buttons">
			<div class="button primary disabled ok">OK</div>
			<div class="button cancel">Cancel</div>
			<div class="button aside remove">Remove Link</div>
		</div>
	</div>

<h5>Font Import</h5>

<p>Import web fonts from Google Fonts by pasting the URL above.</p>

</div>

<div class="buttons">
			<div class="button primary import disable">Import</div>
			<div class="button cancel">Cancel</div>
		</div>
	</div>

<h5>Custom Bootstrap Themes</h5>

<div class="content">
			<div class="listing"></div>
			<div class="message no-themes">You don't have any themes yet. Import a custom Bootstrap theme from the button below. Only CSS files are supported.</div>
		</div>

<div class="buttons">
			<div class="button primary cancel">Close</div>
			<div class="button import">Import Theme</div>
		</div>
	</div>

<div class="buttons">
			<div class="button primary ok">OK</div>
			<div class="button cancel">Cancel</div>
		</div>
	</div>

<h5>Error</h5>

<h5>Bootstrap Studio <span class="version"></span></h5>

<div class="message">
			<p>Computer name: <span class="computer-name"></span></p>
			<p class="updates-until"></p>
		</div>

<div class="buttons">
			<div class="button ok primary">Close</div>
		</div>
	</div>

<h6>Released on <span class="date"></span></h6>

<div class="buttons">
			<div class="button ok primary">Close</div>
		</div>
	</div>

<div class="message">
			<p>We hope that you like Bootstrap Studio so far! This is just a friendly reminder that your free trial will end soon. Upgrade now and enjoy a fantastic discount!</p>
		</div>

<div class="buttons">
			<div class="button primary purchase">Purchase License</div>
			<div class="button cancel">Cancel</div>
			<div class="button aside feedback">Send Feedback</div>
		</div>
	</div>

<h5>Choose a Bootstrap Theme</h5>

<div class="buttons">
			<div class="button primary ok">Choose</div>
			<div class="button cancel">Cancel</div>
			<div class="button aside manage-themes">Manage Themes</div>
		</div>
	</div>

<h5>Character Input</h5>

Insert

Clear

New Design

Name

Template

Blank
Landing Page
Product Page
Blog Post

Create

Cancel

Preview

Activating the preview will give you a URL which everyone on your local network can open on their smartphone or web browser and see the designs you are working on in real time.

Open in Browser

Preview is Disabled

Create New Component

Images

No image assets used.

Fonts

No font assets used.

CSS

No custom CSS used.

CSS

Create

Cancel

Select

Design

Favorites

Library

Select Cancel

An update is available

Restart Bootstrap Studio to activate it.

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html{
	-webkit-user-select: none;
	user-select:none;
	cursor:default;
	overflow: hidden;
	background-color: #2C3134;
}

body{
	font:16px/1 Arial, Helvetica, sans-serif;
	color: #fff;
	height: 100%;
	width:100%;
	position: fixed;
	top: 0;
	left: 0;
}

body.resizing-x{
	cursor: col-resize;
}

body.resizing-x .cloak,
body.resizing-y .cloak{
	display:block;
}

body.resizing-y{
	cursor: row-resize;
}

a, a:visited{
	text-decoration:none;
	color:inherit;
}

input, textarea, select{
	outline:none;
	position: relative;
	font-family:sans-serif;
}

input[type=search]{
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button:after {
	content: '\d7';
	font-weight: normal;
	font-size: 18px;
	position: absolute;
	color: #FFF;
	width: 1em;
	height: 1em;
	top: 5px;
	right: 5px;
}

/* Chrome scrollbars */

::-webkit-scrollbar {
	height: 6px;
	width: 6px;
	background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
	background: #677073;
}

::-webkit-scrollbar-thumb:hover {
	background: #767F82;
}

::-webkit-scrollbar-corner {
	display:none;
}

/* Iconset */

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(/assets/bootstrapstudio/material-icons.woff2) format('woff2');
}

.material-icon{
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 18px;
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	word-wrap: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Building Blocks */

.gray-item, .white-item{
	background-color: #495054;
	font-size: 13px;
	padding: 6px 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
	white-space: nowrap;
}

.gray-item .name,
 .white-item .name{
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	max-width: calc(100% - 50px);
	text-overflow: ellipsis;
	line-height: 16px;
}

.gray-item .edit,
.gray-item .delete,
.white-item .edit,
.white-item .delete{
	opacity:0.9;
	float: right;
	color: #FFF;
	width: 16px;
	height: 16px;
	text-align: center;
	background-color: #383F43;
	line-height: 18px;
	border-radius: 50%;
	font-weight: bold;
}

.gray-item .edit,
.white-item .edit{
	margin-right: 4px;
}

.gray-item .edit i,
.white-item .edit i{
	font-size:11px;
}

.gray-item .edit:hover,
.gray-item .delete:hover,
.white-item .edit:hover,
.white-item .delete:hover{
	opacity:1;
}

.gray-item:hover{
	background-color:#555C61;
}

.white-item{
	background-color: #FFF;
	border: 1px solid #DDD;
	border-radius: 1px;
}

.white-item:hover{
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.06) inset;
}

.white-item .edit{
	background-color: #63A2C3;
}

.white-item .delete{
	background-color: #c23838;
}

/* Smart editable */

.smart-editable{
	position: relative;
}

.smart-editable input{
	display:none;
}

.smart-editable.editing .name,
.smart-editable.editing .edit,
.smart-editable.editing .delete{
	display:none !important;
}

.smart-editable.editing input{
	display: inline-block;
	border: 0;
	padding: 2px 20px 2px 6px;
	margin: 0;
	font-size: 12px;
	color: #333;
	font-family: inherit;
	width: calc(100% - 20px);
	margin: -1px 0;
	height: 18px;
	vertical-align: middle;
}

.smart-editable.editing .save{
	display:block;
}

.smart-editable.editing .save i{
	font-weight: bold;
	font-size: 12px;
}

.smart-editable .edit{
	float:right;
	margin-right: 5px;
}

.smart-editable .save{
	position: absolute;
	display: none;
	top: 50%;
	right: 9px;
	width: 14px;
	height: 14px;
	text-align: center;
	line-height: 18px;
	border-radius: 50%;
	background-color: #73BD73;
	margin-top: -7px;
	opacity:0.8;
}

.smart-editable .save:hover{
	opacity:1;
}

.smart-editable .delete{
	float:right;
}

.button{
	display: inline-block;
	border-radius:2px;
	border:none;
	text-transform: uppercase;
	text-align: center;
	padding:12px 15px;
	line-height: 1;
	position: relative;
	outline:none;
}

.button:active{
	bottom:-1px;
}

/* Dark gray button theme */

.button.darkgray:active{
	opacity:0.8 !important;
}

.button.darkgray{
	font-weight: bold;
	color:#fff;
	background:linear-gradient(#82898c, #5a6064);
	opacity:0.9;
}

.button.darkgray:hover{
	opacity: 1;
}

/* blue button theme */

.button.darkblue:active{
	opacity:0.8 !important;
}

.button.darkblue{
	font-weight: bold;
	color:#fff;
	background: linear-gradient(#58B2DC, #2F83AA);
	opacity:0.9;
}

.button.darkblue:hover{
	opacity: 1;
}

/* Select and input themes */

input[type=text].dark,
input[type=number].dark{
	background-color: #4C5256;
	color: #FFF;
	border: none;
	font-size: 13px;
	padding: 4px 6px;
}

select.dark{
	color: #FFF;
	border: none;
	padding: 4px;
	border-right: 10px solid #4C5256;
	font-size: 13px;
	-webkit-appearance: none;
	background: #4C5256 url('/assets/bootstrapstudio/img/triangle.svg') no-repeat right center;
}

select.dark option{
	outline:none;
}

/* Tabs */

.tabs{
	border-bottom:1px solid #2f83aa;
	margin-top: 15px;
	margin-bottom: 10px;
	padding-left: 10px;
	height: 23px;
	flex-shrink: 0;
}

.tabs .tab{
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 6px 10px;
	float: left;
	position: relative;
}

.tabs .active{
	background-color:#2f83aa;
}

.tab.has-badge:after{
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: #25A8E4;
	border-radius: 50%;
	top: 1px;
	right: 1px;
}

.tab-target{
	display:none;
}

.tab-target.active{
	display:block;
}

/* Start Screen */

#startscreen{
	width:100%;
	height:100%;
	position: fixed;
	top:0;
	left:0;
	background-color:#202426;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	align-content: center;
}

#startscreen .top.row{
}

#startscreen #logo{
	width: 260px;
	height: 260px;
	background: url(/assets/bootstrapstudio/img/logo.svg) no-repeat;
	overflow: hidden;
	text-indent: -9999px;
	margin: 0 auto 50px;
	transition:margin-bottom 0.2s;
}

#startscreen .bottom.row{
	display: flex;
	justify-content: center;
	transition:0.3s;
	transition-delay:0.5s;
}

#startscreen.loading .bottom.row{
	pointer-events:none;
	opacity:0;
}

#startscreen .col{
	width:50%;
}

#startscreen .col.left{
	width: 360px;
	max-width:60%;
	display: none;
}

#startscreen .col.left p{
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	height: 25px;
	margin-top: -25px;
}

#startscreen .col.right{
    width: 160px;
	max-width:40%;
	height: 130px;
}

#startscreen .recent > div{
	background-color: #3B4144;
	margin: 0 50px 6px 0;
	padding: 10px 15px;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.15) inset;
	line-height: 1.5;
	position: relative;
}

#startscreen .recent > div a{
	/* The remove from recent button */
	position: absolute;
	top: 6px;
	right: 6px;
	width: 17px;
	height: 17px;
	text-align: center;
	border-radius: 50%;
	background-color: #2C3134;
	line-height: 19px;
	color: #BDC8CE;
	font-size: 14px;
}

#startscreen .recent > div:hover{
	background-color: #464D50;
}

#startscreen .recent > div .name{
	font-weight: bold;
	font-size:13px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

#startscreen .recent > div .path{
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color:#a9b1b6;
}

#startscreen .buttons{
	font-size:11px;
}

#startscreen .buttons .button{
	display:block;
	margin-bottom:10px;
}

#startscreen.has-recent .left.col{
	display: block;
}

#startscreen.has-recent #logo{
	margin-bottom: 90px;
}

#startscreen .buttons .button.tutorial{
	display: none;
}

#startscreen.show-tutorial .buttons .button.tutorial{
	display: block;
}

#startscreen.show-tutorial .col.right{
	width: 185px;
}

/* Update notification */

#update-ready{
	position: absolute;
	z-index: 1000;
	right: 40px;
	border-left: 2px solid #FFC800;
	background-color: #191B1D;
	margin: 0 50px 6px 0;
	padding: 10px 16px;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(0,0,0,0.4);
	line-height: 1.5;
	font-size: 14px;
	bottom:-200px;

transition:bottom 0.4s;
}

#update-ready.visible{
	bottom: 40px;
}

#update-ready .title{
	font-weight: bold;
}

#update-ready .description{
	font-size: 13px;
	color: #bbb;
}

#update-ready span{
	position: absolute;
	top: 6px;
	right: 6px;
	width: 17px;
	height: 17px;
	text-align: center;
	line-height: 19px;
	color: #BDC8CE;
	font-size: 17px;
}

/* Main layout */

#menu{
	height: 46px;
	background-color: #3D474C;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 1;
}

#menu .menu-entry{
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	padding: 4px 12px 4px 7px;
	margin-left: 4px;
	margin-top: 7px;
	border-radius: 2px;
	position: relative;
	color: #6E7880;
	pointer-events:none;
}

#menu .menu-entry.active{
	color:#fff;
	pointer-events:all;
}

#menu .menu-entry.active:hover{
	background-color: rgba(255, 255, 255, 0.06);
}

#menu .menu-entry:active{
	bottom:-1px;
	background-color: rgba(255, 255, 255, 0.04);
}

#menu .menu-entry i{
	background-color: #323639;
	vertical-align: middle;
	width: auto;
	height: 24px;
	padding: 0 4px;
	text-align: center;
	line-height: 24px;
	border-radius: 4px;
	margin-right: 6px;
}

#menu .new.active i{ color: #DDEAF1; }
#menu .open.active i{ color: #fcb04e; }
#menu .save.active i{ color: #31c5f0; }
#menu .settings.active i{ color: #ff5c5e; }
#menu .undo.active i{ color: #e955f2; }
#menu .redo.active i{ color: #70b751; }
#menu .preview.active i{ color: #68ace5; }
#menu .export.active i{ color: #fcb04e; }

#menu .preview{
	float:right;
}

#menu .export{
	float:right;
	margin-right:10px;
}

#main{
	display:flex;
	height: calc(100% - 46px);
}

#left-panel, #right-panel{
	display:flex;
	flex-grow:0;
	flex-shrink:0;
	flex-direction:column;
	position: relative;

width:250px;
	min-width:180px;
	max-width:400px;
}

.handle.vertical{
	position: absolute;
	width: 8px;
	right: -4px;
	cursor: col-resize;
	top: 0;
	bottom: 0;
	z-index: 1;
}

.handle.horizontal{
	position:absolute;
	width:100%;
	left:0;
	cursor: row-resize;
	height: 7px;
	z-index: 1;
}

.handle.horizontal.visible:before{
	content: '';
	width: 24px;
	position: absolute;
	left: 50%;
	top: 4px;
	margin-left: -12px;
	height: 1px;
	border: 1px solid #6A7277;
	border-left: none;
	border-right: none;
}

body.dragging .handle{
	cursor:default;
}

#center-panel{
	display:flex;
	flex-grow:1;
	flex-direction:column;
	overflow: hidden;
	min-width: 500px;
	position: relative;
}

#right-panel .handle.vertical{
	left:-1px;
	right:auto;
}

/* Panes */

.pane{ 
	overflow:auto;
}

.pane h3{
	background-color: #2F83AA;
	text-transform: uppercase;
	color: #FFF;
	font-size: 11px;
	padding: 7px 10px;
	box-sizing: content-box;
	margin-top: 12px;
	flex-shrink: 0;
}

.pane > .content{
	overflow: auto;
	margin-right: 10px;
}

.pane ::-webkit-scrollbar{
	width:4px;
	height:4px;
}

.pane hr{
	margin: 12px 10px;
	border: none;
	background-color: #242729;
	border-bottom: 1px solid #3B4144;
	height: 2px;
}

.pane .message{
	display:none;
	text-align: center;
	font-size: 12px;
	padding: 0 20px;
	line-height: 1.45;
}

.pane > .message{
	margin-top:15px;
}

.pane .message .button{
	font-size: 10px;
	padding: 8px;
	display: block;
	width: 100px;
	margin: 10px auto;
}

/* Styles pane */

#editor-pane{
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
	margin-top: 4px;
	position: relative;
	height:25px;
}

#editor-pane .handle.vertical{
	right: auto;
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	margin-top: 25px;
}

#editor-pane > div{
	flex-grow: 1;
	flex-shrink:1;
	display: flex;
	flex-direction: column;
}

#editor-pane #left-editor{
	width: 560px;
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 70%;
	min-width: 25%;
}

#editor-pane .html-column .html .handle{
	display: none;
	margin-top:-8px;
}

#editor-pane .editor-tabs{
	padding-left: 0;
	border: 0;
	height: 25px;
}

#editor-pane .editor-tabs .tab{
	font-size: 11px;
	font-weight: bold;
	padding: 7px 11px;
	vertical-align: bottom;
	display: inline-block;
	background-color: #2C3134;
	margin-right: 2px;
}

#editor-pane .editor-tabs .tab.can-be-closed{
	padding: 7px 28px 7px 11px;
}

#editor-pane .editor-tabs .tab.can-be-closed .close{
	display: block;
}

#editor-pane .editor-tabs .tab.active{
	background: linear-gradient(#535F65, #31373C);
}

#editor-pane .editor-tabs .tab.unsaved .title:after{
	content:' *';
}

#editor-pane .editor-tabs .tab .close{
	display: none;
	border-radius: 50%;
	width: 14px;
	height: 13px;
	position: absolute;
	top: 6px;
	right: 7px;
}

#editor-pane .editor-tabs .tab.active .close{
	/*background-color: #1C5671;*/
}

#editor-pane .editor-tabs .tab .close:hover{
	background-color: #C83B3D;
}

#editor-pane .editor-content{
	flex-grow: 1;
	flex-shrink: 1;
	flex-direction: column;
	display: flex;
	overflow: hidden;
	background-color: #24282B;
	position: relative;
}

#editor-pane .editor-content:before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 10px;
	height: 1px;
	z-index: 1;
	box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

#editor-pane .editor{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Editor toolbars */

#editor-pane .toolbar{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 38px;
	background: linear-gradient(#31373C, #2D3133);
	padding: 8px 10px;
	z-index: 1;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

#editor-pane .toolbar .button{
	font-size: 10px;
	padding: 6px 10px;
	margin-right: 1px;
	border-radius: 2px;
}

#editor-pane .toolbar .button.icon{
	padding: 0 4px;
	vertical-align: bottom;
	height: 22px;
	line-height: 34px;
}

/* HTML tree viewer */

#editor-pane .html-tree{
	display:flex;
	flex-direction:column;
}

#editor-pane .html-tree .attribute-panel{
	background-color: #24282B;
	padding: 0 10px 0;
	overflow: auto;
	flex-shrink: 0;
	display: none;
	border-top: 8px solid #2c3134;
	flex-grow: 0;
	height: 150px;
}

#editor-pane .html-tree .attribute-panel .option-group label{
	line-height:22px;
}

#editor-pane .html-tree .overrides-group{
	border-bottom: none;
	box-shadow: none;
	margin: 0;
}

#editor-pane .html-tree .attribute-panel button:last-child{
	float: right;
	margin-right: 0;
	padding: 5px 7px;
}

#editor-pane .html-tree .attribute-panel .line{
	height: 2px;
}

#editor-pane .html-tree .option-group.attributes{
	display: block;
	border-bottom: none;
	box-shadow: none;
	margin: 16px 10px 0;
	min-width: 350px;
}

#editor-pane .html-tree .control-group{
	min-width: 120px;
	width: calc( 100% - 120px );
	margin: 10px 0;
	border-bottom: 0;
	box-shadow: none;
	float: right;
	text-transform: uppercase;
	font-size: 12px;
}

#editor-pane .html-tree .control-group .button{
	margin-right: 10px;
	font-size: 12px;
	padding: 9px 12px;
}

#editor-pane .html-tree > .content{
	padding: 12px;
	font-size: 13px;
	line-height: 1.4;
	position: relative;
	overflow: auto;
	flex-grow:1;
}

#editor-pane .html-tree > .content div{
	padding-left: 14px;
	display:none;
}

#editor-pane .html-tree > .content .open-tag{
	white-space:nowrap;
}

#editor-pane .html-tree > .content .open-tag attr-name{
	color: #D0CC4C;
}

#editor-pane .html-tree > .content .open-tag attr-value{
	color:#FF4500;
}

#editor-pane .html-tree > .content div > .close-tag{
	font-weight: normal;
	color: #00AEEF;
	margin-left: 2px;
}

#editor-pane .html-tree > .content span{
	display: block;
	white-space: nowrap;
}

#editor-pane .html-tree > .content span b{
	font-weight: normal;
	color: #fff;
	margin-right: 15px;
}

#editor-pane .html-tree > .content span b:first-child{
	margin-left:16px;
}

#editor-pane .html-tree > .content > span > b:first-child{
	margin-left:0;
}

#editor-pane .html-tree > .content span b strong{
	font-weight: normal;
	color: #00AEEF;
}

#editor-pane .html-tree > .content span b em{
	font-style: normal;
	color: #EEE;
}

#editor-pane .html-tree > .content span b.expanded .close-tag,
#editor-pane .html-tree > .content span b.expanded em{
	display: none;
}

#editor-pane .html-tree > .content span b.focused,
#editor-pane .html-tree > .content .close-tag.focused{
	box-shadow: 0 0 0 1px #40A5D4;
}

#editor-pane .html-tree > .content span b.highlighted,
#editor-pane .html-tree > .content .close-tag.highlighted{
	box-shadow: 0 0 0 1px magenta;
}

#editor-pane .html-tree > .content span i{
	display: inline-block;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: #929292;
	border-width: 5px 0 5px 8px;
	margin-right: 8px;
	transform-origin: 4px 50%;
}

#editor-pane .html-tree > .content span i.down{
	transform:rotate(90deg);
}

/* Code Editor */

#editor-pane .code-editor .content{
	position: absolute;
	top: 38px;
	width: 100%;
	bottom: 0;
	overflow: hidden;
}

#editor-pane .code-editor .save:not(.active),
#editor-pane .code-editor .discard:not(.active){
	opacity:0.6;
	pointer-events:none;
}

/* CSS Editor */

#editor-pane .css-editor .content{
	padding: 10px;
	overflow: auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0;
}

#editor-pane .css-editor .message{
	height: 100%;
	display: none;
	text-align: center;
	font-size: 12px;
	padding-top: 24px;
	flex-grow: 1;
	background-color: #24282B;
}

#editor-pane .active-styles .inherit-label{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	margin: 12px 0 10px 0;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#editor-pane .css-editor .toolbar{
	display:none;
}

#editor-pane .active-styles .toolbar .create{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#editor-pane .active-styles .toolbar .create-choose{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#editor-pane .active-styles .toolbar .create-choose:after{
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: #FFF;
	border-width: 5px 3px 5px 3px;
	top: 9px;
	right: 9px;
}

#editor-pane .active-styles .content{
	top:38px;
}

/*#editor-pane .active-styles .create-style{
	font-size: 10px;
	padding: 7px 10px 6px;
	display: block;
	margin-bottom: 10px;
	background-color: #2C3134;
	border-left: 3px solid #2F83AA;
	text-transform: uppercase;
}

#editor-pane .active-styles .create-style:hover{
	background-color: #393E42;
}
*/

#editor-pane .css-editor .css-block{
	background-color: #2C3134;
	margin-bottom: 10px;
	padding: 10px;
	line-height: 1.4;
	position: relative;
	border-left: 3px solid #2F83AA;
	-webkit-user-select: initial;
	padding-left: 12px;
}

#editor-pane .css-editor .css-block .handle{
	cursor: row-resize;
	position: absolute;
	top: 11px;
	right: 28px;
	width: 11px;
	height: 14px;
	overflow: hidden;
}

#editor-pane .css-editor .css-block .handle:before {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	top: 3px;
	background-color: #fff;
	left: 1px;
	transform: rotate(45deg);
}

#editor-pane .css-editor .css-block .handle:after {
	content: '';
	position: absolute;
	width: 12px;
	height: 3px;
	background-color: #2C3134;
	top: 6px;
	left: 0;
}

#editor-pane .css-group:last-child .css-block:last-child,
#editor-pane .css-editor .css-block:last-child {
	margin-bottom: 0;
}

#editor-pane .css-editor div.spacer{
	height: 10px;
	margin: -10px 0 0;
	position: relative;
}

#editor-pane .css-editor div.spacer:last-child{
	margin-bottom: -10px;
}

#editor-pane .css-editor div.spacer + div.spacer{
	/* Hide all sibling spacers. This happens when deleting a block. */
	display: none;
}

#editor-pane .css-editor div.spacer:before{
	content:'';
	position: absolute;
	top:50%;
	left:0;
	right:0;
	height:1px;
	background-color: #40A5D4;
	margin-top:-1px;
	opacity: 0;
	transition:opacity 0.2s;
}

#editor-pane .css-editor div.spacer.highlight:before{
	opacity:1;
}

#editor-pane .css-editor .css-block.system{
	border-left: none;
	padding-left: 15px;
}

#editor-pane .css-editor .css-block .media{
	margin-right: 20px;
	border-bottom: 1px solid #494E54;
	padding-bottom: 8px;
	margin-bottom: 8px;
	font-size: 12px;
	color: #FBA929;
}

#editor-pane .css-editor .css-block .media.error{
	color: #FF4500;
	text-decoration: line-through;
}

#editor-pane .css-editor .css-block .media span,
#editor-pane .css-editor .css-block .media input{
	font: inherit;
	color: inherit;
	font-size: inherit;
	border: none;
	height: 16px;
	line-height: 16px;
	display: inline-block;
	text-decoration: inherit;
}

#editor-pane .css-editor .css-block .media input{
	color:#2C3134;
}

#editor-pane .css-editor .css-block .menu{
	width: 15px;
	position: absolute;
	height: 21px;
	top:8px;
	right:8px;
	-webkit-user-select: none;
	user-select:none;
}

#editor-pane .css-editor .css-block .menu:hover{
	background-color: rgba(255,255,255,0.15);
}

#editor-pane .css-editor .css-block .menu > span{
	position: absolute;
	width: 3px;
	height: 3px;
	background-color: #fff;
	border-radius: 3px;
	top: 9px;
	left: 6px;
}

#editor-pane .css-editor .css-block .menu > span:before,
#editor-pane .css-editor .css-block .menu > span:after{
	content: '';
	position: absolute;
	width: 3px;
	height: 3px;
	background-color: #fff;
	border-radius: 3px;
	top: -5px;
	left: 0;
}

#editor-pane .css-editor .css-block .menu > span:after{
	top: 5px;
}

#editor-pane .css-editor .css-block .origin{
	float: right;
	font-size: 11px;
	position: absolute;
	bottom: 11px;
	right: 12px;
	color: #A4B2BD;
	opacity: 0.6;
}

#editor-pane .css-editor .css-block .origin .material-icon{
	font-size: 14px;
	vertical-align: middle;
	line-height: 12px;
}

#editor-pane .css-editor .css-block .opening-brace,
#editor-pane .css-editor .css-block .closing-brace{
	font-family: 'Source Code Pro', monospace;
	font-size: 12px;
	margin-bottom:3px;
	margin-right: 10px;
}

#editor-pane .css-editor .css-block .closing-brace{
	margin-bottom:0;
	margin-top:5px;
}

#editor-pane .css-editor .css-block ul.rules{
	list-style: none;
	font-family: 'Source Code Pro', monospace;
	font-size: 12px;
	margin-bottom:0;
}

#editor-pane .css-editor .css-block ul li{
	position: relative;
}

#editor-pane .css-editor .css-block ul span{
	/*padding: 2px 0;*/
}

#editor-pane .css-editor .css-block ul li.placeholder input[type=checkbox]{
	visibility:hidden;
	pointer-events:none;
}

#editor-pane .css-editor .css-block .selector{
	color: #959DA0;
}

#editor-pane .css-editor .css-block .selector b{
	color: #4BCEFF;
	font-weight:normal;
}

#editor-pane .css-editor .css-block.system .selector b{
	color: #00AEEF;
}

/* When the rule is a system one */

#editor-pane .css-editor .css-block ul li.system input[type=checkbox]{
	opacity:0;
	pointer-events:none;
}

/* Error classes */

#editor-pane .css-editor .css-block span.error{
	color:red !important;
}

/* When the rule is enabled or disabled */

#editor-pane .css-editor .css-block ul li.disabled{
	text-decoration: line-through;
}

/* Invalid CSS rules */

#editor-pane .css-editor .css-block ul li.error{
	color:red !important;
	text-decoration: line-through;
}

#editor-pane .css-editor .css-block ul li.error span{
	color:red !important;
}

#editor-pane .css-editor .css-block ul span.css-value{
	padding: 0 1px;
	color: #FF1FA4;
	word-wrap: break-word;
}

#editor-pane .css-editor .css-block ul span.css-value .color{
	display: inline-block;
	width: 11px;
	height: 11px;
	vertical-align: baseline;
	border: 1px solid #131415;
	margin-right: 3px;
	margin-bottom: -1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
	background-size: 6px 6px;
	position: relative;
}

#editor-pane .css-editor .css-block ul span.css-value .color i{
	position: absolute;
	width: 100%;
	height: 100%;
}

#editor-pane .css-editor .css-block.system ul span.css-value{
	color: #EC008C;
}

#editor-pane .css-editor .css-block:hover ul{
	/* Solving some weird chrome css glitch that didn't
	   display the checkboxes on hover.. */
	background-color:transparent;
}

#editor-pane .css-editor .css-block ul input[type=checkbox]{
	opacity:0;
	vertical-align: text-bottom;
	width: 20px;
	/*transition:0.2s opacity;*/
	display:inline-block;
}

#editor-pane .css-editor .css-block:hover ul input[type=checkbox]{
	opacity:1;
}

#editor-pane .css-editor .css-block ul i.spacer{
	font-style: normal;
}

#editor-pane .css-editor .css-block ul span.css-property{
	color: #4BCEFF;
	word-wrap: break-word;
}

#editor-pane .css-editor .css-block.system ul span.css-property{
	color: #00AEEF;
}

#editor-pane .css-editor .css-block [contenteditable],
#editor-pane .css-editor .css-block [contenteditable] b{
	background-color: #FFF;
	outline: none;
	color:#2C3134 !important;
}

#editor-pane .css-editor .css-block [contenteditable]:empty:before{
	content: 'x';
	color: transparent;
}

#editor-pane .css-editor .horiz-line{
	position: absolute;
	left:10px;
	right:10px;
	height: 1px;
}

#editor-pane .css-editor .horiz-line.drop{
	background-color:#40A5D4;
}

#editor-pane .css-editor .css-block.is-dragged{
	opacity:0.5;
	pointer-events:none;
}

#style-drag{
	position: absolute;
	top:0;
	left:0;
	max-width:190px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
	border-left:2px solid #2F83AA;
	background-color: #3B4044;
	display: none;
	margin:10px 0 0 10px;
	padding:6px 10px;
	font-size:12px;
	pointer-events:none;
}

/* Component pane */

#component-pane{
	height: 420px;
	position: relative;
	display: flex;
	flex-direction: column;
}

#component-pane .content{
	overflow-y:scroll;
	flex-grow: 1;
}

#component-pane .search{
	position: relative;
    height: 28px;
    margin-bottom: 18px;
}

#component-pane .search input:invalid ~ .search-icon{
	display:block;
}

#component-pane .search .search-icon{
	position: absolute;
	top: 6px;
	right: 16px;
	color: #CCC;
	display: none;
}

#component-pane .search input{
	border: 0;
	display: block;
	position: absolute;
	width: calc( 100% - 20px );
	left: 10px;
	background-color: #383D40;
	font-size: 11px;
	padding: 9px 10px;
	color: #FFF;
}

#component-pane .category-name{
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	display: block;
	margin: 18px 0 12px;
	padding: 0 10px;
}

#component-pane .item{
	margin: 0 10px 4px 10px;
}

#component-pane .item .badge{
	font-size: 11px;
	background-color: #657076;
	width: 13px;
	height: 13px;
	display: inline-block;
	text-align: center;
	line-height: 13px;
	vertical-align: middle;
	border-radius: 2px;
	margin-right: 8px;
}

#component-pane .item .badge .star{
	font-size: 11px;
	line-height: 13px;
	color: #FCB04E;
}

#component-pane .item:hover .badge{
	background-color: #788288;
}

#component-pane .tab-target .menu{
	float: right;
	width: 15px;
	height: 15px;
	position: relative;
	margin-top: 1px;
}

#component-pane .tab-target .menu span,
#component-pane .tab-target .menu span:after,
#component-pane .tab-target .menu span:before{
	content: '';
	position: absolute;
	background-color: #FFF;
	width: 3px;
	height: 2px;
}

#component-pane .tab-target .menu span{
	top: 6px;
	left: 6px;
}

#component-pane .tab-target .menu span:before{
	top:-4px;
}

#component-pane .tab-target .menu span:after{
	bottom:-4px;
}

#component-pane .tab-target .menu span:after{

}

#component-pane .item input{
	width: calc(100% - 20px);
	margin: -1px 0;
	height: 18px;
	vertical-align: middle;
}

#component-pane .item .save{
	right: 9px;
}

#component-pane .tab-target .editing .menu{
	display: none;
}

#component-pane .suggested{
	display: none;
	flex-shrink: 0;
}

#component-pane .suggested hr{
	margin: 5px 10px 12px;
}

#component-pane .suggested .category-name{
	margin-top: 6px;
}

#component-pane .suggested .title{
	border-top: 2px solid #FFF;
	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.08);
}

#component-pane .suggested .title span{
	display: inline-block;
	background-color: #FFF;
	padding: 0 6px;
}

#component-pane .suggested .collapse{
	float: right;
	margin-right: 6px;
	width: 0;
	height: 0;
	border: 5px solid rgba(0, 0, 0, 0);
	border-bottom-color: #FFF;
	margin-top: -3px;
}

#component-pane .suggested .suggested-list{
	margin-bottom: 12px;
}

#component-pane .suggested.collapsed .suggested-list{
	display:none;
}

#component-pane .suggested.collapsed .collapse{
	border-top-color:#fff;
	border-bottom-color:transparent;
	margin-top: 2px;
}

/* Dragging components */

#dragbox{
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
	display: none;
	z-index: 10;
}

#ghost{
	background-color: rgba(77, 138, 208, 1);
	position:absolute;
	top:0;
	left:0;
	border-radius:1px;
	transition:0.15s all;
}

#canvas .sizer{
	position:relative;
	margin:0 auto;
	pointer-events: none;
	padding:50px;
}

#canvas .sizer.animated{
	transition: 0.4s;
}

#canvas .ui-offset{
	position:relative;
}

/* Grid rectangle */

#canvas .ui-offset .grid{

}

#canvas .ui-offset .grid-rect{
	position: absolute;
	border: 1px dotted #F7A3EC;
	z-index: 1;
	box-sizing: content-box;
	pointer-events: none;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.1) inset;
}

/*  Focus rectangle */

#canvas .ui-offset .focus-rect{
	position: absolute;
	border: 1px solid #5699E8;
	box-sizing: content-box;
	display: none;
	z-index: 5;
	box-shadow:1px 1px 0 rgba(255,255,255,0.2), 1px 1px 0 rgba(255,255,255,0.2) inset;
}

#canvas .ui-offset .focus-rect .move-handle{
	position: absolute;
	background-color: #5699E8;
	cursor: move !important;
	pointer-events: all;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	top: -5px;
	left: -5px;
	display: none;
	border: 1px solid #FFF;
}

#canvas .ui-offset .focus-rect.inline-editing{
	border:1px solid transparent;
	outline:1px dashed #898989;
}

#canvas .ui-offset .focus-rect.inline-editing > div{
	display:none !important;
}

/* Inline editing caret */

#canvas .ui-offset .inline-caret{
	width: 1px;
	background-color: rgba(62, 64, 66, 0.8);
	position: absolute;
	box-shadow:1px 0 0 rgba(0,0,0,0.1), -1px 0 0 rgba(255,255,255,0.8);
	-webkit-animation:blink 1s infinite;
	display:none;
}

#canvas .ui-offset .inline-caret.no-blink{
	-webkit-animation:none;
}

@-webkit-keyframes blink {
  0%, 40% { opacity: 0; }
  45%, 100% { opacity: 1; }
}

/* Toggling System UI */

#canvas.hide-sui .grid,
#canvas.hide-sui .focus-rect,
#canvas.hide-sui .dom-highlight,
#canvas.hide-sui .inline-caret{
	display:none !important;
}

/* DOM Highlight */

#canvas .ui-offset .dom-highlight{
	position: absolute;
	pointer-events:none;
	display: none;
}

#canvas .ui-offset .dom-highlight div{
	position: absolute;
	border: 0 solid;
}

#canvas .ui-offset .dom-highlight .main{
	background-color: #4492ED;
	opacity: 0.4;
	z-index: 1;
}

#canvas .ui-offset .dom-highlight .highlight-line{
	border: 1px dotted #5699E8;
	box-shadow:1px 1px 0 rgba(255,255,255,0.2), 1px 1px 0 rgba(255,255,255,0.2) inset;
	z-index: 1;
}

#canvas .ui-offset .dom-highlight .padding{
	border-color:#b8e0b8;
	z-index: 2;
}

#canvas .ui-offset .dom-highlight .margin{
	border-color:#f2d59f;
	z-index: 3;
}

#canvas .ui-offset .dom-highlight .border{
	border-color:#ffffb3;
	z-index: 4;
}

/* Line with decorations */

#canvas .ui-offset .line{
	width:1px;
	height:1px;
	background-color:#4492ED;
	position: absolute;
	box-shadow:0 0 1px #4492ED;
	margin:-1px 0 0 -1px;
	pointer-events:none;
}

#canvas .ui-offset .line:after,
#canvas .ui-offset .line:before{
	position: absolute;
	content: '';
	width:0;
	height:0;
	border:4px solid transparent;
}

#canvas .ui-offset .line.left:before{
	top:50%;
	margin-top:-4px;
	left:-10px;
	border-right-color:#4492ED;
}

#canvas .ui-offset .line.right:after{
	top:50%;
	margin-top:-4px;
	right:-10px;
	border-left-color:#4492ED;
}

#canvas .ui-offset .line.top:before{
	left:50%;
	margin-left:-4px;
	top:-10px;
	border-bottom-color:#4492ED;
}

#canvas .ui-offset .line.bottom:after{
	left:50%;
	margin-left:-4px;
	bottom:-10px;
	border-top-color:#4492ED;
}

#canvas iframe{
	pointer-events:all;
	position: absolute;
	transform-origin:top left;
	top:0;
	left:0;
	display: block;
	border:0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

#canvas iframe.animated{
	transition:0.4s;
}

#canvas{
	position: relative;
	overflow: auto;
	flex-grow: 1;
	background-color: #31373A;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) inset;
	border: 1px solid #434D52;
	border-width: 0 1px 1px;
}

/* Options pane */

#options-pane{
	height: 420px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

/* Breadcrumbs */

#options-pane .breadcrumb-holder{
	padding: 10px 10px 3px;
	border-bottom: 1px solid #242729;
	box-shadow: 0 1px 0 #3B4144;
	overflow-x: hidden;
	flex-shrink: 0;
	margin-bottom: 10px;
}

/* Stats */

#options-pane .info-option{
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 1px solid #242729;
	box-shadow: 0 1px 0 #3B4144;
	padding-bottom: 8px;
	margin: 0 10px 16px;
}

#options-pane .info-option span{
	display: inline-block;
	margin: 0 7px;
}

#options-pane .info-option i{
	font-style: normal;
	color: #949ca0;
	font-size: 10px;
	margin-right: 5px;
	line-height: 12px;
}

#options-pane .info-option b{
	-webkit-user-select: all;
}

/* Group Option */

.option-group{
	border-bottom: 1px solid #242729;
	box-shadow: 0 1px 0 #3B4144;
	padding-bottom: 8px;
	margin: 0 10px 16px;
}

.option-group .content{
	margin-top: 10px;
}

.option-group .option-group-label{
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	display: block;
	margin: 5px 0 0;
	padding-bottom: 5px;
}

.option-group-label .collapse{
	float: right;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-bottom-color: #FFF;
	margin-top: -3px;
	margin-right: 2px;
}

.option-group.collapsed .option-group-label .collapse{
	border-top-color:#fff;
	border-bottom-color:transparent;
	margin-top: 2px;
}

.option-group.collapsed .content{
	display: none;
}

.option-group .option-group-label:empty{
	display: none;
}

.option-group.actions{
	text-align: center;
	margin-bottom: 10px;
}

.option-group.actions button{
	padding: 6px 12px;
	margin: 3px;
}

.option-group.actions button .material-icon{
	font-size: 16px;
}

/* Groups without labels */

.option-group.no-label .content{
	margin-top:0;
}

.option-group.no-label .option-group-label{
	display:none;
}

/* Group with tabs */

/* Todo */

/* Labels */

.option-group label{
	display: block;
	padding: 5px 0;
	line-height: 24px;
}

.option-group label:before,
.option-group label:after{ /* Clearfix hack */
    content: " ";
    display: table;
}

.option-group label:after{
    clear: both;
}

.option-group label.disabled {
	opacity: 0.6;
	pointer-events: none;
}

.option-group label.for-checkbox{
	line-height: 12px;
}

.option-group label > *{
	float:right;
}

.option-group label > span{
	float:none;
	font-size:11px;
	color:#949ca0;
}

.option-group label input[type=text],
.option-group label input[type=number],
.option-group label .tb-locked{
	background-color: #4C5256;
	color: #FFF;
	border: none;
	font-size: 13px;
	padding: 4px 6px;
}

.option-group label select{
	color: #FFF;
	border: none;
	padding: 4px;
	border-right: 10px solid #4C5256;
	font-size: 13px;
	-webkit-appearance: none;
	background: #4C5256 url('/assets/bootstrapstudio/img/triangle.svg') no-repeat right center;
}

.option-group label select option{
	outline:none;
}

.option-group .row-right button{
	font-size: 11px;
	padding: 8px 10px;
}

.option-group label input[type=text],
.option-group label input[type=number],
.option-group label select,
.option-group .row-right button,
.option-group .tb-locked{
	min-width: 120px;
	width: calc( 100% - 120px );
	border-radius: 0;
}

.option-group .spacer{
	height:10px;
}

.option-group .line{
	height: 1px;
	background-color: #4C5256;
	clear: both;
	margin: 10px 0;
}

/* TextBoxLockedContentOption */

.option-group label .tb-locked{
	line-height: 1.25;
	cursor:text;
	min-height: 25px;
}

.option-group label .tb-locked i{
	font-style: normal;
	background-color: #34393E;
	padding: 3px 6px 4px 4px;
	color: #eee;
	margin-right: 4px;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.7;
}

.option-group label .tb-locked i .lock{
	vertical-align: middle;
	font-size: 13px;
	margin-right: 3px;
	position: relative;
	top: -1px;
}

.option-group label .tb-locked b{
	font-weight: normal;
	outline: none;
	min-width: 10px;
}

.option-group label .tb-locked b:empty{
	width: 20px;
	vertical-align: middle;
	display: inline-block;
}

/* TextBox Option */

.option-group .textboxoption{
	position: relative;
}

/* Double TextBox Option */

.option-group .doubletextboxoption .key{
	width: 112px;
	float: left;
	min-width: 0;
}

.option-group .doubletextboxoption .value{
	width: calc( 100% - 150px );
	margin-right: 30px;
}

.option-group .doubletextboxoption .delete{
	opacity: 0.9;
	color: #FFF;
	width: 20px;
	height: 20px;
	text-align: center;
	background-color: #4C5256;
	line-height: 18px;
	border-radius: 50%;
	font-weight: bold;
	position: absolute;
	top: 7px;
	right: 0;
	font-size: 16px;
	line-height: 22px;
}

.option-group .doubletextboxoption .delete:hover{
	opacity: 1;
}

.option-group .doubletextboxoption label{
	position: relative;
}

/* Button Option */

.option-group .row-right button{
	position: relative;
}

/* Select Option */

/* Error Tootlips */

.option-group error-tooltip-icon{
	width: 11px;
	height: 11px;
	position: absolute;
	background-color: #FF2323;
	border-radius: 50%;
	top: 11px;
	right: 6px;
	overflow: hidden;
	display: none;
}

.option-group error-tooltip-icon tooltip{
	opacity: 0;
	transition: 0.4s;
	position: absolute;
	z-index: 1;
	background-color: #D24B4B;
	font-size: 12px;
	padding: 5px 11px;
	width: 160px;
	right: 0;
	line-height: 1.4;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}

.option-group error-tooltip-icon:hover{
	overflow: visible;
}

.option-group error-tooltip-icon:hover tooltip{
	opacity:1;
}

/* The panes */

.pane.tree-holder .content{
	left: 10px;
	right: 0;
	bottom: 10px;
	top: 50px;
	margin-top: 0;
	position: absolute;
}

.pane.tree-holder .content .subtree{
	padding-left: 8px;
	display:none;
}

.pane.tree-holder .content .subtree:empty{
	/* jQuery attempts to animate it even if it is empty,
		which causes the element to jump with 1-2 pixels */
	display:none !important;
}

.pane.tree-holder .content span{
	display: block;
	white-space: nowrap;
}

.pane.tree-holder .content span.dragged{
	opacity:0.5;
}

.pane.tree-holder .content span b{
	color: #FFF;
	font-size: 13px;
	margin: 1px 2px 1px 0;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	line-height: 1;
	padding: 2px 4px;
	vertical-align: middle;
}

.pane.tree-holder .content span b.focused{
    background-color: #2F83AA;
}

.pane.tree-holder .content span b.highlighted{
	box-shadow:0 0 0 1px #40A5D4;
}

.pane.tree-holder .content span i{
	display: inline-block;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: #FFF;
	border-width: 4px 0 4px 6px;
	margin-right: 6px;
	transform-origin: 3px 50%;
	margin-bottom: 1px;
}

.pane.tree-holder .content span > b:first-child{
	/* Compensate for missing arrow */
	margin-left: 12px;
}

.pane.tree-holder .content span i.down{
	transform:rotate(90deg);
}

.pane.tree-holder .content span u{
	font-size: 13px;
	color: #91999E;
	vertical-align: middle;
}

.pane.tree-holder .content span u.star{
	color: #FCB04E;
}

.pane.tree-holder .content line{
	position: absolute;
	height: 1px;
	width: 100%;
	left: 0;
	background-color: #40A5D4;
	pointer-events: none;
}

/* Overview Pane */

#overview-pane{
	flex-grow:1;
	position: relative;
}

/* Breadcrumbs Option */

#options-pane .breadcrumbs-option{
}

#options-pane .breadcrumbs-option a{
	display: inline-block;
	margin-right: 5px;
	font-size: 10px;
	background-color: #41484C;
	padding: 5px 6px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 5px;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#options-pane .breadcrumbs-option a.active{
	background-color: #2F83AA;
}

/* Component List Option */

#options-pane .component-list-option{
}

#options-pane .component-list-option ul{
	list-style: none;
}

#options-pane .component-list-option ul li{
	margin-bottom: 5px;
	position: relative;
	z-index: 1;
}

#options-pane .component-list-option ul.drag-enabled{
	cursor:row-resize;
}

#options-pane .component-list-option ul li.dragged{
	pointer-events:none;
	z-index: 2;
}

#options-pane .component-list-option ul li.highlighted{
	background-color: #2F83AA;
}

#options-pane .component-list-option ul li.animated{
	transition:100ms all;
}

#options-pane .component-list-option .handle{
	cursor: row-resize;
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 12px;
	margin-left: -1px;
	position: relative;
	margin-right: 2px;
	position: relative;
    z-index: 1;
}

#options-pane .component-list-option .handle:before,
#options-pane .component-list-option .handle:after{
	content: '';
	position: absolute;
	height: 2px;
	width:6px;
	left:0;
	top:1px;
	border-top:1px solid #232323;
	border-bottom:1px solid #232323;
}

#options-pane .component-list-option .handle:after{
	top:7px;
}

#options-pane .component-list-option .form-holder{
	margin-top: 10px;
	display: none;
}

#options-pane .component-list-option .form-holder > a{
	opacity:0.9;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	margin-left: 10px;
}

#options-pane .component-list-option .form-holder > a:hover{
	opacity:1;
}

#options-pane .component-list-option .form-holder ~ .add-button{
	display: none;
}

#options-pane .component-list-option .form-holder:empty ~ .add-button{
	display: inline-block;
}

#options-pane .component-list-option .button{
	padding: 6px 10px;
	font-size: 11px;
	margin-top: 5px;
}

/* Component Drop List Option */

#options-pane .component-drop-list-option{
	background-color:#fff;
	padding:10px;
}

#options-pane .component-drop-list-option li.line{
	height:1px;
	background-color: #009EFF;
	margin-top:-1px;
	opacity: 0;
	pointer-events:none;
	transition:0.1s opacity;
}

#options-pane .component-drop-list-option li.line.visible{
	opacity:1;
}

#options-pane .component-drop-list-option li.dragged{
	display:none;
}

#options-pane .component-drop-list-option li span{
	display: inline-block;
	white-space: nowrap;
	text-overflow:ellipsis;
	cursor:move;
}

#options-pane .component-drop-list-option.hovering li span{
	cursor:default;
}

#options-pane .component-drop-list-option .delete{
	float:right;
	color:red;
}

#options-pane .component-drop-list-option .edit{
	float:right;
	color:green;
}

/* Icon Preview Option */

#options-pane .icon-preview-option{
    background-color: #24282B;
    padding: 10px;
    text-align: center;
}

#options-pane .icon-preview-option .icon i{
	font-style: normal;
	font-size:60px;
	display: block;
	margin-bottom: 10px;
}

#options-pane .icon-preview-option .icon .title{
	display: block;
	font-size: 12px;
	color: #7D848A;
}

/* The suggestion tooltip */

.suggestion-tooltip{
	position: absolute;
	background-color:#191C1E;
	box-shadow:0 1px 1px rgba(0,0,0,0.3);
	z-index: 100;
	min-width:80px;
	font-size:12px;
	margin-left:-10px;
	line-height: 1;
}

.suggestion-tooltip div{
	padding:6px 10px;
}

.suggestion-tooltip div span{
	font-weight:bold;
}

.suggestion-tooltip div.selected{
	background-color:#4A768A;
}

/* Design pane */

#design-pane{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	position: relative;
}

#design-pane .content{
    left: 20px;
	right: 0;
	bottom: 10px;
	top: 50px;
	margin-top: 0;
	position: absolute;
}

#design-pane .content .asset-item.smart-editable {
	height: 18px;
	line-height: 1;
}

#design-pane .content .asset-item.locked{
	pointer-events:none;
}

#design-pane .content .asset-item b{
	font-weight: normal;
	color: #e2e2e2;
	margin-left: 5px;
	max-width: 95%;
}

#design-pane .content .asset-item b u{
	display: inline-block;
	vertical-align: top;
	width: 10px;
	height: 12px;
	color:inherit;
	border: 1px solid currentcolor;
	border-top-right-radius: 5px;
	margin-right: 6px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

#design-pane .content .asset-item b[data-category=Images] u:before{
	/* Sun */
	content: '';
	width: 3px;
	height: 3px;
	position: absolute;
	background-color: currentcolor;
	top: 3px;
	left: 2px;
	border-radius: 50%;
}

#design-pane .content .asset-item b[data-category=Images] u:after{
	/* Mountain */
	content: '';
	width: 10px;
	height: 10px;
	background-color: currentcolor;
	position: absolute;
	top: 8px;
	transform: rotate(45deg);
	left: 0px;
	border-radius: 2px;
}

#design-pane .content .asset-item b[data-category=Fonts] u:after{
	content: 'a';
	font-size:10px;
	text-align: center;
	display: block;
	width:100%;
	left:0;
	height:100%;
	line-height:10px;
}

#design-pane .content .asset-item b[data-category=Styles] u:after,
#design-pane .content .asset-item b[data-category=JavaScript] u:after{
	content: '';
	display: block;
	left: 2px;
	height: 1px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	top: 4px;
	position: absolute;
	width: 4px;
}

#design-pane .content .asset-item b:hover{
	color: #fff;
}

#design-pane .content .asset-item b:hover u{
	color: #fff;
}

#design-pane .content .asset-item input{
	margin-left: 9px;
	height: 17px;
	font-size: 13px;
	text-indent: 9px;
}

#design-pane .content .asset-category{
	margin: 3px 0;
}

/* Image Asset Tooltip */

#image-asset-tooltip{
	width: 240px;
	height: 190px;
	background-color: #222729;
	position: fixed;
	box-shadow: 0 3px 5px rgba(0,0,0,0.1);
	display: none;
	border-radius: 2px;
	margin-top:-95px;
	margin-left:-248px;
	z-index: 10;
}

#image-asset-tooltip.bottom{
	margin-top: auto;
	top: auto !important;
	bottom: 10px;
}

#image-asset-tooltip:after{
	content: '';
	position: absolute;
	right: -14px;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: #1d1d1d;
}

#image-asset-tooltip.bottom:after{
	display: none;
}

#image-asset-tooltip .preview{
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center;
	background-color: #1d1d1d;
	margin: 4px;
	height: 160px;
	position: relative;
	z-index: 1;
}

#image-asset-tooltip .dimensions{
	text-align: center;
	color:#999;
	font-size:12px;
	padding-top:2px;
}

/* Color Picker */

#color-picker{
	background-color: #1F2325;
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	position: fixed;
	top: 400px;
	width: 300px;
	height: 365px;
	left: 300px;
	z-index: 5;
	padding: 10px;
	border: 1px solid rgba(255,255,255,0.1);
	display: none;
}

#color-picker-overlay{
	position: fixed;
	top: 0;
	left:0;
	width:100%;
	height:100%;
	z-index: 4;
	display: none;
}

#color-picker .tabs{
	padding: 0;
	border-bottom: none;
	margin-top: 0;
}

#color-picker .tabs .tab {
    padding: 5px 8px;
}

#color-picker .swatch{
	overflow:auto;
}

#color-picker .swatch .color{
	display: inline-block;
	margin: 0 1px 1px 0;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) 6px;
	border: 1px solid #333;
	vertical-align: middle;
	transition:border-color 0.2s;
}

#color-picker .swatch .color.selected,
#color-picker .swatch .color:hover{
	border-color:#fff;
}

#color-picker .swatch .color i{
	display: block;
	width: 30px;
	height: 30px;
}

#color-picker .content .tab-target{
	height: 225px;
}

#color-picker .gradient{
	height:180px;
	position: relative;
	margin-bottom: 10px;
}

#color-picker .gradient .selection{
	position: absolute;
	width:8px;
	height:8px;
	margin:-4px 0 0 -4px;
	border:1px solid #fff;
	outline: 1px solid #333;
	box-shadow: 0 0 2px rgba(0,0,0,0.3);
	z-index: 2;
	pointer-events:none;
}

#color-picker .gradient .bg1, 
#color-picker .gradient .bg2{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
}

#color-picker .gradient .bg1{
	background: linear-gradient(to right, #FFF 0%,rgba(255,255,255,0) 100%);
	z-index:0;
}

#color-picker .gradient .bg2{
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,#000 100%);
	z-index:1;
}

#color-picker .preview{
	display: inline-block;
	vertical-align: middle;
	width: 85px;
}

#color-picker .preview span{
	border-radius: 50%;
	width: 26px;
	height: 26px;
	display: inline-block;
	margin-right: -10px;
	vertical-align: middle;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

#color-picker .preview .picker{
	vertical-align: middle;
	margin-right: 6px;
	color:#ddd;
}

#color-picker .preview .picker:hover{
	color:#eee;
}

#color-picker .preview .picker:active{
	color:#67A8F1;
}

#color-picker .sliders{
	display: inline-block;
	width: 188px;
	text-align: right;
	vertical-align: middle;
}

#color-picker .sliders input{
	width: 100%;
	-webkit-appearance: none;
	margin-bottom:4px;
}

#color-picker .sliders input::-webkit-slider-thumb{
	-webkit-appearance: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	margin-top: -6px;
	background: #fff;
	vertical-align: middle;
	border: 5px solid #36B8F9;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	transition:0.2s;
}

#color-picker .sliders input::-webkit-slider-thumb:active{
	-webkit-appearance: none;
	border-width: 3px;
}

#color-picker .sliders input::-webkit-slider-runnable-track{
	height: 6px;
}

#color-picker .sliders .hue{

}

#color-picker .sliders .hue::-webkit-slider-runnable-track{
	background: linear-gradient(to right, #F00 0%,#FF0 17%,#0F0 33%,#0FF 50%,#00F 66%,#F0F 83%,#F00 100%);
	height: 6px;
}

#color-picker .sliders .alpha{

}

#color-picker .sliders .alpha::-webkit-slider-runnable-track{
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) 6px;
}

#color-picker .color-value{
	margin-top: 12px;
}

#color-picker .color-value .format{
	height: 28px;
	width: 80px;
}

#color-picker .color-value .value{
	height: 28px;
	width: 160px;
}

#color-picker .color-value .favorite{
	color: #758288;
	font-size: 22px;
	vertical-align: middle;
	margin-left: 5px;
	opacity: 0.9;
}

#color-picker .color-value .favorite.active{
	color: #F90E81;
}

#color-picker .color-value .favorite:hover{
	opacity: 1;
}

#color-picker .buttons{
	margin-top: 16px;
}

#color-picker .buttons a{
	font-size: 12px;
	padding: 8px 12px;
}

#color-picker .buttons .primary{

}

/* Inline editing mode */

#focus-target{
	position: absolute;
	top: -1000px;
	left: -1000px;
	opacity: 0;
}

/* Bars */

#toolbars{
	flex-shrink: 0;
	position: relative;
}

.bar{
	display: none;
}

/* Bar buttons */

.bar .button{
	font-size: 11px;
	padding: 3px 5px;
	margin-top: 5px;
	height: 21px;
	vertical-align: middle;
	line-height: 15px;
}

.bar .button i{
	font-size:14px;
}

.bar .button.active{
	background: linear-gradient(#ABB2B3, #70797D);
}

/* Sub bars */

.subbar{
	background-color: #3E464A;
	text-align: center;
	height: 34px;
	border-top: 1px solid #373E42;
	border-bottom: 1px solid #272E31;
	background: linear-gradient(#3E464A, #343C40);
	position: absolute;
	width: 100%;
	z-index: 9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#inline-editing-bar .button.save,
#inline-editing-bar .button.discard{
	padding:3px 10px;
}

#inline-editing-bar .button.character-input{
	padding: 3px 10px;
	float: right;
	margin-right: 11px;
	margin-left: -85px;
}

#column-operations-bar .widen i:first-child,
#column-operations-bar .narrow i:first-child{
	margin-right: -4px;
}

#column-operations-bar span{
	padding: 4px;
}

#column-operations-bar span i{
	font-weight: bold;
}

/* Tabs */

.tab-scroll{
	position: relative;
	overflow: hidden;
	height: 25px;
}

.tab-holder{
	overflow: visible;
	transition:transform 0.2s;
	white-space: nowrap;
	position: absolute;
}

.tab-holder .tab{
	position: relative;
	transition: transform 0.2s, z-index 0.4s;
	white-space: nowrap;
	max-width: 240px;
	z-index:1;
}

.tab-holder .tab.no-animation{
	transition: none;
}

.tab-holder .tab .title{
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
}

.tab-holder .tab .close:before,
.tab-holder .tab .close:after{
	content: '';
	width: 2px;
	height: 7px;
	background-color: #fff;
	position: absolute;
	transform: rotate(45deg);
	top: 3px;
	left: 6px;
}

.tab-holder .tab .close:after{
	transform: rotate(-45deg);
}

.tab-holder .tab.active .close{
	background-color: #383F43;
}

.tab-holder .tab .close:hover{
	background-color: #C83B3D;
	color: #FFF;
}

.tab-holder .tab.dragged{
	z-index: 100;
	transition:none;
	pointer-events:none;
}

/* The tab bar */

#tab-bar{
	background-color: #353C3F;
	position: relative;
}

#tab-bar .tab-scroll{
	height: 28px;
}

#tab-bar .tab-holder .tab{
	padding: 8px 26px 8px 12px;
	background-color:#353C3F;
	font-size: 12px;
	display: inline-block;
}

#tab-bar .tab-holder .tab.active{
	background-color: #525E64;
}

#tab-bar .tab.unsaved .title:after{
	content:' *';
}

#tab-bar .tab .close{
	/*background-color: #282E31;*/
	border-radius: 50%;
	width: 14px;
	height: 13px;
	position: absolute;
	top: 8px;
	right: 7px;
}

/* The tool bar */

#tool-bar{
	background-color: #525E64;
	height: 34px;
	padding: 0 10px;
}

#tool-bar .info{
	line-height: 10px;
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	margin-top: 6px;
	margin-left: 6px;
}

#tool-bar .page-selection{
	float: right;
	padding: 10px 15px;
	height: 34px;
	font-size: 13px;
	margin-right: 5px;
	position: relative;
}

#tool-bar .page-selection:after{
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: #FFF;
	border-width: 4px 3px;
	right: 3px;
	top: 15px;
	position: absolute;
}

#tool-bar .page-selection .page-list{
	/*display: none;*/
	position: absolute;
	background-color:#fff;
}

#tool-bar .page-selection .page-list span{

}

#tool-bar .page-selection .page-list span.active{

}

#tool-bar .devices{
	float:right;
}

#tool-bar span i{
	color:#9BA7AD;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	border-radius: 4px;
	margin-top:4px;
	position: relative;
}

#tool-bar .devices span{
	color: #FFF;
	font-size: 12px;
	padding: 8px 5px 1px 5px;
	height: 34px;
	position: relative;
	float: right;
}

#tool-bar .devices span:hover{
	background-color: rgba(255, 255, 255, 0.06);
}

#tool-bar .devices span:active{
	background-color: rgba(255, 255, 255, 0.04);
	bottom:-1px;
}

#tool-bar .devices span.active{
	background-color:#3D4A50 !important;
	bottom:0 !important;
}

#tool-bar .devices span i{
	color: #FFF;
	vertical-align: middle;
	margin-top: -3px;
}

#tool-bar > span.active i{
	color:#fff;
}

#tool-bar > span.active i:hover{
	background-color: #3D4A50;
}

#tool-bar > span.active i:active{
	bottom:-1px;
}

#tool-bar .toggle-grid i{
	display:none;
}

#tool-bar .toggle-grid.on i:first-child,
#tool-bar .toggle-grid:not(.on) i:last-child{
	display:inline-block;
}

/* Dialogs */

#dialogs{
	color: #3B4043;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events:none;
}

#dialogs .dialog{
	display: none;
	position: relative;
	z-index: 10;
	background-color: #FFF;
	padding: 35px;
	border-radius: 4px;
	pointer-events:all;
}

#dialogs .dialog.no-background{
	border: 1px solid #ddd;
	box-shadow: 0 0 30px rgba(0,0,0,0.3);
}

#dialogs .dialog-background{
	display: none;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.4);
	pointer-events:all;
}

#dialogs h5{
	font-size:16px;
	margin-bottom: 30px;
}

#dialogs .content{
	margin-bottom: 30px;
}

#dialogs .buttons {
}

#dialogs .button{
	display: inline-block;
	background-color: #FFF;
	border-radius: 1px;
	box-shadow: 1px 1px 1px #EEE;
	padding: 10px 13px;
	line-height: 1;
	border: 1px solid #CCC;
	font-size: 12px;
	margin-right: 4px;
}

#dialogs .button:hover{
	background-color: #f5f5f5;
}

#dialogs .button:active{
	box-shadow: none;
	position: relative;
	bottom:-1px;
}

#dialogs .button.disable{
    pointer-events: none;
    -webkit-filter: grayscale(0.8) brightness(1.2);
}

#dialogs .button.primary{
	color:#fff;
	background:#68acce linear-gradient(#68acce,#59a4c9);
	border-color: #59A4C9;
}

#dialogs .button.primary:hover{
	opacity:0.9;
}

#dialogs .button.aside{
	float:right;
	margin-right: 0;
}

#dialogs input[type=text],
#dialogs input[type=url],
#dialogs input[type=search],
#dialogs textarea{
	padding: 8px;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 1px #EEE;
	color: inherit;
	width: 400px;
}

#dialogs input[type=text]:focus,
#dialogs input[type=url]:focus,
#dialogs input[type=search]:focus,
#dialogs textarea:focus{
	border-color:#aaa;
}

#dialogs input[type="search"]::-webkit-search-cancel-button:after {
    color: #383B3C;
    top: 6px;
}

#dialogs select{
	min-width: 160px;
	padding: 7px 6px;
	background-color: #FFF;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 1px #EEE;
	color:inherit;
}

#dialogs label{
	display: block;
	margin-bottom: 16px;
}

#dialogs label > span,
#dialogs .title{
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	text-transform: uppercase;
}

#dialogs label.checkbox{
	display: inline-block;
}

#dialogs label.checkbox > span{
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
}

#dialogs label.checkbox > input{
	vertical-align: middle;
}

#dialogs .content p{
	font-size: 13px;
}

#dialogs ::-webkit-scrollbar {
	height: 6px;
	width: 6px;
	background: rgba(0,0,0,0.1);
}

#dialogs ::-webkit-scrollbar-thumb {
	background: #bbb;
}

#dialogs ::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* New design dialog */

#dialogs #new-design-dialog .templates li{
	display: inline-block;
	border: 2px solid transparent;
	padding: 4px 4px 7px;
}

#dialogs #new-design-dialog .templates li.active {
    border-color: #68ACCE;
}

#dialogs #new-design-dialog .templates li .img{
	width: 90px;
	height: 70px;
	background-color: #EAEAEA;
	display: block;
	margin-bottom: 8px;
	box-shadow: 0 0 1px 1px #ddd;
}

#dialogs #new-design-dialog .templates li p{
	text-align: center;
}

/* Font Import dialog */

#dialogs #font-import-dialog .content p{
	margin: 12px 0 0;
}

/* The icons dialog */

#dialogs #icons-dialog .icon-holder{
	overflow: auto;
	height: 340px;
	width: 660px;
	margin: 25px 0;
}

#dialogs #icons-dialog .icon-holder .icon{
	display: inline-block;
	margin: 0 0 10px 0px;
	vertical-align: top;
	padding: 15px 4px 10px;
}

#dialogs #icons-dialog .icon-holder .icon:hover{
	background-color:#EFF7F9;
}

#dialogs #icons-dialog .icon-holder .icon.selected{
	background-color:#CAEBF2;
}

#dialogs #icons-dialog .icon-holder .icon i{
	font-size: 25px;
	display: block;
	margin: 0 auto 10px;
	width: 30px;
	text-align: center;
}

#dialogs #icons-dialog .icon-holder .icon span{
	font-size: 12px;
	width: 100px;
	display: block;
	text-align: center;
	opacity: 0.8;
}

#dialogs #icons-dialog input[type=search]{
	width: 495px;
}

/* The images dialog */

#dialogs #images-dialog input[type=search]{
	width: 660px;
}

#dialogs #images-dialog .image-holder{
	overflow: auto;
	height: 340px;
	width: 660px;
	margin: 25px 0;
}

#dialogs #images-dialog .image-holder .image{
	display: inline-block;
	margin: 0 0 10px 0px;
	vertical-align: top;
	padding: 8px 8px 10px;
	width: 160px;
	text-align: center;
}

#dialogs #images-dialog .image-holder .image i{
	width: 120px;
	height: 100px;
	background-size: cover;
	display: inline-block;
	background-repeat: no-repeat;
	border: 3px solid #EEE;
	border-radius: 2px;
}

#dialogs #images-dialog .image-holder .image.selected i{
	border-color: #B4D8E0;
}

#dialogs #images-dialog .image-holder .image:hover{
	background-color:#EFF7F9;
}

#dialogs #images-dialog .image-holder .image.selected{
	background-color:#CAEBF2;
}

#dialogs #images-dialog .image-holder .image span{
	font-size: 12px;
	display: block;
	text-align: center;
	opacity: 0.8;
	word-wrap: break-word;
	line-height: 1.4;
	margin-top: 4px;
	padding: 0 15px;
}

/* Confirm dialog */

#dialogs #confirm-dialog h5{
	margin-bottom:24px;
}

#dialogs #confirm-dialog .content{
	line-height:1.5;
	margin-bottom:24px;
}

#dialogs #confirm-dialog{
    width: 420px;
}

/* Alert message dialog */

#dialogs #alert-dialog h5{
	margin-bottom: 24px;
}

#dialogs #alert-dialog{
	width: 400px;
}

#dialogs #alert-dialog .message{
	line-height: 1.5;
	font-size: 15px;
	margin-bottom: 24px;
}

/* What's new dialog */

#dialogs #whats-new-dialog{
	text-align: center;
	width: 500px;
}

#dialogs #whats-new-dialog h5{
	margin-bottom: 16px;
	font-size: 20px;
}

#dialogs #whats-new-dialog h6{
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 40px;
}

#dialogs #whats-new-dialog img{
	width: 196px;
	margin: 20px auto 42px;
	display: block;
}

#dialogs #whats-new-dialog ul{
	text-align: left;
	margin: 0 auto 40px;
	width: 350px;
	max-height: 25vh;
	overflow: auto;
}

#dialogs #whats-new-dialog li{
	border-left: 3px solid #9DCEE4;
	padding-left: 10px;
	list-style: none;
	line-height: 1.4;
	font-size: 14px;
	margin-bottom: 7px;
	color: #131617;
}

#dialogs #whats-new-dialog li a{
	color: #0B86BD;
}

#dialogs #whats-new-dialog li a:hover{
	text-decoration: underline;
}

#dialogs #whats-new-dialog .arrow{
	font-size: 19px;
	color: #fff;
	position: absolute;
	border: 2px solid #fff;
	width: 40px;
	line-height: 40px;
	height: 40px;
	border-radius: 50%;
	top: 50%;
	margin-top: -20px;
	left: -90px;
	opacity: 0.8;
	display: none;
}

#dialogs #whats-new-dialog .arrow.next{
	left:auto;
	right:-90px;
}

#dialogs #whats-new-dialog .arrow:hover{
	opacity: 1;
}

/* About dialog */

#dialogs #about-dialog{
	text-align: center;
	width: 500px;
}

#dialogs #about-dialog h5{
	margin-bottom: 32px;
	font-size: 20px;
}

#dialogs #about-dialog img{
	margin: 20px auto 50px;
	display: block;
}

#dialogs #about-dialog .message{
	line-height: 1.5;
	font-size: 14px;
	margin-bottom: 30px;
}

#dialogs #about-dialog .message p span{
	font-weight: bold;
}

/* Character Input dialog */

#dialogs #character-input-dialog .characters{
	width: 490px;
	max-height: 95px;
	overflow: auto;
	padding: 10px 0 4px 10px;
	margin-bottom: 20px;
	background-color: #f0f0f0;
}

#dialogs #character-input-dialog .characters span{
	width: 36px;
	height: 34px;
	display: inline-block;
	background-color: #fff;
	font-size: 20px;
	text-align: center;
	line-height: 35px;
	border-radius: 3px;
	margin: 0 2px 5px 0;
}

#dialogs #character-input-dialog .characters span:hover{
	background-color: #DAEEF9;
}

#dialogs #character-input-dialog textarea{
	margin: 0 0 20px;
	width: 400px;
	min-height: 95px;
	resize: vertical;
	max-height: 180px;
	color: inherit;
	display: inline-block;
}

#dialogs #character-input-dialog .text-input .buttons{
	display: inline-block;
	vertical-align: top;
	width: 80px;
	margin-left: 6px;
}

#dialogs #character-input-dialog .text-input .buttons .button{
	display: block;
	margin-right:0;
}

#dialogs #character-input-dialog .text-input .buttons .primary{
	margin-bottom: 6px;
}

#dialogs #character-input-dialog  > .buttons{
	display: inline-block;
}

/* Purchase dialog */

#dialogs #purchase-dialog{
	width: 520px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

#dialogs #purchase-dialog .message {
	text-align: left;
	font-size: 14px;
	margin-bottom: 24px;
}

#dialogs #purchase-dialog h5 {
	font-size: 20px;
	margin-top: 18px;
}

#dialogs #purchase-dialog .buttons{
	text-align: left;
}

/* Preview dialog */

#dialogs #preview-dialog{
	width:520px;
}

#dialogs #preview-dialog .content p{
	font-size:13px;
	line-height: 1.5;
}

#dialogs #preview-dialog input[type=text]{
	width: 280px;
}

#dialogs #preview-dialog .ip-address-list{
	margin-top:16px;
}

#dialogs #preview-dialog .ip-address-list .ip{
	margin-top: 7px;
}

#dialogs #preview-dialog label.checkbox{
	margin-top: 16px;
	margin-bottom: 0;
}

/* Theme Manager Dialog */

#dialogs #theme-manager-dialog .content{
	max-height: 350px;
	overflow: auto;
	padding-right: 10px;
	width: 400px;
	min-height: 100px;
}

#dialogs #theme-manager-dialog .content .message{
	font-size: 13px;
	line-height: 1.5;
}

#dialogs #theme-manager-dialog .listing input[type=text]{
	width: 100%;
	height: 22px;
	margin-top: -3px;
	margin-bottom: -3px;
}

#dialogs #theme-manager-dialog .listing .save{
	right: 14px;
	color: #FFF;
}

#dialogs #theme-manager-dialog .listing .theme-item{
	margin-bottom: 5px;
	padding: 8px 10px;
}

/* Theme Chooser Dialog */

#dialogs #theme-chooser-dialog select{
	width:400px;
}

/* Component To Package dialog */

#dialogs #component-to-package-dialog{
}

#component-to-package-dialog .image-list,
#component-to-package-dialog .font-list{
	margin-bottom: 15px;
}

#component-to-package-dialog.has-images .image-list,
#component-to-package-dialog.has-fonts .font-list,
#component-to-package-dialog.has-css .right-col{
	display:block;
}

#component-to-package-dialog.has-images .no-images-message,
#component-to-package-dialog.has-fonts .no-fonts-message,
#component-to-package-dialog.has-css .no-css{
	display:none;
}

#component-to-package-dialog .image-list .white-item{
	overflow: hidden;
	text-overflow: ellipsis;	
}

#component-to-package-dialog .message{
	font-size: 12px;
	background-color: #FFF;
	padding: 15px;
	text-align: center;
	margin-bottom: 16px;
	box-shadow: 0 0 25px #EEE inset;
}

#component-to-package-dialog .content{
	overflow-y: auto;
}

#component-to-package-dialog .content input[type=text]{
	width: 100%;
	margin-bottom:24px;
}

#component-to-package-dialog .content p{
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 10px;
}

#component-to-package-dialog .left-col{
	width: 320px;
	float: left;
	min-height: 200px;
	max-height: 400px;
	overflow-y: auto;
	padding-right: 15px;
}

#component-to-package-dialog .right-col{
	display: none;
	width: 350px;
	float: right;
	margin-left: 35px;
	min-height: 200px;
	max-height: 400px;
	overflow-y: auto;
	padding-right: 15px;
}

#component-to-package-dialog .css-list{
	min-height: 200px;
	max-height: 300px;
	overflow-y: auto;
}

#component-to-package-dialog .css-list .item{
	color: #999;
	font-size: 12px;
	font-family: 'Source Code Pro', monospace;
	margin-bottom: 12px;
	padding: 11px;
	display: block;
	box-shadow: 0 0 75px #F4F4F4 inset;
	line-height: 1.5;
	word-break: break-word;
}

#component-to-package-dialog .css-list .item .left{
	display: table-cell;
}

#component-to-package-dialog .css-list .item .right{
	display: table-cell;
	padding-left: 10px;
}

#component-to-package-dialog .css-list .item input[type=checkbox]{
	position:relative;
	bottom:-2px;
}

#component-to-package-dialog .css-list .item .media{
	padding-left: 15px;
}

#component-to-package-dialog .css-list .item .media .open-query{
	margin-left:-15px;
}

#component-to-package-dialog .css-list .item.checked .open-query span{
	color: #3686A9;
}

#component-to-package-dialog .css-list .item .media .close-query{
	margin-left:-15px;
}

#component-to-package-dialog .css-list .item.checked .open-block > span{
	color: #264AD5;
}

#component-to-package-dialog .css-list .item .line{
	padding-left: 20px;
}

#component-to-package-dialog .css-list .item.checked .line .property{
	color: #1BA61D;
}

#component-to-package-dialog .css-list .item.checked .line .value{
	color: #BA602A;
}

#component-to-package-dialog .image-list .item,
#component-to-package-dialog .font-list .item{
	display: block;
	padding: 10px 12px;
	margin-bottom: 8px;
}

#component-to-package-dialog .image-list .item.checked,
#component-to-package-dialog .font-list .item.checked{
	color: #444D56;
}

#component-to-package-dialog .image-list input,
#component-to-package-dialog .font-list input{
	display:inline-block;
	vertical-align: middle;
	margin-right:6px;
}

/* Context menu */

#context-menu{
	display: none;
	z-index: 10;
	position: fixed;
	width:100%;
	height:100%;
	top: 0;
	left: 0;
	pointer-events:none;
}

#context-menu .menu{
	pointer-events:all;
	position: absolute;
	padding:2px 0;
	background-color:#fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	z-index: 100;
	min-width:80px;
	font-size:12px;
	line-height: 1;
	color: #3A4144;
    max-height: 355px;
	overflow: auto;
}

#context-menu .menu a{
	padding: 7px 16px;
	display: block;
	font-size: 13px;
	white-space: nowrap;
	position: relative;
}

#context-menu .menu a.has-options{
	padding-right: 25px;
}

#context-menu .menu a.has-options:before{
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: currentcolor;
	border-width: 4px 0 4px 6px;
	position: absolute;
	top: 10px;
	right: 9px;
}

#context-menu .menu a:hover{
	background-color:#f0f0f0;
}

#context-menu .menu a.heading{
	pointer-events: none;
	font-weight: bold;
	border-bottom: 1px solid #EEE;
	text-transform: uppercase;
	font-size: 10px;
}

#context-menu .menu a.disabled{
	pointer-events: none;
	color:#999;
}

/* Misc */

#freeze-ui{
	
	/* Input block */

display:none;
	position: fixed;
	z-index:1000;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.cloak{
	
	/*  This element prevents makes resizing the panes possible
		by preventing the iframe and other elements from capturing the movement
	*/

position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index: 1000;
	display: none;
}

Pop out

Help About ×