// //////
.nc-row-col-text
	position: absolute
	float: right
	font-size: 0.85em
	color: grey
	background-color: rgba(255, 255, 255, 0.5)

.nc-element
	z-index: 2
	background-color: rgba(255, 255, 255, 0.8)

.nc-element-selected
	background-color: #f9c7c8
	border: solid red 1px

.nc-drop-active
	z-index: 1 /* must be in front of others to look good */
	box-shadow: 0px 0px 12px -4px rgba(0, 128, 0, 0.5), inset 0px 0px 12px -4px rgba(0, 128, 0, 0.5)
	outline: 1px solid grey

#nc-layout-area
	/* flex: 1 1 auto; */
	/* outline: 2px solid blue; */
	/* background-color: #f9f9ff; */
	/* overflow: hidden !important; */
	z-index: 1
	background-color: white
	padding-left: 0.2em
	padding-right: 0.2em
	.nc-row:hover
		// outline: var(--nc-hover-color-row) !important;
		outline: none !important
		box-shadow: var(--nc-hover-box-shadow-row) !important
	.nc-col:hover
		min-height: 1em
		outline: 1px dashed var(--nc-hover-color-col) !important
		box-shadow: var(--nc-hover-box-shadow-col) !important
		&[style='width: auto;']
			outline: 1px dotted var(--nc-hover-color-col) !important

#nc-layout-area *:hover
	transition: all 0.4s ease
	min-height: 0.15em
	outline: 1px solid var(--nc-hover-color)
	box-shadow: var(--nc-hover-box-shadow)
	// align-items: stretch !important; // stretch content so columns are as high as highest column, but then content is not in center any more
	z-index: 3 // on hover put on top of right-side or bottom-side element
	// .nc-row:hover, .nc-col:hover {// this prevents header draw in erp-sync -page to all components inside tab, but then nc-row dows not have label

#nc-layout-area:not(.nc-preview) .nc-row:hover
	// this must be same as #nc-layout-area>.nc-col:hover > .nc-col in below rule
	padding: 0.45em // top, right, bottom, left
	margin: 1px 0 // bigger margin than 1px will cause flicker when mouse goes between rows, lef/right margin would make 2 x 1/2 not to fit on a box

#nc-layout-area #nc-layout-area .nc-design,
#nc-layout-area:not(.nc-preview) > .nc-row:hover,
#nc-layout-area:not(.nc-preview) > .nc-col:hover
	.nc-row,
	.nc-col
		min-height: 2em
		align-items: center !important
		outline: 1px dashed silver // all non-auto nc-col
		// background-color: rgb(255, 255, 255, 0.8);
		padding: 0.45em // top, right, bottom, left
		margin: 1px 0 // margin lef/right would make 2 x 1/2 not to fit on a box
	.nc-col[style='width: auto;']
		outline: 1px dotted silver
	.nc-row
		outline: 1px solid silver

/* set by nc-layout-methods-interact.js code */
.nc-drag-fallback
	/* sortable uses this */
	background: red

.nc-drag-chosen,
.nc-drag-active,
.nc-drag-placeholder
	z-index: 1
	/* must be in front of others to look good */
	box-shadow: 0px 0px 12px -4px rgba(0, 128, 0, 0.5), inset 0px 0px 12px -4px rgba(0, 128, 0, 0.5)
	outline: 1px solid grey

.nc-drop-active
	z-index: 1
	/* must be in front of others to look good */
	box-shadow: 0px 0px 12px -4px rgba(0, 128, 128, 0.5), inset 0px 0px 12px -4px rgba(0, 128, 128, 0.5)
	outline: 1px solid grey

.nc-drop-target
	/* background-color: #29e; */
	/* blue */
	border-color: grey
	border-style: solid
	border-width: 2px

	/* border-radius: 3px; */

.nc-can-drop
	color: grey
	background-color: #4e4

/* other */
.nc-draggable
	z-index: 2

.nc-drag-drop
	display: inline-block
	min-width: 40px
	padding: 2em 0.5em
	/* color: #fff; */
	/* background-color: #29e; */
	/* blue */
	border: solid 2px #fff
	transition: background-color 0.4s
	-webkit-transform: translate(0, 0)
	transform: translate(0, 0)

.nc-dropzone
	width: 80%
	padding: 10px
	margin: 10px auto 30px
	background-color: #ccc
	border: dashed 4px transparent
	border-radius: 4px
	transition: background-color 0.4s
