/* LICENSE: © Jan Dittrich & Contributors, 2015, MIT License (See LICENSE.md) */

		body{
			overflow: hidden;
		}

		.newMockElement{
			width: 10em;
		}

		.mockElement input.plaintextinput{ /*otherwise the input fields can be rather small*/
				min-width:5em;
				box-sizing: border-box;
			}

			#appContainer{
			margin: 0px;
			padding: 0px;
			display: flex;
			height: 100vh;
			width: 100vw;
			}

			#canvasWrap { /*wraps... canvas! (to enable scrolling it)*/
			overflow: scroll;
			margin: 0px;
			padding: 0px;
			flex: 1 1 100%;
			position: relative;/*so that canvas is positioned against it*/
			}

			#canvas{/*holds the mockup elements*/
				position: absolute;
				margin:0;
				padding:0;
				width: 1000px;
				height:2000px;

				border-left: 1px solid gray; /*give same color as canvas wrapper background*/
				border-top: 1px solid gray;
			}

			#widgetCollectionWrap{
				display: block;/*not displayed in the html-files style*/
				width:200px;
				height: 100%;
			}
			#widgetCollection{
				position:relative;
				height:100%;
				width: 100%;
				padding:0;
				margin:0;
				overflow-y: scroll;
				overflow-x: hidden;
			}

			#widgetCollection>li{
				list-style-type: none;
				padding: 1em;
				border-bottom:1px solid silver;
				overflow: hidden;
				width: 100%;
			}

			#widgetCollection>li:hover{
				margin-left: -3px;

			}

			#widgetCollection>li>.newMockElement:hover{
				outline:2px solid rgba(148, 216, 24,0.5);
			}




			#toolbar{
				padding: 0em;
				margin-top: 0px;
				margin-right: 20px;
				right: 0px;
				top: 0px;
				position: fixed;
				display: flex;
			}

			#toolbar button{
				z-index: 9999;
				padding: 0.2em;
				box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.1) inset;
				background: rgb(250, 250, 250) none repeat scroll 0% 0%;
				height: 2em;
				border: 1px solid rgb(169, 169, 169);
				border-radius: 1px;
				margin-top: 3px;
				margin-right: 0.2em;
			}

			#toolbar button:hover{
				box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05) inset;
				background:#EEE;

			}

			.custom-selected{

			}

			#canvas .ui-resizable>.ui-resizable-handle{
				pointer-events: none;
				background: rgba(0,0,0,0.0);
			}

			#canvas .custom-selected.ui-resizable>.ui-resizable-handle{
				pointer-events: auto;
				background: rgba(0,0,0,0.5);
			}


			.dialog{display: none;} /*hide dialog markup*/

			.mockElement textarea{
				height:8em;
			}



			/*JQUERY UI Modifacations, makes handles inkscape-style*/
			#canvas .ui-selected { background: #F39814; color: white; }


			#canvas .ui-resizable-handle{width:8px !important; height: 8px !important;} /*all handles*/

			#canvas  .ui-resizable-n{left: calc(50% - 4px); top:-5px}
			#canvas  .ui-resizable-e{right:-5px; top:calc(50% - 4px)}
			#canvas  .ui-resizable-s{left:calc(50% - 4px); bottom:-5px}
			#canvas .ui-resizable-w{left:-5px; top:calc(50% - 4px)}
			#canvas .ui-resizable-ne{right:-5px;top:-5px}
			#canvas .ui-resizable-se{right:-5px;bottom: -5px;}
			#canvas .ui-resizable-sw{left:-5px; bottom:-5px;}
			#canvas .ui-resizable-nw{left:-5px; top:-5px;}

			.drop-hover{
				outline:2px solid rgba(0,0,0,0.3);
			}