/* 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:250px;
				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);
			}

			

/* Horizontal Flip */
.flip-horizontal {
    transform: scaleX(-1);
}

/* Vertical Flip */
.flip-vertical {
    transform: scaleY(-1);
}

/* Horizontal & Vertical Flip together */
.flip-horizontal.flip-vertical {
    transform: scale(-1, -1);
}

.radius-control,
.sides-tool {
    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: 20px;
    border: 1px solid rgb(169, 169, 169);
    border-radius: 1px;
    margin-top: 3px;
    margin-right: 0.1em;
}

/* حماية القوائم وشريط الأدوات عشان دايماً يكونوا فوق عناصر الـ Canvas */
#toolbar, 
#widgetCollectionWrap, 
.dropdown-content,
.dropdown-tool {
    z-index: 999999 !important; 
}


.flip-horizontal:not(.boxes-iconbar-horizontal) .editableArea,
.flip-horizontal:not(.boxes-iconbar-horizontal) .desc {
    transform: scaleX(-1) !important;
    display: inline-block;
    -webkit-transform: scaleX(-1) !important;
    -moz-transform: scaleX(-1) !important;
    -ms-transform: scaleX(-1) !important;
    -o-transform: scaleX(-1) !important;
}

/* لما العنصر يتعكس رأسياً */
.flip-vertical:not(.boxes-iconbar-horizontal) .editableArea,
.flip-vertical:not(.boxes-iconbar-horizontal) .desc {
    transform: scaleY(-1) !important;
    display: inline-block;
    -webkit-transform: scaleY(-1) !important;
    -moz-transform: scaleY(-1) !important;
    -ms-transform: scaleY(-1) !important;
    -o-transform: scaleY(-1) !important;
}

/* لما العنصر يتعكس في الاتجاهين مع بعض */
.flip-horizontal.flip-vertical:not(.boxes-iconbar-horizontal) .editableArea,
.flip-horizontal.flip-vertical:not(.boxes-iconbar-horizontal) .desc {
    transform: scale(-1, -1) !important;
    display: inline-block;
    -webkit-transform: scale(-1, -1) !important;
    -moz-transform: scale(-1, -1) !important;
    -ms-transform: scale(-1, -1) !important;
    -o-transform: scale(-1, -1) !important;
}


/* --- Tools Menu 3-Levels Styles --- */

.tools-menu-item {
    position: relative;
    list-style: none;
}

.tools-menu-btn {
    cursor: pointer;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f9fa;
    font-weight: bold;
    transition: 0.2s;
}

.tools-menu-btn:hover {
    background-color: #e2e6ea;
}


.level2-categories {
    display: none;
    left: 105%; 
    top: 0;
    background: white;
    border: 1px solid #ccc;
    width: 140px;
    z-index: 1000;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    border-radius: 4px;
}

.category-btn {
    cursor: pointer;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    transition: 0.2s;
}

.category-btn:hover {
    background-color: #f1f1f1;
}



.inline-shapes-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 8px;
    align-items: center;
    padding: 5px;
    width: 100%;
}

.shape-item-wrapper {
    border: 1px solid #eee;
    padding: 8px;
    cursor: grab;
    background: #fafafa;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.shape-item-wrapper:hover {
    border-color: #aaa;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.inline-shapes-grid .shape-svg {
    width: 35px;
    height: 35px;
}

/*
.mockElement.is-active-item .editableArea {
    color: white !important; 
    background-color: gray !important;
    border-radius: 4px;
    padding: 2px 6px;
}
*/

#widgetCollection li.ui-list-wrapper {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fafafa;
    cursor: grab;
    transition: 0.2s;
}

#widgetCollection li.ui-list-wrapper:hover {
    border-color: #aaa;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.mockElement.scalable-toolbar {
    container-type: size;
}


.mockElement.scalable-toolbar .editableArea ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


.mockElement.scalable-toolbar .editableArea ul li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50cqh; 
}



.mockElement.scalable-icon {
    container-type: size; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; 
    height: 50px;
}

.mockElement.scalable-icon .editableArea {
font-size: 80cqh;
    margin: 0;
    padding: 0;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}	
 .inline-shapes-grid {
    gap: 12px !important;
    width: 85% !important;
}

li.shape-grid-item {
    width: 39px ;
}


.line-endpoint {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 2px solid #007bff;
    border-radius: 50%;
    cursor: crosshair;
    transform: translate(-50%, -50%); 
    z-index: 100;
}


.line-segment-handle {
    position: absolute;
    width: 16px;
    height: 8px;
    background: #fff;
    border: 2px solid #6f42c1; 
    border-radius: 4px;
    cursor: row-resize; 
    transform: translate(-50%, -50%);
    z-index: 99;
}


.line-segment-handle.vertical {
    width: 8px;
    height: 16px;
    cursor: col-resize; 
}


.smart-line-element .line-endpoint,
.smart-line-element .line-segment-handle,
.smart-line-element .line-curve-handle {
    display: none;
}


.smart-line-element.custom-selected .line-endpoint,
.smart-line-element.custom-selected .line-segment-handle,
.smart-line-element.custom-selected .line-curve-handle {
    display: block;
}


.line-endpoint, .line-curve-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.line-endpoint {
    border: 1px solid #007bff;
    cursor: crosshair;
}

.line-curve-handle {
    border: 2px solid #28a745;
    cursor: move;
}

.dropdown-tool.contextual-tool {
    display: flex;
}

.custom-button-element .editableArea {
    background: transparent !important;
}