/* =========================================================================================================================== */
/* Element Window                                                                                                              */
/* =========================================================================================================================== */
.c-element-window {
	background-color : var(--color-app-bg, white);
	position         : fixed;
	border           : 1px solid var(--color-dark, black);
	border-radius    : 5px;
	opacity          : 0;
	display          : none;
	flex-direction   : column;
	width            : calc(100vw - 50px);
	height           : calc(100vh - 50px);
	max-width        : 780px;
	overflow         : hidden;
	box-shadow       : 0 0 var(--size-float-shadow) var(--color-float-shadow);
}
@media (max-width: 768px) {
	.c-element-window {
		resize     : none !important;
		width      : calc(100vw - 50px) !important;
		height     : calc(100vh - 50px) !important;
		max-width  : calc(100vw - 50px) !important;
		max-height : calc(100vh - 50px) !important;
	}
}
.notransition {
	transition : none !important;
}
.minimized {
	width   : 0;
	height  : 0;
	opacity : 0 !important;
	top     : 100vh !important;
	left    : 0 !important;
}
.maximized {
	width      : 100vw !important;
	max-width  : 100vw !important;
	height     : calc(100vh - 60px) !important;
	max-height : calc(100vh - 60px) !important;
	top        : 60px !important;
	left       : 0 !important;
}
.cew-header {
	background-color : var(--color-main, black);
	color            : var(--color-clear, white);
	display          : flex;
	flex-direction   : row;
	justify-content  : space-between;
	padding          : 10px 20px;
	border-bottom    : 1px solid var(--color-c1);
}
.cew-header > div {
	display     : flex;
	align-items : center;
	column-gap  : 10px;
}
.cew-header > div.hleft {
	flex-direction : row;
	overflow       : hidden;
}
.cew-header > div.hright {
	flex-direction : row-reverse;
}
.cew-header .hlabel {
	font-size     : 20px;
	font-weight   : bold;
	text-overflow : ellipsis;
    overflow      : hidden;
    white-space   : nowrap;
}
.cew-header .hclose {
	font-size : 24px;
	cursor    : pointer;
}
.cew-header .hcenter {
	font-size : 16px;
	padding   : 0 4px;
	cursor    : pointer;
}
.cew-header .hmin {
	font-size : 16px;
	padding   : 0 1px;
	cursor    : pointer;
}
.cew-header .hmax {
	font-size : 16px;
	padding   : 0 1px;
	cursor    : pointer;
}
.cew-header .hcenter > div {
	transform : rotate(45deg);
}
.cew-body {
	padding  : 20px;
	overflow : auto;
	height   : 100%;
}
.cew-footer {
	padding    : 10px 20px;
	border-top : 1px solid var(--color-c4, lightgrey);
}
/* =========================================================================================================================== */
/* Element Window Backdrop                                                                                                     */
/* =========================================================================================================================== */
.c-element-window-backdrop {
	display          : none;
	position         : fixed;
	top              : 0;
	left             : 0;
	width            : 100vw;
	height           : 100vh;
	background-color : var(--color-dark, black);
	opacity          : 0;
}
.c-element-window-backdrop.active {
	display : block;
}
.c-element-window-backdrop.hidden {
	opacity : 0 !important;
}
/* =========================================================================================================================== */
/* Element Task Bar                                                                                                            */
/* =========================================================================================================================== */
.c-element-taskbar {
	position   : fixed;
	opacity    : 0;
	transition : opacity 0.2s;
	display    : none;
	bottom     : 10px;
	left       : 10px;
	z-index    : 200000;
}
.c-element-taskbar-container {
	display          : flex;
	flex-direction   : row;
	background-color : white;
	padding          : 5px;
	border           : 1px solid var(--color-dark, black);
}
.c-element-taskbar-left {
	border-right    : 1px solid var(--color-c2, lightgrey);
	display         : flex;
	align-items     : center;
	justify-content : center;
	padding-right   : 5px;
	margin-right    : 5px;
}
.c-element-taskbar-left .move-icon {
	font-size      : 24px;
	color          : var(--color-grey, grey);
	display        : flex;
	flex-direction : row;
	column-gap     : 2px;
	cursor         : move;
	height         : 40px;
	align-items    : center;
	padding        : 0 5px;
}
.c-element-taskbar-items {
	display        : flex;
	flex-direction : row;
	column-gap     : 5px;
}
/* =========================================================================================================================== */
/* Element Task Bar Item                                                                                                       */
/* =========================================================================================================================== */
.c-element-taskbar-item {
	background-color : var(--color-lightgrey, gainsboro);
	color            : var(--color-dark, white);
	transition       : background-color 0.2s, color 0.2s;
	min-width        : 40px;
	min-height       : 40px;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	font-size        : 20px;
	cursor           : pointer;
	column-gap       : 5px;
	padding          : 0 10px;
}
.ceti-label {
	font-size : 16px;
}
.c-element-taskbar-item:hover {
	background-color : var(--color-grey, grey);
	color            : var(--color-dark, black);
}