/* stylesheet fuer das grid-control 
 * Farbcodes: https://www.mediaevent.de/tutorial/farbcodes.html
 * Farbnames: https://htmlcolorcodes.com/color-names/
 * Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */

/* ===================================================================================================
 * form (main)
 * ===================================================================================================
 */
 
:root {
  /*
  --text-color: black;
  --background-color: white;
  --space4tabs-border-left: 4px solid white;
  --space4tabs-div-background-color: LightGray;
  --space4tabs-div-background-color-hover: SteelBlue;
  --space4tabs-div-background-color-selected: LightSteelBlue;
  --space4tabs-div-border-top: 1px solid white;
  --space4tabs-div-border-right: 1px solid white;
  --gridHeaderRow-text-color: darkblue;
  */

  --text-color: black;
  --background-color: LightSteelBlue;
  --space4tabs-border-left: 4px solid LightSteelBlue;
  --space4tabs-div-background-color: LightGray;
  --space4tabs-div-background-color-hover: SteelBlue;
  --space4tabs-div-background-color-selected: LightSteelBlue;
  --space4tabs-div-border-top: 1px solid SteelBlue;
  --space4tabs-div-border-right: 1px solid SteelBlue;

  --grid-background-color: #F0F0F0;
  --grid-HeaderRow-text-color: darkblue;
  --grid-HeaderCell-background-color: lightgray;
  --grid-HeaderCell-background-color-marked: lightblue;
  --grid-BodySpace-background-color: #F8F8F8;
  --grid-BodySpace-scrollbar-color: darkgrey #F0F0F0;
  
  --grid-SelectedRow-background-color: lightblue;
  --grid-contenteditable-outline: 2px solid blue;
  --grid-ToolButton-background-color-hover: #C8C8C8;
} 

/* prevent padding or margin changes size */
* 
{ 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}

html, body 
{
	color: var(--text-color);
	background-color: var(--background-color);  
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-X: hidden;
	overflow-Y: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9.75pt;
	font-weight: normal;
}

.bodyContent
{
  width: 100%;
  margin: 0;
  padding: 0;
}

.space4toolBar
{
  margin: 0;
  padding: 0;
}

.space4toolBar .container
{
  padding: 0;
  margin: 0;
  border-top: 3px solid;
  overflow: hidden;
}

.space4grid
{
  margin: 0;
  padding: 0;
}

.space4tabs
{
  font-size: 95%;
  border-left: var(--space4tabs-border-left);
  border-top-left-radius: 3px 3px;
}

.space4tabs div
{
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--space4tabs-div-background-color);
  border-top: var(--space4tabs-div-border-top);
  border-right: var(--space4tabs-div-border-right);
  border-top-right-radius: 3px 3px;
}

.space4tabs div:hover
{
  background-color: var(--space4tabs-div-background-color-hover);
}

.space4tabs div[selected]
{
  background-color: var(--space4tabs-div-background-color-selected);
  font-weight: bolder;
}

.space4tabs span
{
  margin-left: 4px;
  margin-right: 4px;
  overflow: hidden;
  text-wrap: nowrap;
}

.space4subForm
{
  margin: 0;
  padding: 0;
}

.space4subForm .container
{
  padding: 0;
  margin: 0;
}

.popupMenu
{
	position: absolute;
	visibility: hidden;
    /*left: 50px;
    top: 40px;*/
    display: flex;
    flex-direction: column;
	background-color: lightgray;
	padding: 0;
}

.popupMenu button
{
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	min-width: 120px;
	overflow: hidden;
	text-wrap: nowrap;
	text-align: left;
}

.popupMenu hr
{
	height: 3px;
	min-height: 3px;
	max-height: 3px;
	margin: 0;
	padding: 0;
}

/* ===================================================================================================
 * gridControl
 * ===================================================================================================
 */

.grid
{
	background-color: var(--grid-background-color);
}

.grid [contenteditable]:focus 
{
	outline: var(--grid-contenteditable-outline);
}

