/*
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
*/

@import '../../icons/_svg-dimensions.scss';

// reset

table {
	border-collapse: collapse;
}

td {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

ul {
	margin: 0;
	padding-left: 3px;
    list-style-position: inside;
	list-position: inline;
}

a {
	text-decoration: none;
	color: #000000;
}
// basics

html {
	overflow: hidden;
    width: 100%;
    height: 100%;
}

body {
	// this is to test debug / non-debug theme
	font-family: arial;
	font-size: 12px;
	line-height: normal;
	display: flex;
	box-sizing: border-box;
	width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

td {
	font-size: 12px;
	font-family: arial;
}

input, textarea {
	display: flex;
	font-size: 12px;
	border: 1px solid #30f121;
	font-family: arial;
	padding: 2px;
	flex: 1 1 auto;
	// width: 100%;
	box-sizing: border-box;
}

input {
	overflow: hidden;
}

div, a, label {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	box-sizing: border-box;
	flex-direction: column;
}

label {
	padding: 3px;
}

li > div {
	display: inline-flex;
}

span {
	display: inline;
}

.cui-tr {
	flex: 1 1 auto;
	flex-direction: row;
}

// HorizontalLayout
.cui-horizontal-layout {
	&.cui-maximize-horizontal {
		flex-direction: row;
		overflow: hidden;

		> .cui-horizontal-layout-left,
		> .cui-horizontal-layout-right
		{
			position: relative;
			overflow: hidden;
		}
		> .cui-horizontal-layout-center {
			position: relative;
			flex: 1 1 auto;
			overflow: auto;
		}
	}

	&.cui-maximize-vertical {
		flex: 1 1 auto;
		overflow: hidden;
	}

	&:not(.cui-maximize-horizontal) {
		flex-direction: row;
		align-self: flex-start;
	}
}


// VerticalLayout
.cui-vertical-layout {
	&.cui-maximize-vertical {
		flex: 1 1 auto;
		overflow: hidden;

		> .cui-vertical-layout-top,
		> .cui-vertical-layout-bottom {
			position: relative;
			overflow: hidden;
		}
		> .cui-vertical-layout-center {
			position: relative;
			flex: 1 1 auto;
			overflow: auto;
		}
	}

	&.cui-maximize-horizontal {
		overflow: hidden;
	}

	&:not(.cui-maximize-horizontal) {
		align-self: flex-start;
	}
}

.cui-horizontal-list {
	> .cui-horizontal-layout-center {
		flex-direction: row;
	}
}


// Layout Absolute Horizontal
.cui-horizontal-layout{
    &.cui-absolute {
        position: relative;

        width: 100%;
        height: 100%;

        & > div {
			position: absolute !important; // overwrite "relative" from above
            top: 0;
            bottom: 0;
			// height: 100%;
        }
        & > .cui-horizontal-layout-left {
            left: 0;
        }
        & > .cui-horizontal-layout-center {
            left: 0;  // overwritten by Layout.coffee
            right: 0;  // overwritten by Layout.coffee
        }

        & > .cui-horizontal-layout-right {
            right: 0;
        }
    }
}





// Layout Absolute Vertical
.cui-vertical-layout {
	&.cui-absolute {
		position: relative;

		width: 100%;
		height: 100%;

		& > div {
			position: absolute !important; // overwrite "relative" from above
			left: 0;
			right: 0;
			width: 100%;
		}

		& > .cui-vertical-layout-top {
			top: 0;
		}

		& > .cui-vertical-layout-center {
			top: 0; // overwritten by Layout.coffee
			bottom: 0; // overwritten by Layout.coffee
		}

		& > .cui-vertical-layout-bottom {
			bottom: 0;
		}

	}
}


// Flexhandle

.cui-flex-handle-hidden {
	display: none;
}

.cui-flex-handle {
	&.cui-flex-handle-has-label:not(.cui-flex-handle-closed) {
		.cui-label {
			display: none;
		}
	}
}

.cui-flex-handle-row {
	&.cui-flex-handle-has-label.cui-flex-handle-closed {
		width: 20px;
		.cui-label.cui-label-rotate-90 {
			.cui-label-transform {
				// the difference to the normal rotate-90 is that
				// we want to touch the label the "top" and not
				// start from the "bottom"
				transform: rotateZ(-90deg) translateY(-3px) translate(calc(-100% - 3px));
				transform-origin: left top;
			}
		}
	}

	width: 6px;
	flex: 0 0 auto;
	overflow: hidden;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-color: #64b6fd;
	&:not(.cui-flex-handle-closed) {
		cursor: ew-resize;
	}
	&.cui-flex-handle-closed {
		cursor: pointer;
	}
	&.cui-is-manually-sized {
		background-color: #64fdd8;
	}
}

.cui-flex-handle-column {
	&.cui-flex-handle-has-label.cui-flex-handle-closed {
		height: 20px;
	}

	&.cui-is-manually-sized {
		background-color: #64fdd8;
	}

	height: 6px;
	flex: 0 0 auto;
	overflow: hidden;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color: #64b6fd;
	&:not(.cui-flex-handle-closed) {
		cursor: ns-resize;
	}
	&.cui-flex-handle-closed {
		cursor: pointer;
	}
}


.cui-flex-handle-stretched {
	flex: 1 1 auto !important;
}

.cui-flex-handle-hide-for-stretch {
	display: none;
}


.cui-pane-fill-screen {
        transition: top ease-out 0.5s,right ease-out 0.5s,left ease-out 0.5s,bottom ease-out 0.5s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

		// Pane Fillscreen
		.cui-pane-fill-screen {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			.cui-pane-fill-screen-inner {
				width: 100%;
				height: 100%;
			}
		}
		// overwrite "style" set by code
        &.cui-pane-fill-screen-is-on {
            top: 0 !important;
            left: 0 !important;
            bottom: 0 !important;
            right: 0 !important;
        }
}

// BorderLayout

.cui-border-layout-north,
.cui-border-layout-south {
	background-color: #ffd890;
}

.cui-border-layout-west,
.cui-border-layout-east {
	background-color: #ffefd1;
}

// DocumentBrowser
.cui-document-browser {
	.cui-label-content, a {
		display: inline;
	}
	a {
		text-decoration: underline;
	}

	.cui-document-browser-node-match-hierarchy {
		font-weight: bold;
		font-size: 14px;
		padding: 0 3px;
	}
	.cui-document-browser-list {
		width: 250px;
		li, .cui-label {
			cursor: pointer;
			&:hover {
				background: #e0e0e0;
			}
		}
	}

	.cui-document-browser-marked-node {
		background: hsla(47, 100%, 72%, 0.53);
	}

	.cui-document-browser-search-match--title {
		margin-top: 10px;
		border-top: 3px solid #18026f;
		border-bottom: 2px solid #caca64;
	}
	.cui-document-browser-search-match-mark {
		display: inline-block;
		background-color: hsla(50%,50%,50%,0.5);
		&.cui-search-match--1 {
			background-color: hsla(260, 68%, 65%, 0.5);
		}
	}
}

// Toolbar
.cui-toolbar {
	background-color: rgba(34, 139, 243, 0.43);
	padding: 3px;
	> div {
		&.cui-horizontal-layout-left,
		&.cui-horizontal-layout-right {
			flex-direction: row;
		}

		&.cui-horizontal-layout-center {
			// align-items: center;
		}
		// flex-direction: row;
		// align-items: center;
		> .cui-maximize-horizontal {
			// in column direction this is solved by
			// align-items: stretch, but here
			// we need to overwrite this
			flex: 1 1 auto;
		}
		> .cui-toolbar {
			// nested toolbars do not get a padding
			padding: 0;
		}
	}
	&.cui-template-empty {
		display: none;
	}
}

// Pane
.cui-pane:not(.cui-list-view) > .cui-vertical-layout-top > .cui-pane-header ,
.cui-pane:not(.cui-list-view) > .cui-vertical-layout-buttom > .cui-pane-footer
{
	background-color: #9a2424;
	color: #ffffff;
	.cui-button:not(.cui-active):not(.cui-disabled) {
		border-color: #aaaaaa;
		background-color: #000000;
	}
}


// Icons
i.fa {
	line-height: 20px;
}

.cui-icon-svg {
	fill: currentColor;
}

i.fa-spinner {
	width: 12px;
}

i.cui-spin-stepped {
	-webkit-animation: fa-spin 1s steps(8) infinite;
    -moz-animation: fa-spin 1s steps(8) infinite;
    -ms-animation: fa-spin 1s steps(8) infinite;
    -o-animation: fa-spin 1s steps(8) infinite;
    animation: fa-spin 1s steps(8) infinite;
}

.cui-button-visual {
	flex-direction: row;
	flex: 1 1 auto;
}

.fa-times-thin:before {
	font-size: 1.58em;
	content: '\00d7';
	display: block;
  margin-top: -0.09em;
}

// Button / Select / Checkbox
a[role="button"],label[role="button"],.cui-button
{
	&:not(.cui-disabled):hover {
		opacity: 0.7;
	}
	cursor: default;
	display: inline-flex; // if a button is not in a flex container, behave like "inline-block"
	overflow: hidden;
	white-space: nowrap;
	flex-direction: row;
	flex: 0 0 auto;
	align-self: flex-start;
	line-height: 20px;

	&:not(.cui-button-appearance-flat) {
		&.cui-button--primary {
			border-color: blue;
			border-width: 2px;
		}
		background-color: #ffdbb3;
		border: 1px solid #b3895b;
	}

	&.cui-disabled {
		opacity: 0.7;
		// background-color: #c0c0c0;
	}
	&.cui-active {
		background-color: #ff5200 !important;
	}

	// add padding around the whole button
	padding: 0 3px;

	.cui-button-left,
	.cui-button-center,
	.cui-button-right
	{
		&:empty {
			display: none;
		}
	}
	// add in-between padding
	.cui-button-left:not(:empty) + .cui-button-center:not(:empty)
	{
		padding-left: 3px;
	}

	.cui-button-center:not(:empty) + .cui-button-right:not(:empty)
	{
		padding-left: 3px;
	}

	.cui-button-left:not(:empty) + .cui-button-center:empty + .cui-button-right:not(:empty)
	{
		padding-left: 3px;
	}


	.cui-button-left
	{
		text-align: center;
		flex: 0 0 auto;
		> i.fa:not(.fa-ellipsis-v) {
			min-width: 12px;
		}
	}
	.cui-button-center
	{
		flex: 1 1 auto; // was 1 0
	}
	.cui-button-right
	{
		text-align: center;
		flex: 0 0 auto;
		> i.fa:not(.fa-ellipsis-v) {
			min-width: 12px;
		}
	}
}

a[role="button"].cui-button-appearance-link {
	height: initial;
	> .cui-button-center {
		word-break: break-all;
	}
}


.cui-button-appearance-link[role] {
	background-color: transparent;
	border-style: none;
}

.cui-button-appearance-important[role] {
	background-color: #ff8800;
	border: 1px solid red;
}



// Buttonbar
.cui-buttonbar-group {
	// outside borders are from the buttongroup
	border: 1px solid #f00;

	// cui-select has a button inside a data-field
	// so we cannot use ">" here
	.cui-button, .cui-input {
		border-style: none;
		// make the height 2 * border lower
		height: 18px;
	}

	> div:not(.cui-first-visible-child) .cui-button,
	> .cui-button:not(.cui-first-visible-child) {
		border-left-style: dotted;
		border-left-color: blue;
	}
}


// Checkbox
.cui-button[role="checkbox"],
.cui-button[role="radio"] {
	background-color: transparent;
	border: none;
	.cui-button-left {
		// empty checkbox: span
		// filled checkbox: i
		> span, > i {
			display: inline-block;
			width: 14px;
			height: 14px;
			border: 1px solid blue;
			margin-top: 2px;
			line-height: 16px;
		}
	}
}

.cui-button[role="radio"] {
	.cui-button-left {
		> span, > i {
			border-radius: 7px;
		}
	}
}
// Panel
.cui-panel-header {
	background-color: #e6e6e6;
}

.cui-panel-body {
	background-color: #f3f3f3;
}

.cui-button[role="button"].cui-panel-header-button {
	border: none;
	background-color: transparent;
	.cui-button-left {
		width: 15px;
	}
}
.cui-panel-closed > .cui-panel-body {
	display: none;
}


// Label

.cui-label {
	line-height: 20px;
	display: inline-flex;
	flex-direction: row;
	flex: 0 0 auto;
	align-items: stretch;
	// align-self: flex-start;

	padding: 0 3px;
	&.cui-label-rotate-90 {
		// rotate by 90 degrees
		white-space: nowrap;
		// align-self: flex-start;
		> .cui-label-transform {
			// the transform-origin is the corner
			// of the content, so the padding
			// moved the origin to the right.
			// we need to compensate for that
			transform: rotateZ(-90deg) translateY(calc(100% - 3px)) translateX(3px);
			transform-origin: left bottom;
		}
	}
	> .cui-label-icon {
		flex: 0 0 auto;
		width: 20px;
		text-align: center;
		> i {
			font-size: 16px;
			line-height: 20px;
		}
	}

	> .cui-label-icon:not(:empty) + .cui-label-content:not(:empty) {
		padding-left: 3px;
	}

	&:not(cui-label-multiline) {
		> .cui-label-content {
			flex-direction: row;
		}
	}

	> .cui-label-content {
		// display: inline-flex;
		flex: 0 0 auto;
	}

	// Markdown

	&.cui-label-markdown {
		p {
			margin: 0;
		}
	}


	&.cui-label-multiline {
		align-self: stretch;

		&:not(.cui-label-markdown) {
			white-space: pre-wrap;
			// word-break: normal;
			word-break: break-all;
			// this does not work in IE, but will
			// be ignored by IE, so we are good
			word-break: break-word;
		}

		> .cui-label-content {
			flex: 0 1 auto;
		}

		&.cui-label-manage-overflow {
			> .cui-label-content {
				transition: height ease 0.5s, max-height ease 0.5s;
				max-height: 62px;
				position: relative;
				// flex-direction: column;
				overflow: hidden;

				> .cui-label-manage-overflow-content-container {
					transition: height ease 0.5s, max-height ease 0.5s;
					overflow: hidden;

					> span {
						white-space: pre-wrap;
						word-break: normal;
					}
				}

				> .cui-label-manage-overflow-button-container {
					height: 0;
					align-self: flex-end;
					.cui-button {
						transform: translateY(-100%);
						border-style: none;
						background-color: #8a8a8a;
						color: #ffffff;
						border-radius: 3px;
					}
				}
			}

		}
	}
	.cui-label-content:empty {
		display: none;
	}
	.cui-label-icon:empty {
		display: none;
	}
}

// Buttonbar
.cui-buttonbar {
	flex-direction: row;
	align-self: flex-start;
	> div:not(:last-child) {
		margin-right: 4px;
	}
}

// Buttonbar & Button
.cui-buttonbar + .cui-button {
	margin-left: 4px;
}

.cui-button + .cui-buttonbar {
	margin-left: 4px;
}

.cui-buttonbar-group {
	// display: inline-flex;
	flex-direction: row;
}

.cui-data-field:not(.cui-form) {
	background-color: rgba(235, 205, 255, 0.71);
}

// Checkbox
.cui-checkbox {
	flex-direction: column;
	> .cui-button-checkbox {
		align-self: stretch;
		height: auto;
		white-space: initial;
	}
}

// Input
.cui-input {
	// state classes:
	// cui-input-invalid
	// cui-input-has-no-user-input
	// cui-input-has-user-input
	// cui-has-focus
	// cui-has-check-input
	//
	// hint:
	// cui-input-has-invalid-hint
	// cui-input-has-valid-hint
	// cui-input-has-input-hin:
	//

	&.cui-input-has-check-input {
		&.cui-input-invalid.cui-input-has-user-input {
			input {
				border-color: red;
				background: rgba(255, 131, 122, 0.28);
			}
		}

		&.cui-input-has-valid-hint.cui-input-has-user-input:not(.cui-input-invalid) {
			input {
				border-color: green;
				background: rgba(131, 255, 122, 0.28);
			}
		}
	}

	&.cui-input-has-no-user-input.cui-input-required {
		input {
			border-color: rgb(255, 117, 215);
			background: rgba(255, 117, 215, 0.28);
		}
	}


	input {
		height: 20px;
	}
}

::-ms-clear {
    display: none;
}

.cui-input-shadow {
	position: absolute;
	display: block;
	padding: 0;
	border: none;
	top: -1000px;
	left: -1000px;
}

// Layer

.cui-layer {
	position: absolute;
	background-color: #ffffff;
	flex-direction: column;
	// overflow: hidden;
	overflow: auto;
	margin: 10px;
}

.cui-layer-pointer
{
	position: absolute;
	width: 7px;
	height: 7px;
	margin: 5px;

	$pointerColor: #ff9800;

	&.cui-layer-pointer--s {
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 7px solid $pointerColor;
	}

	&.cui-layer-pointer--n {
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid $pointerColor;
	}

	&.cui-layer-pointer--w {
		width: 0;
		height: 0;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-right: 7px solid $pointerColor;
	}

	&.cui-layer-pointer--e {
		width: 0;
		height: 0;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 7px solid $pointerColor;
	}
}

.cui-layer-backdrop
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	> div {
		position: absolute;
		flex: 1 1 auto;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

.cui-layer-backdrop-body-clone
{
	position: absolute;
	overflow: hidden;

	> *:first-child {
		position: absolute;
	}
}

.cui-layer-root.cui-layer-root-backdrop-blur
{
	> .cui-layer-backdrop
	{
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
		overflow: hidden;
	}

	> .cui-layer {
		// blur effect, make layer transparent
		background-color: rgba(255, 255, 255, 0.39);

		.cui-item-list-body {
			.cui-button {
				background-color: transparent;
			}
		}
	}
}

// Tooltip
.cui-tooltip {
	background-color: #4a4a4a;
	color: #ffffff;
    padding: 4px;
    border-radius: 6px;
}



// Menu
.cui-menu {
	border: 2px solid green;
	background-color: #bcf7bc;
	.cui-item-list-body {
		border: 2px solid yellow;
	}
}

// ItemList
.cui-item-list-body
{
	flex-direction: column;

	> div {
		flex: 0 0 auto;
	}
	a[role="button"],.cui-button
	{
		// stretch'em
		align-self: stretch;
	}

	.cui-item-list-divider {
		height: 2px;
		background: red;
		margin: 10px 0;
	}

	// always make space for item in buttons
	.cui-button-center {
		flex: 1 1 auto;
	}
	&.cui-item-list--has-button-left
	{
		// this button always has a left side
		.cui-file-upload-button {
			.cui-button-left {
				display: flex;
				width: 20px;
			}
			.cui-button-center:not(:empty) {
				padding-left: 3px;
			}
		}
		> .cui-button-center,
		> .cui-button-center-right {
			.cui-button-center {
				padding-left: 23px;
			}
		}
	}

	.cui-button-left {
		width: 20px;
	}
}

// Modal
.cui-layer.cui-modal {
	border: 2px solid black;
}

// ConfirmationDialog
.cui-layer-root.cui-confirmation-dialog {
	> .cui-layer {
		text-align: center;
		max-width: 400px;
		min-width: 200px;
		border: 2px solid black;
		&.cui-alert-problem {
			border-color: red;
		}
	}
}

.cui-layer {
	&.cui-popover {
		border: 2px solid green;
	}
}

// WaitBlock
.cui-wait-block {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	// z-index: 1;
	.cui-wait-block-glass {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000000;
		opacity: 0.3;
	}
	.cui-wait-block-inner {
		flex: 1 1 auto;
		.cui-wait-block-header {
			flex: 1 1 auto;
			justify-content: center;
			align-self: center;
			.cui-label > .cui-label-icon > i {
				font-size: 24px;
				color: #000000;
			}

		}
		.cui-wait-block-content {
			display: none;
		}
	}
}

// Tabs
.cui-tabs {
	.cui-tabs-active-marker {
		position: absolute;
		bottom: 0;
		// left + width are set by javascript
		height: 3px;
		background: yellow;
		transition: width 0.3s ease, left 0.3s ease;
	}
	> .cui-vertical-layout-top {
		> .cui-pane-header {
			background-color: #d2ffc3;
			.cui-horizontal-layout-center {
				overflow: hidden;
			}
		}
	}
	> .cui-vertical-layout-center {
		> .cui-tabs-bodies {
			flex: 1 1 auto;
			flex-direction: row;
			overflow: hidden;
			> .cui-tab-body {
				// disable the javascript overwrite here
				margin-left: 0 !important;
				// transition: margin-left 0.5s ease;
				border: 2px solid green;
				background-color: #d3ffd3;
				flex: 1 1 auto;
				overflow: auto;
				&.cui-tab-hidden {
					display: none;
				}
			}
		}
	}
}



// ListView
.cui-list-view {
	background-color: #d1f6ff;

	[cui-lv-quadrant="0"],
	[cui-lv-quadrant="1"] {
		font-weight: bold;
	}

	.cui-list-view-grid-has-fixed-rows {
		.cui-list-view-grid-inner-top {
			border-bottom: 2px solid #9dc6cc;
		}
	}

	// &.cui-maximize-vertical {
	//	> .cui-vertical-layout-center {
	//		> .cui-list-view-grid {
	//			height: 100%;
	//		}
	//	}
	// }

	// &.cui-maximize-horizontal {
	//	> .cui-vertical-layout-center {
	//		> .cui-list-view-grid {
	//			width: 100%;
	//		}
	//	}
	// }


	.cui-list-view-grid {
		flex: 1 1 auto;
		flex-direction: column;
		// needed for resize tool to position the resize
		// handles properly
		position: relative;
	}

	.cui-list-view-grid-inner-top {
		flex: 0 0 auto;
		flex-direction: row;
	}

	.cui-list-view-grid-inner-bottom {
		flex: 1 1 auto;
		flex-direction: row;
	}

	.cui-list-view-grid-quadrant-0 {
		flex: 0 0 auto;
		overflow: hidden;
	}

	.cui-list-view-grid-quadrant-1 {
		flex: 1 1 auto;
		overflow: hidden;
	}

	.cui-list-view-grid-quadrant-2 {
		flex: 0 0 auto;
		overflow: hidden;
	}
	.cui-list-view-grid-quadrant-3 {
		flex: 1 1 auto;
		overflow: auto;
		background-color: #f0f8ff;
	}

}

// outside .cui-list-liew, we can use
// this in Form too

.cui-lv-tbody {
	flex-direction: column;
}

.cui-lv-tr-outer {
	// avoid the text select cursor on list items
	cursor: default;
	flex-direction: row;
	flex: 0 0 auto;
	&.cui-selected {
		background-color: #2a9cff;
		color: #ffffff;
	}
}

.cui-lv-tr {
	flex: 1 1 auto;
	flex-direction: row;
	border-bottom: dotted 1px #c0c0c0;
}

.cui-list-view-grid-inner-top {
	.cui-lv-td {
		justify-content: flex-end;
	}
}

.cui-list-view-row-move-handle-column {
	&.cui-lv-td {
		width: 10px;
		&.cui-list-view-row-move-handle {
			cursor: move;
			> div {
				background: yellow;
				flex: 1 1 auto;
			}
		}
	}
}

.cui-list-view-grid-quadrant-1,
.cui-list-view-grid-quadrant-3 {
	.cui-lv-td:last-child {
		border-right: solid 1px black;
	}
}

.cui-lv-td {
	&.cui-lv-td-rotate-90 {
		width: 25px;
		> .cui-label-rotate-90 {
			word-break: break-all;
			height: 100px;
			> .cui-label-transform {
				width: 100px;
			}

		}
	}
	&:not(.cui-lv-td-fill) {
		padding: 1px;
	}
	&.cui-lv-td-fill {
		padding: 2px;
		&:not(:last-child) {
			border-right-style: dotted;
		}
	}

	&[colspan] {
		background-color: #e7ffff;
	}

	border-right: solid 1px black;

	// align-items: flex-start;
	flex: 0 0 auto;
	overflow: hidden;
	flex-direction: column;

	&:not(.cui-lv-td-fill) {
		min-height: 22px;
	}

	&.cui-lv-td-max {
		flex: 1 1 auto;
	}
}

.cui-lv-tr-fill-outer {
	flex: 1 1 auto;
	flex-direction: row;

	> .cui-lv-tr {
		border-style: none;
	}

	.cui-lv-td.cui-lv-td-fill {
		padding: 0;
	}
}

// do this on top level, so its easier to overwrite
.cui-lv-td {
	width: 100px;
}

.cui-list-view-tool-col-resize-marker {

	position: absolute;
	cursor: col-resize;
	// bigger grab area
	margin: 0 -4px;
	padding: 0 4px;

	> div {
		width: 1px;
		height: 100%;
		background-color: black;
	}
}

.cui-list-view-tool {
	position: absolute;

	&.cui-list-view-tool-row-move-marker {
		border: 1px solid green;
		background-color: green;
		opacity: 0.3;
	}

	// marker to show the insert drop target
	&.cui-list-view-tool-row-move-target {
		height: 3px;
		background: green;
	}

	&.cui-list-view-tool-marker {
		border: 1px solid blue;
		background-color: blue;
		opacity: 0.3;
	}
}

// ListViewTree

.cui-list-view-grid {
	&.cui-list-view-tree-no-hierarchy {
		.cui-tree-node-handle {
			display: none;
		}
	}
	.cui-tree-node {
		flex-direction: row;
		flex: 1 1 auto;

		.cui-tree-node-handle,
		.cui-tree-node-spacer {
			width: 14px;
			flex: 0 0 auto;
		}
		.cui-tree-node-handle {
			text-align: center;
			> i {
				font-size: 16px;
				line-height: 20px;
			}
		}
		.cui-tree-node-content {
			flex: 1 1 auto;
		}
	}
}

// Form
.cui-form {
	background: rgba(187, 187, 54, 0.5);
}

.cui-form-table-has-not-left-column {
	// on top level for, hide left column
	> .cui-tr > .cui-td.cui-form-left {
		display: none;
	}
}

.cui-form-table-vertical[cui-form-depth="0"] {
	> .cui-form-tr {
		border-bottom: 2px solid orange;
		margin-bottom: 10px;
	}
}

.cui-form-td {
	&.cui-form-left {
		width: 120px;
	}
}

// is a form is inside a form (vertical only)
// the tr containing the inner form is marked with
// .cui-form-tr-content-is-form-vertical

.cui-form-tr-content-is-form-vertical {
	flex-direction: column;
	> .cui-form-left {
		font-weight: bold;
	}
	> .cui-form-center {
		margin-left: 10px;
	}
	.cui-form-table[cui-form-depth="1"] > .cui-tr > .cui-form-left {
		width: 110px;
	}
	.cui-form-table[cui-form-depth="2"] > .cui-tr > .cui-form-left {
		width: 100px;
	}
}

.cui-form-tr-header {
	font-style: italic;
}


.cui-form-table-horizontal {
	.cui-form-tr-horizontal {
		flex-wrap: wrap;
	}
	.cui-form-td {
		width: 80px;
	}
}

.cui-maximize-horizontal > .cui-vertical-layout-center > .cui-form-table-vertical {
	> .cui-tr {
		> .cui-form-left[colspan="2"],
		> .cui-form-center {
			flex: 1 1 auto;
			min-width: 0;
		}
	}
}

// Options
.cui-options-activatable {
	.cui-options-active,
	.cui-options-inactive {
		border: 1px solid blue;
	}
}

.cui-options-sortable-option {
	flex-direction: row;
	.cui-options-sortable-drag-handle {
		width: 10px;
		&:hover {
			opacity: 0.8;
		}
		cursor: move;
		background: yellow;
	}
}


// DateTime
.cui-date-time {
	flex-direction: row;
	.cui-date-time-input-center {
		flex: 1 1 auto;
	}

}

// DateTime Popover

.cui-menu.cui-date-time-60-select {
	.cui-item-list-body {
		box-sizing: content-box;
		width: 300px;
		flex-direction: row;
		flex-wrap: wrap;
		> * {
			box-sizing: border-box;
		}
		.cui-button {
			width: 30px;
			height: 30px;
		}
	}
}


.cui-date-time-popover {
	width: 250px;
	height: 250px;

	.cui-date-time {
		padding: 5px;
		flex: 1 1 auto;

		.cui-date-time-header {
			display: none;
		}

		&[browser="time"] {
			.cui-date-time-calendar {
				margin-left: -100%;
			}
		}

		.cui-date-time-browser {
			.cui-date-time-calendar,
			.cui-date-time-clock {
				width: 100%;
			}

			.cui-date-time-calendar {
				transition: margin-left 0.5s ease-out;
			}
			flex-direction: row;
			overflow: hidden;
			flex: 1 1 auto;
			.cui-number-input {
				input {
					width: 40px;
					text-align: center;
				}
			}
		}
	}

	.cui-date-time-date {
		margin: 5px 0;
		height: 100% / 8 * 6.5;
		border: 1px solid red;
		.cui-tr:not(:first-child) > .cui-td {
			border-top: 1px solid green;
		}
		.cui-tr.cui-date-time-month-header {
			height: 100% / (6 * 2 + 1);
			flex: 0 0 auto;
		}
		.cui-td, .cui-th {
			width: 12.5%; // 8 columns
			text-align: center;

			&.cui-date-time-day:hover {
				background-color: #c0c0c0;
			}
			&.cui-date-time-previous-month,
			&.cui-date-time-next-month {
				color: #c9c9c9;
			}
			&.cui-date-time-selected {
				background-color: #2a9cff !important;
				color: #ffffff !important;
			}
			&.cui-date-time-now {
				background-color: #cef7ce;
			}
			cursor: default;
			&:not(:first-child) {
				border-left: 1px solid green;
			}
			justify-content: center;
		}
	}
}

// DataField

.cui-data-field-hidden {
	display: none;
}


// MultiInput

.cui-multi-input .cui-multi-input-container {
    align-items: stretch;
	flex: 1 1 auto;

	> .cui-multi-input-input {
		flex-direction: row;
		> .cui-data-field-multi-input-center {
			flex: 1 1 auto;
		}
		> .cui-data-field-multi-input-right {
			flex: 0 0  auto;
			.cui-button {
				justify-content: center;
				width: 25px;
			}
		}
	}
}

// Drag & Drop

.cui-drag-drop-select-transparent {
	pointer-events: none !important;
	* {
		pointer-events: none !important;
	}
}

.cui-dom-animated-clone * {
	transition: all 0.3s ease;
}

// Droppable
.cui-droppable {
	// marks an active droppable
	opacity: 0.5;
}

.cui-droppable-target-helper {
	transition: transform 0.5s ease;
}

.cui-droppable-target-helper-y--after {
	transform: translateY(-30%)
}

.cui-droppable-target-helper-y--before {
	transform: translateY(30%)
}

.cui-droppable-target-helper-x--after {
	transform: translateX(-30%)
}

.cui-droppable-target-helper-x--before {
	transform: translateX(30%)
}


// this needs to take space, but also
// be invisble
.cui-droppable-target-helper {
	// this if for debug only
	background: green;
}

.cui-droppable-drop-helper {
	border: solid 3px rgba(0, 255, 0, 0.7);
	pointer-events: none;
}

// Movable
.cui-drag-drop-select-movable {
	cursor: move;
}

// Resizable
.cui-drag-drop-select-resizable {
	position: relative;
}

.cui-resizable-handle {
	position: absolute;

	&.cui-resizable-handle-se {
		bottom: -8px;
		right: -8px;
		width: 16px;
		height: 16px;
		cursor: nwse-resize;
	}

	&.cui-resizable-handle-nw {
		top: -8px;
		left: -8px;
		width: 16px;
		height: 16px;
		cursor: nwse-resize;
	}

	&.cui-resizable-handle-sw {
		bottom: -8px;
		left: -8px;
		width: 16px;
		height: 16px;
		cursor: nesw-resize;
	}

	&.cui-resizable-handle-ne {
		right: -8px;
		top: -8px;
		width: 16px;
		height: 16px;
		cursor: nesw-resize;
	}

	&.cui-resizable-handle-s {
		left: 8px;
		right: 8px;
		bottom: -8px;
		height: 16px;
		cursor: ns-resize;
	}

	&.cui-resizable-handle-n {
		left: 8px;
		right: 8px;
		top: -8px;
		height: 16px;
		cursor: ns-resize;
	}

	&.cui-resizable-handle-e {
		right: -8px;
		top: 8px;
		bottom: 8px;
		width: 16px;
		cursor: ew-resize;
	}

	&.cui-resizable-handle-w {
		left: -8px;
		top: 8px;
		bottom: 8px;
		width: 16px;
		cursor: ew-resize;
	}
}


// Lasso
.cui-lasso-area {
	position: relative;
}

.cui-lasso {
	position: absolute;
	background-color: rgba(135, 198, 253, 0.35);
	display: block;
	border: 2px dotted rgba(135, 198, 253, 0.8);
}

.cui-drag-drop-select-lasso-element-in-lasso {
	opacity: 0.8;
}

// Sortable

.cui-sortable-placeholder {
	opacity: 0;
}



// Block

.cui-block {
	background-color: rgba(183, 236, 236, 0.57);
	&.cui-block-level-1 {
		border: 1px solid blue;
		> .cui-block-header {
			font-size: 15px;
		}
	}
	&.cui-block-level-2 {
		> .cui-block-header {
			font-size: 13px;
		}
	}
	> .cui-block-header {
		font-weight: bold;
	}
}

// StickyHeader

.cui-sticky-header {
	background-color: #404040;
	color: #ffffff;
	padding: 2px 3px;
	margin: 10px;
	border: 2px solid green;
	&.cui-sticky-header-level-1 {
		background-color: rgba(64, 64, 64, 0.86);
	}
	&.cui-sticky-header-level-2 {
		background-color: rgba(64, 64, 64, 0.56);
	}
}


.cui-sticky-header-control {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	> .cui-sticky-header {
		// margin-top: 2px;
		// margin-bottom: 0;
		margin: 0;
		position: absolute;
		left: 0;
		right: 0;
	}
}

// ProgressMeter
.cui-progress-meter {
	.cui-progress-meter-bar {
		height: 20px;
		position: relative;
		.cui-progress-meter-fill-background,
		.cui-progress-meter-fill,
		.cui-progress-meter-text {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		.cui-progress-meter-fill-background {
			background-color: #7dc3ff;
		}
		.cui-progress-meter-fill {
			display: none;
			background-color: blue;
		}
		.cui-progress-meter-text {
			display: none;
			color: #ffffff;
			align-items: center;
			line-height: 20px;
		}
		.cui-progress-meter-icon {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			color: white;
			align-items: center;
		}

	}
	&[state="waiting"] {
		.cui-progress-meter-fill-background {
			// reddish
			background-color: #ff6054;
		}
	}

	&[state="percent"] {
		.cui-progress-meter-icon {
			display: none;
		}
		.cui-progress-meter-text {
			display: flex;
		}
		.cui-progress-meter-fill {
			display: flex;
		}
	}
}

// DigiDisplay

.cui-digi-display {
	border: 1px solid black;
	align-self: flex-start;
	flex-direction: row;

	> div {
		vertical-align: bottom;
		height: 20px;
		border-right: 1px solid #c0c0c0;
		&:last-child {
			border-right: 0;
		}
		text-align: center;
		overflow: hidden;
		padding: 1px;
		font-family: monospace;
		font-size: 16px;
		line-height: 18px;
	}

	.cui-digi-display-digit {
		transition: margin-top 0.3s ease;
		height: 18px;
	}

	.cui-digi-display-static {
		height: 20px;
	}

}




// CUI technical stuff
.cui-tmpl {
	// hide all templates
	display: none !important;
}

@keyframes nodeInserted {
	from { opacity: 0.99; }
	to { opacity: 1; }
}