header('Content-type: text/css');
/* 
 * CSS Document 
  transition: max-height 0.3s, padding 0.3s;
  transition: all .35s;
 * https://jqueryui.com/demos/
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 */
html, body {
}
/* 
 * **************
 * SIZE VARIABLES 
 */
:root {
}
.box {
  border-color: var(--themeDarker);
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  background: var(--white);
  }
.box_head {
  border-color: var(--themeDarker);
  }
.box_menu {
  border-color: var(--themeDarker);
  }
.box_footer {
  border-color: var(--themeDarker);
  }
.box_pre_head {
  border-color: var(--themeDarker);
  }
.box:hover {
/*  background-color: var(--selectedHover); */
  }

/*  box main structure
-------------------------------------------------------------- */
.box {
/*  width: 98%; */
/*  width: 47%; */
  display: flex;
  flex-direction: column;
  float: left;
  margin: var(--boxMargin);
  font-size: 1.1em;
  line-height: 1.0em;
  border-image: none;
  border-radius: 0.4em;
  border-width: 0.2em;
  border-style: solid;
  outline: none ;
  box-shadow: 0 0.4em 0.5em 0 var(--blackFour), 0 0.4em 1em 0 var(--blackThree);
  max-height: min( 54em , 80vh );

  min-width: 50em;
  max-width: min( 40em , 80vw );
  overflow-y: auto;
/*  padding: 0.3em; */
}
.box .box {
  margin: 0em;
  max-height: min( 54em , 80vh );
  min-width: 31em;
  max-width: min( 50em , 80vw );
  overflow-y: auto;
/*  padding: 0.3em; */
}
.box .tabs > section {
  width: calc( 100% - 0.018em );
  padding: 0.015em 0em 0em 0.015em;
}
.box_head {
  width: calc( 100% - 1.8em );
  padding: 0.6em;
  text-align:center;
  float: left;
  border-style: solid;
  border-width: 0em 0em 0.15em 0em;
}
.box_menu {
  width: calc( 100% - 1.8em );
  margin: 0em;
  float: left;
  border-style: dotted;
  border-width: 0.15em 0em 0.15em 0em;
}
.box_content {
  width: calc( 100% - 1.8em );
  padding: 0.3em ; /*margin*/
  float: left;
  overflow-y: auto;
  max-height: min( 44em , 60vh ) !important;
}
.box_content .box_menu {
  width: calc(100% - 0.0em);
}
.box_footer {
  width: calc( 100% - 1.8em );
  min-height: 1.4em;
  margin: auto auto 0.5em;
  float: left;
  border-style: solid;
  border-width: 0.15em 0em 0em 0em;
}
.box_pre_head {
  display: none;
  float: left;
  width: 100%;
  border-style: solid;
  border-width: 0em 0em 0.15em 0em;
}
/*
.box > .cell ,
.box_head > .cell ,
.box_content > .cell ,
.box_footer > .cell {
	*/
.box .cell {
	/*line-height: 1.4em; */
	overflow: auto;
	border: none;
}
.box .cell:not(.box_footer):not(.box_footer .cell) {
	margin: var(--boxMargin);
}
.box textarea {
  width: 70%;
/*  width: 47%; */
}
.box ~ [id^="n"]{
	background-color: var(--greyLighter) ;
	box-shadow: 0 0.4em 0.5em 0 var(--blackFour), 0 0.4em 1em 0 var(--blackThree);
  }
.box.data.new {
  background-color: var(--greyLighter);
  box-shadow: none ;
  }
.boxLabel {
  margin-right: 1em ;
  }
.box .boxInput {
  left: 10em ;
  position: sticky;
  }
.box > .box_head > .cell ,
.box > .box_footer > .cell {
  float: left;
  }