.gridHeaderSpace
{
	/*background-color: var(--gridHeaderSpace-background-color);*/
	width: 100%;
	font-size: 95%;
	/* rand nur oben und unten leicht sichtbar */
	border-left-style: none;
	border-right-style: none;
    border-top-style: solid;
    border-bottom-style: solid;
	border-color: var(--grid-background-color); /* wie Hintergrund */
	border-top-color: var(--grid-background-color); /* wie Hintergrund */

	/* enable overflow without scrollbar */
	overflow: scroll;
	scrollbar-width: none;  /* Firefox */
	&::-webkit-scrollbar {
		display: none; /* Safari and Chrome */
	}
}

.gridHeaderContainer /* table */
{
	width: 100%;

	/* table styles */
	display: block; /* table; */
	border-collapse: inherit; /*separate*/
	text-indent: initial;
	border-spacing: inherit; /* 2px */
	border-color: inherit; /* gray */
}

.gridHeaderRow /* hr */
{
	display: flex;
	flex-direction: row;
	height: 24px;
	padding-left: 1px;
	color: var(--grid-HeaderRow-text-color);

	/* hr */
	overflow: inherit; /* hidden;*/
	border-style: inherit; /* inset; */
	border-width: 0; /* 1px; */
	margin-block-start: inherit; /* 0.5em; */
    margin-block-end: inherit; /*0.5em; */
    margin-inline-start: inherit; /* auto; */
    margin-inline-end: inherit; /* auto;*/
}

.gridHeaderCell
{
	cursor: cell;
	display: flex;
	justify-content: start;
	background-color: var(--grid-HeaderCell-background-color);
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-right: 1px;
	border-right: 1px;
	border-color: blue;
	overflow: hidden;

	/* td */
	/* vertical-align: inherit; */
}

.gridHeaderCell[marked]
{
	background-color: var(--grid-HeaderCell-background-color-marked);
}

.gridBodySpace
{
	position: absolute;
	width: 100%;
	padding-top: 1px;
	overflow: scroll;
	background-color: var(--grid-BodySpace-background-color);
	scrollbar-color: var(--grid-BodySpace-scrollbar-color);
}

.gridBodyContainer /* table */
{
	/* table styles */
	display: block; /* table; */
	border-collapse: inherit; /*separate*/
	text-indent: initial;
	border-spacing: inherit; /* 2px */
	border-color: inherit; /* gray */
}

.gridBodyRow
{
	display: flex;
	flex-direction: row;
	height: 24px;
	padding-left: 1px;
}

.gridSelectedBodyRow .gridBodyCell
{
	background-color: var(--grid-SelectedRow-background-color);
}

.gridBodyCell
{
	display: flex;
	justify-content: center;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 4px;
	margin-bottom: 1px;
	margin-right: 1px;
	border-right: 1px;
	border-color: blue;
	overflow: hidden;
	text-wrap: nowrap;
}

.gridMenuSpace
{
	background-color: var(--grid-background-color);
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px 8px;
}

.gridMenuSpace img
{
}

.gridMenuSpace img:hover
{
	background-color: var(--grid-ToolButton-background-color-hover);
}

.gridToolSpace
{
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.gridToolSpacePart
{
	display: flex;
	flex-direction: column;
}

.gridToolSpacePart img
{
}

.gridToolSpacePart img:hover
{
	background-color: var(--grid-ToolButton-background-color-hover);
}

/* ===================================================================================================
 * bookmarkControl
 * ===================================================================================================
 */

.bookmark
{
	cursor: pointer;
    caret-color: transparent;
	background-color: #E0E0E0;
  	border-top: 1px solid #F0F0F0;
  	border-left: 1px solid #F0F0F0;
  	border-right: 1px solid #A0A0A0;
  	border-bottom: 1px solid #A0A0A0;
}

.bookmark:focus
{
    caret-color: transparent;
	background-color: #E0E0E0;
  	border-top: 1px solid #A0A0A0;
  	border-left: 1px solid #A0A0A0;
  	border-right: 1px solid #F0F0F0;
  	border-bottom: 1px solid #F0F0F0;
}

/* ===================================================================================================
 * booleanControl
 * ===================================================================================================
 */

.boolean
{
	cursor: pointer;
    caret-color: transparent;
}

/* ===================================================================================================
 * labelControl
 * ===================================================================================================
 */

.container .label
{
	display: block;
	font-size: 90%;
    caret-color: transparent;
	cursor: default;
	padding: 0;
	margin: 0;
	margin-top: 2px;
	text-wrap: nowrap;
}

.gridBodyRow .static
{
    caret-color: transparent;
	cursor: default;
}

/* ===================================================================================================
 * groupBoxControl
 * ===================================================================================================
 */

.container .groupBox
{
	display: block;
	font-size: 80%;
    caret-color: transparent;
	cursor: default;
	padding: 0;
	padding-top: 2px;
	padding-left: 2px;
	padding-right: 2px;
	margin: 0;
	overflow: hidden;
	border-style: outset;
	border-width: 1px;
}

.groupBox hr
{
	margin: 0;
	margin-top: 1px;
	padding: 0;
}

/* ===================================================================================================
 * treePictureControl
 * ===================================================================================================
 */

.gridBodyRow .treePicture
{
    caret-color: transparent;
	cursor: pointer;
	justify-content: start;
}

/* ===================================================================================================
 * editControl
 * ===================================================================================================
 */

.container .edit
{
	display: flex;
	justify-content: start;
	padding: 0;
	margin: 0;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	overflow: hidden;
	text-wrap: nowrap;
	background-color: #E0E0E0;
	border: 1px solid black;
}

.container .edit[contenteditable]
{
	background-color: white;
}

.container .edit[contenteditable]:focus 
{
	outline: 2px solid blue;
}

/* ===================================================================================================
 * textBoxControl
 * ===================================================================================================
 */

.container .textBox
{
	position: absolute;
	display: flex;
	justify-content: start;
	padding: 0;
	margin: 0;
	overflow-Y: scroll;
	overflow-X: scroll;
	background-color: green;
	border: 1px solid black;
}

.container .textBoxContent
{
	position: absolute;
	display: flex;
	justify-content: start;
	padding: 6px;
	margin: 0;
    font-family: Courier New;
	font-size: 12pt;
	outline-style: none;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.container .textBoxContent:focus
{
	background-color: lightblue;
}

/* ===================================================================================================
 * pushButtonControl
 * ===================================================================================================
 */

.container .pushButton
{
	overflow: hidden;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* ===================================================================================================
 * iconButtonControl
 * ===================================================================================================
 */

.container .iconButton
{
	background-color: inherit;
	cursor: pointer;
	border: 0;
}

.container .iconButton[disabled]
{
	cursor: inherit;
	opacity: 0.5;
}

/* ===================================================================================================
 * checkboxControl
 * ===================================================================================================
 */

.container .checkbox
{
	display: flex;
	/*justify-content: space-between;*/
	padding: 0;
	margin: 0;
}

.container .checkbox span
{
	font-size: 90%;
    caret-color: transparent;
	cursor: default;
	padding: 0;
	margin: 0;
	margin-top: 2px;
	overflow: hidden;
	text-wrap: nowrap;
}

.container .checkbox input
{
	/*background-color: inherit;*/
	padding: 0;
	margin: 0;
	cursor: pointer;
	/*border: 0;*/
}

.container .checkbox span[disabled]
{
	opacity: 0.5;
}


/* ===================================================================================================
 * checkboxControl
 * ===================================================================================================
 */

.container .radioButton
{
	display: flex;
	/*justify-content: space-between;*/
	padding: 0;
	margin: 0;
}

.container .radioButton span
{
	font-size: 90%;
    caret-color: transparent;
	cursor: default;
	padding: 0;
	margin: 0;
	margin-top: 2px;
	overflow: hidden;
	text-wrap: nowrap;
}

.container .radioButton input
{
	/*background-color: inherit;*/
	padding: 0;
	margin: 0;
	cursor: pointer;
	/*border: 0;*/
}

/*
.container .radioButton span[disabled]
{
	cursor: inherit;
	opacity: 0.5;
}
*/

/* ===================================================================================================
 * webViewControl
 * ===================================================================================================
 */

.container .webView
{
	background-color: white;
}
