body {
  font-family: Consolas,monaco,monospace;
  /*font-family: "Courier New", Courier, monospace;*/
  background: white;
  margin: 0;
  font-size: 12px;
}

button,
input[type="text"],
textarea,
option,
select {
	font-family: Consolas,monaco,monospace;
	font-size: 12px;
}


input[data-type="calendar"] {
	font-family: Consolas,monaco,monospace;
	font-size: 12px;
	max-width: 10em;
	text-align: center;
}


a {
	color: black;
}
a:hover {
  color: #666;
}

h4 {
  margin: 0.5em;
  margin-left: 0;
}

.titlecontainer {
	margin-left: 16px;
}
.title {
	font-size: 52px;
	font-weight: bolder;
	font-family: 'Roboto', sans-serif;
	color: white;
}
.subtitle {
	margin-top: 0.5em;
	font-size: 24px;
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
	color: white;
}



.separator {
	flex-grow: 2;
	min-width: 1em;
}

#separator {
	flex-grow: 2;
	min-width: 1em;
}

#separator-min {
	flex-grow: 2;
}

.bordered {

	border: 1px solid black;
	border-radius: 4px;
}


.flexbox {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.flexcol {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-direction: column;
}

.flexstep {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	width: 100%;
	padding: 0.5em 0em;
	justify-content: space-between;
}


.flexcontrol {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 8px 0px;
	/*>>>>>>> origin/cassandra*/
	width: 100%;

}

.flexcontrol button {
	
	font-size: 24px;
	height: 1em;
	width: 1em;
	
	margin: 0 4px;
	padding: 0;

	cursor: pointer;
	white-space: normal;

	background-color: #FFF0;
	border: none;
	border-radius: 2px;

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.flexcontrol button:disabled,
.flexcontrol button[disabled]{
	opacity: 0.3;
}

.flexcontrol button:hover,
.flexcontrol button[hover] {

	box-shadow: 0 0 4px 0px #4c4c4c59;
}

.flexcontrol button > img {
	cursor: pointer;
	height: 100%;
	width: 100%;
}



.step-controlbox {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-direction: column;
	justify-content: space-around;

	border: 1px solid #333;
	border-radius : 4px;

	padding: 0.5em;
	margin: auto 0;

	min-width: 12em;
}


/* *** NAVBAR STUFF *** **************************************************** */
/* Add a black background color to the top navigation */
.navbar {
	
	margin: 0;
	top: 0;

	width: 100%;
	height: 5em;

	background-color: #333;
	color: white;

	position: fixed;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	z-index: 100;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	font-size: 12px;
}

/* chid divs are for clickable sections  */
.navbar > div {

	cursor: pointer;

	background-color: #444;
	text-align: center;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	height: 100%;
}

.navbar > div:hover,
.navbar > div[hover] {
	background-color: #888;
}

.navbar > div.active {
	background-color: #666;
}

.navbar #separator {
	flex-grow: 2;
}

.navbar  img {
	height: 100%;
	margin: 0.2em;
}

.navbar  img.halfimg {
	height: 50%;
	margin: unset;
	cursor: pointer;
}

.navbar  img.halfimg:hover,
.navbar  img.halfimg[hover] {
	background-color: #888;
}

.navbar  img.clickImg:hover,
.navbar  img.clickImg[hover] {
	background-color: #888;
}



.navbar > div.nobg {

	background-color: unset;
	cursor: unset;
}


/* *** END OF NAVBAR *** **************************************************** */

/* *** NAVBAR FOR NOTEBOOKS STUFF *** *************************************** */
/* Add a black background color to the top navigation */
.navbar-nb {
	
	margin: 0;
	width: 100%;
	height: 5em;
	min-height: 5em;
	/*z-index: 100;*/

	background-color: #333;
	color: white;

	overflow: hidden;
	text-align: center;
	text-decoration: none;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	font-size: 12px;
}

button.navbutton {

	margin: 0 4px;
	padding: 0;

	cursor: pointer;
	/*font-family: Consolas,monaco,monospace;*/
	white-space: normal;

	background-color: #FFF0;
	border: none;
	/*border-radius: 0px;*/

	height: 100%;

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
button.navbutton-half {

	margin: 0 4px;
	padding: 0;

	cursor: pointer;
	/*font-family: Consolas,monaco,monospace;*/
	white-space: normal;

	background-color: #FFF0;
	border: none;

	height: 50%;

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

button.navbutton:hover,
button.navbutton-half:hover,
button.navbutton[hover],
button.navbutton-half[hover] {

	background-color: #FFFFFF30;
}


button.navbutton:disabled,
button.navbutton-half:disabled,
button.navbutton[disabled],
button.navbutton-half[disabled]{
	opacity: 0.3;
}

button.navbutton > img,
button.navbutton-half > img {
	cursor: pointer;
	height: 100%;
	min-width: 0;
	flex-grow: 1;
}

button.navbutton > span {
	color: #EEE;
	margin: 0 0.5em;
}




/* *** END OF NAVBAR *** **************************************************** */
/* *** NEW NAVBAR *** ******************************************************* */

.navbar2 {

	
	overflow: hidden;
	position: fixed;
	margin: 0;

	width: 100%;
	height: 3.3em;
	z-index: 100;

	background-color: #333;
	
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	align-items: center;
}

.navbar div.clickdiv {

	height: 100%;
	line-height: 3.3em;
	text-align: center;
	text-decoration: none;

	background-color: #444;
	cursor: pointer;

	padding: 0em 0.5em;

}

.navbar div.clickdiv:hover,
.navbar div.clickdiv[hover] {
	background-color: #555;
}

.navbar2 div.clickdiv:active,
.navbar2 div.clickdiv[active] {
	background-color: #666;
}



.navbar img.small {
	height: 60%;
	cursor: pointer;
	vertical-align: middle;
}


/* ************************************************************************* */
/* *** FOOTER *** */

.footer-new {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 2em;
	z-index: 100;

	background-color: #333;
	color: white;

	text-align: center;
	font-size: 12px;

	justify-content: flex-end;
}

.footer-new img {
	cursor: pointer;
	height: 90%;
	margin: 0.2em;
}



.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2em;
  background-color: #333;
  color: white;
  text-align: center;
  z-index: 100;

  font-size: 12px;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.footer > div {
	cursor: pointer;
	text-align: center;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	height: 100%;
	padding: 0em 0.5em;
}

.footer img {
	height: 90%;
	margin: 0.2em;
}
/* *** END OF FOOTER *** *************************************************** */



/*** NEW SPINNER *** *********************************************************/

@keyframes toolspinner {
	to {transform: rotate(360deg);}
}
@-webkit-keyframes toolspinner {
	to {transform: rotate(360deg);}
}

.toolspinner{
	position: relative;
	width: 1.5em;
	height: 1.5em;
}

.toolspinnerlarge{
	position: relative;
	width: 2.5em;
	height: 2.5em;
}

.toolspinner > div,
.toolspinnerlarge > div {
	display: none;
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	margin: 0;
	border-radius: 50%;
	border-top: 2px solid #000;
	border-right: 2px solid transparent;
	animation: toolspinner .6s linear infinite;
}



.navspinner{
	position: relative;
	width: 2.5em;
	height: 2.5em;
}
.navspinner > div {
	display: none;
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	margin: 0;
	border-radius: 50%;
	border-top: 4px solid #ffffff;
	border-right: 4px solid transparent;
	animation: toolspinner .6s linear infinite;
}

.elementspinner{
	position: relative;
	width: 5em;
	height: 5em;
}

.elementspinner > div {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	margin: 0;
	border-radius: 50%;
	border-top: 6px solid #000;
	border-right: 6px solid transparent;
	animation: toolspinner .6s linear infinite;
}

/*****************************************************************************/




.label {
	margin-right: 1em;
}
.em5{width:5em;}
.em8{width:8em;}


/* *** DASHBOARD *** ******************************************************* */

[dashboard-tab]{
	display: none;
}


div#dashboard {
	width:100%; 
	height:100%;
}

div#dashboard #mainbox {
	position: absolute;
	align-items: flex-start;
	width: 100%;
	top: 0;
	bottom: 3em;
}

div#dashboard div#menu {
	padding: 1em;
	margin: 0;
	min-width: 10em;
}

div#dashboard div#menu div[data-ext]>img,
div#dashboard div#menu div[tab-selector]>img {
	margin-right: 1em;
}

div#dashboard div#tabcontainer {
	padding: 0em;
	margin: 0;
	margin-left: 1em;
	flex-grow: 2;
	height: 100%;
	overflow-y: auto;
	overflow-x: auto;
}

div#dashboard [data-ext~="tab"] {
	padding: 1em 1em;
	margin: 0;
}

div#dashboard #menu > div {
	align-items: center;
	cursor: pointer;

}
div#dashboard #menu > div:hover,
div#dashboard #menu > div[hover] {
	background: #EEE;	
}

div#dashboard #menu > div.active {
	background: #DDD;	
}

div#dashboard [data-ext~="tab"] h2 {
	margin-right: 5em;
}


/* *** GENERIC STUFF IN THE PANELS *** ************************************ */


.tagbox, .kvpbox{
	white-space:nowrap;
	position:relative;
	margin:0 0.2em 0 1.5em;

	height:2.6em;
	border-radius: 0 5px 5px 0;

	background:#fff5de;
	border: 1px solid #C7D2D4;
	border-left: 0;
	color:#999;
}


.tagbox:before, .kvpbox:before{
	position: absolute;
	background: #fff5de;
	content: "";
	color: white;

	left: -0.9em;
	width: 1.7em;
	height: 1.7em;
	transform: rotate(45deg);
	border: 1px solid #C7D2D4;

	z-index: -1;
}

.tagbox[meta-partial], .kvpbox[meta-partial]{background:#ffdede;}
.tagbox[meta-partial]:before, .kvpbox[meta-partial]:before{background: #ffdede;}


.tagbox.atablemeta{
	height: 1.8em;
	padding-left: 0.8em;
}


.abswrapper {

	display: inline-block;
	position: absolute;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
}


[data-ext~="tab"] > div {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: baseline;
	padding: 0.2em 0;
}

[data-ext~="tab"] > div.centered {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 0.2em 0;
}

[data-ext~="tab"] > div.nobox {

	display: block;
	padding: 0;
}

[data-ext~="tab"] div.nobox {

	display: block;
	padding: 0;
}

[data-ext~="tab"] th.left {
	text-align: left;
}

[data-ext~="tab"] td.center {
	text-align: center;
}

[data-ext~="tab"] #addelement {
	padding: 0;
	cursor: pointer;
	justify-content: flex-end;
	align-items: center;
}

/* *** ACCOUNT PANEL *** *************************************************** */

#account[data-ext~="tab"] #home[data-ext~="subpanel"] .formalized > div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 0.3em 0px;
}

#account[data-ext~="tab"] #home[data-ext~="subpanel"] .formalized .label {
	width: 10em;
}



#groups[data-ext~="tab"] .clickImg {
	height: 2em;
}


#account-other[data-ext~="tab"] > #panel-user-info > div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: baseline;
	padding: 8px 0px;
	width: 100%;
}


/* *** BIBLIOGRAPHY PANEL *** ********************************************** */
[data-author] > div {
	margin-left: 3em;
}
[data-author] > div > span {
	min-width: 10em;
}
[data-author] > div > input {
	min-width: 20em;
}



/* *** DASHBOARD GENERICS *** ********************************************** */

div#dashboard div[data-ext~="container"] {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

div#dashboard div[data-ext~="container"] div#controlwrap {
    top: 0;
    height: 4em;
    border-bottom: 1px solid black;
}

div#dashboard div[data-ext~="container"] div#controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    height: 100%;
    margin: 0em 1em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

div#dashboard div[data-ext~="container"] div[data-ext~="subpanel"] {
    top: 4em;
    bottom: 0;
    overflow: auto;
}


div#dashboard div[data-ext~="container"] div.formalized > div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 0.3em 0px;
	width: 100%;
}

.formalized .label {
	width: 10em;
}


/* *** SCRIPTS MASTER PANEL *** ******************************************** */

div#dashboard #scripts[data-ext~="tab"] {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

div#dashboard #scripts[data-ext~="tab"] div#controlwrap {
    top: 0;
    height: 4em;
    border-bottom: 1px solid black;
}

div#dashboard #scripts[data-ext~="tab"] #controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    height: 100%;
    margin: 0em 1em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

div#dashboard #scripts[data-ext~="tab"] .fixpanel {
    top: 4em;
    bottom: 0;
    overflow: auto;
}

div#dashboard #scripts[data-ext~="tab"] span.label {
	width: 8em;
}






/* *** GROUPS/HOME PANEL *** *********************************************** */
[data-type="userbox"]:hover,
[data-type="userbox"][hover] {
	background-color: #EEE;
}

#groups[data-ext~="tab"] #create[data-ext~="subpanel"] .formalized span.label {
	width: 9em;
}

#groups[data-ext~="tab"] #home[data-ext~="subpanel"] .formalized span.label {
	width: 9em;
}


/* *** PROJECTS PANEL *** ************************************************** */
#projects[data-ext~="tab"] #create[data-ext~="subpanel"] .formalized span.label {
	width: 9em;
}


/* *** NOTEBOOKS PANEL *** ************************************************* */

#notebooks[data-ext~="tab"] [data-linker="1"] {
	cursor: pointer;
}

#notebooks[data-ext~="tab"] tbody tr:hover,
#notebooks[data-ext~="tab"] tbody tr[hover] {
	background-color: #DFD;
}

#notebooks[data-ext~="tab"] #create[data-ext~="subpanel"] .formalized span.label {
	width: 8em;
}


/* *** MESSAGE PANEL *** *************************************************** */


div#dashboard #messages[data-ext~="tab"] div#controlwrap {
	top: 0;
	height: 4em;
	border-bottom: 1px solid black;
}


div#dashboard #messages[data-ext~="tab"] {
	position: relative;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}


div#dashboard #messages[data-ext~="tab"] #controls {
	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	height: 100%;
	margin: 0em 1em;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
}

#messages[data-ext~="tab"] .ctrl {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	border: 1px solid black;
	border-radius: 4px;

	padding: 0.2em 0.5em;
	margin: 0em 0.5em;
	cursor: pointer;
}
#messages[data-ext~="tab"] .ctrl:hover,
#messages[data-ext~="tab"] .ctrl[hover] {
	background-color: #EEE;
}

#messages[data-ext~="tab"] .ctrl.selected{
	background-color: #DDD;
}


div#dashboard #messages[data-ext~="tab"] #listbox {
	top: 4em;
	bottom: 0;
	overflow: auto;
}

div#dashboard #messages[data-ext~="tab"] #list {
	
	display: grid;
	margin-top: 1em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

#messages[data-ext~="tab"] .messagebox {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;

	min-width: 15em;
	max-width: 20em;

	padding: 0;
	border: 1px solid #444;
	border-radius: 4px;
	margin: 0.2em 0.2em;
}

/* ************************************************************************* */

/* *** ADMIN  PANEL *** **************************************************** */

#admin[data-ext~="tab"] .formalized span.label {
	width: 8em;
}

/* *** INVENTORY PANEL *** ************************************************* */
#inventory[data-ext~="tab"] #inv-equip > div {
	margin-bottom: 2em;
}


/* *** SEARCH PANEL *** **************************************************** */

div#dashboard #search[data-ext~="tab"] div#controlwrap {
	top: 0;
	height: 4em;
	border-bottom: 1px solid black;
}


div#dashboard #search[data-ext~="tab"] {
	position: relative;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}


div#dashboard #search[data-ext~="tab"] #controls {
	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	height: 100%;
	margin: 0em 1em;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
}

#search[data-ext~="tab"] .ctrl {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	border: 1px solid black;
	border-radius: 4px;

	padding: 0.2em 0.5em;
	margin: 0em 0.5em;
	cursor: pointer;
}
#search[data-ext~="tab"] .ctrl:hover,
#search[data-ext~="tab"] .ctrl[hover] {
	background-color: #EEE;
}

#search[data-ext~="tab"] .ctrl.selected{
	background-color: #DDD;
}


div#dashboard #search[data-ext~="tab"] .fixpanel {
	top: 4em;
	bottom: 0;
	overflow: auto;
}

.searchpanel {
	margin: 0.5em;
}

div#dashboard #search[data-ext~="tab"] #list {
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	align-content: stretch;
	justify-content: space-evenly;
	margin-top: 1em;
}



div#dashboard #search[data-ext~="tab"] #filters [data-filter]>label {
	width: 10em;
}



/* ************************************************************************* */






/* *** BUTTONS *** ********************************************************* */

.gbutton {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	padding: 0.2em 0.5em;
	margin: 0 0.5em;
	
	cursor: pointer;
	color: white;
	/*font-family: Consolas,monaco,monospace;*/

	background-color: #333;
	border: none;
	border-radius: 4px;

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.gbutton:hover,
.gbutton[hover] {

	background-color: #888;
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

.gbutton.selected {

	background-color: #666;
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

.gbutton:disabled,
.gbutton[disabled]{

	background-color: #AAA;
	color: #666;
}

.gbutton > img {
	padding-right: 0.5em;
	height: 2em;
}



.wbutton {

	margin: 0 4px;
	padding: 0;

	cursor: pointer;
	/*font-family: Consolas,monaco,monospace;*/
	white-space: normal;

	background-color: #FFF0;
	border: none;
	border-radius: 2px;

	height: 1.5em;
	width: 1.5em;
	min-width: 1.5em;
	
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.wbutton:disabled,
.wbutton[disabled]{
	opacity: 0.3;
}

.wbutton:hover,
.wbutton[hover] {

	box-shadow: 0 0 4px 0px #4c4c4c59;
}

.wbutton > img {
	cursor: pointer;
	min-width: 1em;
	height: 100%;
	width: 100%;
	font-size: unset;
}


.fillheight {
	height: 100%;
	width: unset;
	margin: 0;
}


.addbutton {
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	margin: 0 4px;
	padding: 0.5em;

	cursor: pointer;
	/*font-family: Consolas,monaco,monospace;*/
	white-space: normal;

	background-color: #FFF0;
	border: 1px solid black;
	border-radius: 2px;

	height: 3.5em;

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.addbutton:disabled,
.addbutton[disabled]{
	opacity: 0.3;
}

.addbutton:hover,
.addbutton[hover] {

	box-shadow: 0 0 4px 0px #4c4c4c59;
}

.addbutton > img {
	cursor: pointer;
	height: 100%;
	min-width: 0;
	flex-grow: 1;
}






/* ************************************************************************* */

label[type="checkbox"] {
	display: inline-flex;
	align-items: center;
}

/* *** CUSTOM SINGLE SLIDER *** ******************************************** */


label[type='slider'] {
	margin: 0.5em 0em;
}

label[type='slider'] span#value {
	min-width: 2em;
}
label[type='slider'] div {
	flex-grow: 2; 
	margin: 0em 1em;
}

/* ************************************************************************* */
/* *** CUSTOM FILE SELECTOR *** ******************************************** */

label[type="file"] {
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	align-items: center;

	border: 2px solid #666;
	border-radius: 4px;
	padding: 0.5em;
	cursor: pointer;
}

input[type="file"].labcore  {
	width: 0.1px;
	height: 0.1px;
}

input[type="file"].labcore:focus + label {
	box-shadow: 0 0 3px 1px #CCC;
}
label[type="file"]:hover {
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

label[type="file"] > svg {
	height: 1.5em;
	width: 1.5em;
	margin: 0em 1em;
}

/* ************************************************************************* */
/* *** CUSTOM CHECKBOX *** ************************************************* */
input[type='checkbox'].labcore {
	
	position: absolute;
	/*left: 0;
	top: 0;*/
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
}

input[type='checkbox'].labcore ~ span.checkbox {
	
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background: url(/static/imgs/icon.checkbox.false.svg) center no-repeat;
	background-size: 100%;
	cursor: pointer;
}
input[type='checkbox'].labcore ~ span.smallcheckbox {
	
	width: 1rem;
	height: 1rem;
}

input[type='checkbox'].labcore ~ div.checkbox {
	
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background: url(/static/imgs/icon.checkbox.false.svg) center no-repeat;
	cursor: pointer;
}


input[type='checkbox'].labcore ~ #label {
	padding-right: 1em;
	white-space: nowrap;
}

input[type='checkbox'].labcore:hover ~ .checkbox {
	/*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);*/
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

/* Styles for the focus state of the custom checkbox */
input[type='checkbox'].labcore:focus ~ .checkbox {
	/*box-shadow: 0 0 0 2px rgba(0, 0, 200, 0.25);*/
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

/* Styles for the checked state of the custom checkbox */
input[type='checkbox'].labcore:checked ~ .checkbox {
	background: url(/static/imgs/icon.checkbox.true.svg) center no-repeat;
	background-size: 100%;
}

input[type='checkbox'].labcore:disabled ~ .checkbox {
	filter: invert(60%);
}


.chklabel {

	flex-grow: 2;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}










/* ************************************************************************* */
/* *** CUSTOM JQUERY UI SLIDER *** ***************************************** */
.ui-slider {
	background: #F0F0F0;
	border-radius: 2px;
	border: 1px solid #BBB;
}
.ui-slider-range {
	background: #666;
}

.ui-slider-horizontal .ui-slider-handle {
	top: -33%;
	background: #DDD;
	border-radius: 4px;
	border: 1px solid #666;
}

/* ************************************************************************* */
/* *** CUSTOM SELECT BOX *** *********************************************** */
/*select.labcore {
	position: relative;
	font-family: Consolas,monaco,monospace;
}*/
select.labcore select { display: none; }


label[type="select"].labcore {
	position: relative;
	display: inline-block;
	/*margin: 0em 0.5em;*/
}

label[type="select"].labcore select {

	display: inline-block;
	width: 100%;

	border: 2px solid #666;
	border-radius: 4px;

	padding: 4px 1em 3px 5px;
	margin: 0;
	font: inherit;
	outline:none; /* remove focus ring from Webkit */
	line-height: 1.2;
	background: #f8f8f8;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

label[type="select"].labcore select::-ms-expand { 
	display: none; /* remove default arrow in IE 10 and 11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
	label[type="select"].labcore select {
		background:none\9;
		padding: 5px\9;
	}
}

/* Since we removed the default focus styles, we have to add our own */
label[type="select"].labcore select:focus {

	box-shadow: 0 0 3px 1px #CCC;
}
    
/* Select arrow styling */
label[type="select"].labcore:after {
	content: "▼";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0 7px;

	color: black;
	font-size: 80%;
	line-height: 30px;
	
	pointer-events: none;
}

.no-pointer-events label[type="select"].labcore:after {
	content: none;
}


#interface-line2D label[type="select"].labcore, 
#interface-plot2D-settings label[type="select"].labcore {
	width: 100%;
}

/* ************************************************************************* */
/* *** CUSTOM INPUT FIELD *** ********************************************** */

input[type="text"].error {
	border: 2px solid red;
}

input[type="text"],
input[type="password"],
input[data-type="calendar"] {

	/*font: inherit;*/
	padding: 0.2em;
	/*margin: 0em 0.5em;*/

	border: 2px solid #666;
	border-radius: 4px;

	outline:none;
	background: #f8f8f8;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[data-type="calendar"]:focus {
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[data-type="calendar"]:disabled {
	background: #DDD;
	border: 2px solid #AAA;
}



textarea {

	font: inherit;
	padding: 0.2em;
	/*margin: 0em 0.5em;*/

	border: 2px solid #666;
	border-radius: 4px;

	outline:none;
	background: #f8f8f8;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

textarea:focus {
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

/* ************************************************************************* */
/* *** INPUT NUMBER *** **************************************************** */
input[type="number"] {
	font: inherit;
	border: 2px solid #666;
	border-radius: 4px;
	padding: 4px 0em 3px 5px;
	margin: 0em;
}

input[type="color"] {
	font: inherit;
	border: 2px solid #666;
	border-radius: 4px;
	padding: 0.3em;
	margin: 0em;
}

/* ************************************************************************* */

.panelheading {

	font-weight: bold;
	/*font-variant: small-caps;*/
	margin: 0.2em 0em;
}





#interface-plot-settings td,
#interface-histogram-settings td {
	padding: 0em 0.5em;
	text-align: center;
}

#interface-plot-settings td input#color {width: 7em;}
#interface-plot-settings td input#width {width: 6em;}
#interface-plot-settings td input[type="text"] {font-size: 11px;}


#interface-plot-settings td table,
#interface-histogram-settings td table {width: 100%;}


#interface-plot2D-settings tr td label[type="select"].labcore { width: 100%; }




/* *** PARAMETER REFERENCES *** ******************************************** */
div[data-obj="reftag"] {
	display: -webkit-inline-flex;
	display: inline-flex;
}

div[data-obj="reftag"][data-type="parameter"] #btCtrl,
div[data-obj="reftag"][data-type="META"] #btCtrl {
	font-size: 16px;
}

div[data-obj="reftag"][data-type="parameter"] #refctrl,
div[data-obj="reftag"][data-type="META"] #refctrl {
	display: -webkit-inline-flex;
	display: inline-flex;
}

#refctrl #units {
	width: 8em;	
}

#refctrl #pre,
#refctrl #post {
	width: 3em;	
}

/* ************************************************************************* */


div[data-obj="reftag"][data-type="BIB"] {
	white-space: normal;
}
div[data-obj="reftag"][data-type="BIB"] #output {
	display: inline-flex;
	cursor: pointer;
}

.bibref {
	cursor: pointer;
	text-decoration: underline;
}


/* *** TABLES WITH FIXED HEADER *** **************************************** */

.tablediv {
	flex-grow: 2;
	font-size: 12px;
}

.tablediv .tablereg {
	
	position: relative;
	display: block;
	min-height: 15em;
}

.tablediv .tablereg .tablewrap {
	display: block;
	position: absolute;
	overflow-y: auto;
	overflow-x: auto;
	max-width: 98%;
	max-height: 100%;
}


.tablediv .tablereg .tablewrap table {
	
	border-collapse: collapse;
	border: 1px solid black;
	
}


.tablediv .tableheader {
	position: sticky;
	top: 0;
	display: block;
}

.tablediv thead {
	background: #DDDDDD;
	border: 1px solid black;
}

.tablediv .tablebody {
	float: left;
	height: 100%;
	width: inherit;
	padding-right: 16px;
}

.tablediv th,
.tablediv td {
	min-width: 10em;
	max-width: 10em;

	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

}


.tablediv table td + td { border-left:1px solid black; }
.tablediv table th + th { border-left:1px solid black; }
/*.tablediv table tr.rowborder td {
	border-bottom:1pt solid black;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}
*/


/* *** SIMPLE TABLES *** */
table.simple {
	/*font-size: 12px;*/
	border-collapse: collapse;
}
table.simple thead {
	background: #DDDDDD;
}
table.simple th {
	border-bottom: 1px solid black;
}
table.simple th,
table.simple td {
	text-align: left;
	padding: 0.5em 1em;
}

table.simple tbody tr:nth-child(odd) {
	background: #F0F0F0;
}


table.stickhead {
	border-collapse: collapse;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/*right: 0;*/
}
table.stickhead thead {
	background: #EEE;
}
table.stickhead th {
	
	position:  sticky;
	background: #EEE;

	/*border-bottom: 1px solid black;*/
	padding: 0.5em 1em;

	text-align: center;

	z-index: 2;
	box-shadow: 0 1px 0 black;
}
table.stickhead tr.name th {
	top: 0;
}
table.stickhead tr.unit th {
	top: 1.8em;
}
table.stickhead td {
	text-align: left;
	padding: 0.3em 1em;
}
table.stickhead tbody tr:nth-child(odd) {
	background: #F5F5F5;
}
table.stickhead tbody tr:nth-child(1) {
	border-top: 1px solid black;
}

/* ************************************************************************* */

/* *** PROGRESS BAR *** **************************************************** */

#progress {
	opacity: 1;
	background-color: #EEE;
	height: 30%;
	margin-right: 1em;
}
#progress.fade {
	opacity: 0;
	transition: opacity 2.0s linear;
}

#progress > #bar {
	width: 0%;
	height: 100%;
	background-color: #666;
}
#progress > #bar.right {
	float: right;
}


/* ************************************************************************* */




.usr-link {
	text-decoration: underline;
	cursor: pointer;
}




.pagecontent {

	position: absolute;
	top: 5em;
	bottom: 2em;
	left: 0;
	right: 0;
}


.thinline {

	height: 1px;
	border-width: 0;
	color: black;
	background-color: #dddddd;
	margin: 1em;
}

.vseparator {
	background-color: #0002;
	width: 1px;
	height: 100%;
	margin-left: 0.5em;
	margin-right: 0.5em;
}



.error {
  color: red;
}

.flexcontainer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 4px;
}

.container-vertical {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	align-items: flex-start;
	justify-content: flex-start;
	-webkit-flex-flow: column;
	flex-flow: column;

	margin: 4px;
}

/* For panels in the center of the screen - like login/register/recovery */
.centerpanel {
  margin: auto;
  width: 40%;
  border: 1px solid #333;
  border-radius: 0px;
  box-shadow: 0 0 4px 0px #c1c1c1;
  padding: 10px;
  border-radius: 4px;
}

.panel {

	border: 2px solid #333;
	border-radius : 4px;
	box-shadow: 0 0 4px 0px #CCC;

	padding: 10px;
	margin: 10px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  overflow: auto;
  width: 50%;
  /*30em;*/
  /* height: 30%; */
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.interface {
	width: 98%;
	height: 98%;
	margin:0;
	padding: 0;
}


.interface  #iArea { margin: 1em; }



.interfacebox {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	margin: 0em 1em;
	flex-flow: column;
	height: inherit;
}


.flexrow {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: baseline;
	padding: 0.3em 0px;
}

.flexrow-centered {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 0.3em 0px;
}


.scrollbox-scroller {

	position: absolute;
	overflow: auto;

	top: 0;
	margin: 0;

	width: 100%;
	height: 100%;
}


.centered {
  align-items: center;
}

.incenter {
  justify-content: center;
}

.small {
  font-size: 11px;
}

.icon {
  height: 2em;
}

.icon-inline {
  height: 1.2em;
}

.control-label {
  flex-basis: 30%;
  font-size: 12px;
}

.control-input {
	flex-basis: 70%;
	/*font-family: Consolas,monaco,monospace;*/
	flex-grow: 2;
	font-size: 12px;
}

.button-icon {
  height: 100%;
  display: inline-block;
}

.group-icon {
  height: 32px;
  //align-self: baseline;
  //vertical-align:middle;
  display: block;
}

.group-icon:focus {
  outline: none;
}


.unselectable {
  /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
  /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
  -moz-user-select: none;
  /* These user-select properties are inheritable, used to prevent text selection */
  -webkit-user-select: none;
  -ms-user-select: none;
  /* From IE10 only */
  user-select: none;
  /* Not valid CSS yet, as of July 2012 */
  -webkit-user-drag: none;
  /* Prevents dragging of images/divs etc */
  user-drag: none;
  outline: none;
}

.uselectable:focus {
  outline: none;
}

.nobg {
  background-color: transparent;
}

.nopad {
  padding: 0;
}

.userthumb {

	position: absolute;
	z-index: 1000; 
	left: 400px; 
	top: 100px;
	background-color: white;

	padding: 4px;
	border: 2px solid black;
	border-radius: 4px;
}
.userthumb > img {
	width: auto;
	height: auto;
	max-width: 64px;
	max-height: 64px;
	display: block;
}


.textbox {
  padding: 1em;
  text-align: justify;
}

.button {

	display: inline-block;
	padding: 8px 16px;
	margin: 0 4px;

	color: white;
	font: inherit;
	
	text-align: center;
	text-decoration: none;

	background-color: #333; /* Green */
	border: none;
	border-radius: 4px;

	cursor: pointer;

	/*-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;*/
}

.button:hover:enabled,
.button:hover[enabled] {
	background-color: #666;
	/* text-shadow: 0 0 black; */
	box-shadow: 0 0 4px 0px #4c4c4c59;
}

.button:active:enabled,
.button:active[enabled] {
	background-color: #888;
	/*transform: translate(1px, 1px);*/
}

.button:disabled,
.button[disabled]{

	background-color: #AAA;
	color: #666;
}

.buttonImg {
	padding: 2px 4px;
	margin: 0px 4px;
	height: 1.5em;
	-webkit-transition-duration: 0.1s;
	/* Safari */
	transition-duration: 0.1s;
}

.buttonImg:active:enabled,
.buttonImg:active[enabled] {
	background-color: #888;
	transform: none;
}

.buttonImg:disabled,
.buttonImg[disabled]{
	/*padding: 0px 2px;
 	border: 0px dashed #333;*/

	background-color: #AAA;
	color: #666;
}

.outlined {

	display: inline-block;
	padding: 0px 4px;
	margin: 0px 4px;

	/*font-family: Consolas,monaco,monospace;*/
	font-size: 14px;
	text-align: center;
	text-decoration: none;

	background-color: transparent;
	border: 2px solid #888;
	border-radius: 4px;

}

.hiddendiv {
	display: none;
}

.buttonNoBG {

	display: inline-block;
	padding: 8px 16px;

	color: white;
	/*font-family: Consolas,monaco,monospace;*/
	font-size: 14px;
	text-align: center;
	text-decoration: none;

	border: none;

}

/*
.messagebox {
	padding: 0;
	border: 1px solid #444;
	border-radius: 4px;
	margin: 0.2em 0.2em;
}
*/

.messagebox > #header {
  
	padding: 0;
	margin: 0.2em 0.1em;  
	font-size: 10px;
	align-items: center;
}

.messagebox > #main {
	margin: 1em 0.5em;
	width: auto;
	font-size: 12px;
}

.messagebox > #footer {

	padding: 0;
	margin: 0.2em 0.5em;

	font-size: 10px;
	color: gray;

	align-items: center;
}

.messagebox #btrem {
	cursor: pointer;
}


.message-icon {

	height: 1.5em;
	display: block;
}

.message-icon:focus {
  outline: none;
}



/* *** NOTEBOOK *** ********************************* */
.notebook {
	padding: 0px;
	margin: 0px;
	margin-left: -1em;
	margin-right: -1em;
}

.nb-header {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	justify-content: space-between;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	align-items: center;

	padding: 0px;
	margin: 0px;

	height: 2em;
}

.nb-main {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	justify-content: space-between;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	align-items: stretch;

	padding: 0px;
	margin: 0px;
}

.nb-body {
	display: inline-block;
	flex-grow: 2;
	padding: 1em;
}

.nbn-lft {
	display: inline-block;
	background-size: 2em;
	background-repeat: no-repeat;
	width:100%;
}
.nbn-h2 {height: 2em;}
.nbn-l {
	background-repeat: round;
	flex-grow:2;
}
.nbn-r {
	background-repeat: repeat;
	flex-grow: 2;
}
.nbn-t {
	background-repeat: repeat;
	height: 2em;
}


.nb-title {
  font-size: 20px;
  font-weight: bold;
}

.nb-sticker {
	border: 2px solid black;
	border-radius: 0.5em;
	width: 60%;
	background: #fffcf0;
	margin: 1em 0;
}

#notebook-console {
	right: 0;
	transform: none;
	top: 3em;
	left: unset;
	height: 20em;
}
#notebook-console #sender {
	width: 8em;
}

#notebook-bibsearch {
	right: 0;
	transform: none;
	top: 3em;
	left: unset;
	/*height: 35em;*/
}



.warning {
	color: orange;
}



/* *** PANEL DATA EXPLORER *** **** */

#panel-dataexplorer table {
	table-layout: auto;
	border-collapse: collapse;
	width: 100%;
}

/*
#panel-dataexplorer td,
#panel-dataexplorer th {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}*/

#panel-dataexplorer thead th {
	text-align: left;
	text-transform: capitalize;
}


#panel-dataexplorer td {
	word-wrap: break-word;
}

/*
#panel-dataexplorer tr > #step { min-width: 5em; max-width: 5em; }
#panel-dataexplorer tr > #name { min-width: 5em; }
#panel-dataexplorer tr > #units { min-width: 2em; }
#panel-dataexplorer tr > #type { width: 6em; }
#panel-dataexplorer tr > #meta { width: 4em; text-align: center; }
#panel-dataexplorer tr > #clear { width: 4em; text-align: center; }

#panel-dataexplorer tr {
	height: 2.5em;
}
*/

/* ******************************** */


/* *** PANEL ONTOLOGY EDITOR *** ** */

[data-panel~="ontology"] th { text-align: left; }
[data-panel~="ontology"] table { width: 100%; }
[data-panel~="ontology"] input { width: 100%; }

[data-panel~="ontology"] table tr th:nth-child(3),
[data-panel~="ontology"] table tr td:nth-child(3) {
	width: 50%;
}

/* ******************************** */


/* *** PANEL METADATA EDITOR *** **** */

[data-panel~="metadata"] th { text-align: left; }
[data-panel~="metadata"] table { width: 100%; }
[data-panel~="metadata"] input { width: 100%; }

/* ******************************** */










.activimg {
	cursor: pointer;
}

.clickImg {
  cursor: pointer;
  height: 1.2em;
  margin: 0em 0.2em;
}
.clickImg:hover {
	background-color: #0002;
	box-shadow: 0 0 4px 0px #0002;
}


.pointable {
	cursor: pointer;
}


.controlImg {
	cursor: pointer;
	margin: 0em 0.2em;
	font-size: 24px;
	height: 1em;
	width: 1em;
}

.controlImg:hover {
	background-color: #0002;
	box-shadow: 0 0 4px 0px #0002;
}



.editer {margin-left: 1em;}
.setter {
	margin-left: 1em;
}

.setter {
  margin-left: 1em;
}

.spacer {
  flex-grow: 2;
}

span#auth-label {
  padding-right: 1em;
  min-width: 5em;
}

/* STEP HEADERS */
.step > div#header,
[data-event] div#header,
div#notebook-steps > div > div#header {

	padding: 0px;
	font-size: 11px;
	color: #888;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-falex;
	display: flex;

	justify-content: space-between;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	align-items: center;

}

/* STEP FOOTER */
.step > div#footer,
[data-event] div#footer {

	padding: 0px;
	font-size: 11px;
	color: #888;
	height: 1em;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	justify-content: flex-start;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	align-items: center;

}

/* STEP FOOTER / delete iconbutton -- just to make it a bit bigger */
.step > div#footer > img#deleter,
div#notebook-steps > div > div#footer > img#deleter {
	font-size: 14px;
}



div.step {
	margin: 1em;
}

/* STEP MAIN BOX */
.step > div#main,
div#notebook-steps > div > div#main {
	padding: 0.5em 0em;
}


/* *** STEP HISTOGRAM *** */
.step[data-type="histogram"] #plotdiv[data-zoom="0"] {
	height: 25em; 
	width: 80%;
}
.step[data-type="histogram"] #plotdiv[data-zoom="1"] {
	height: 35em; 
	width: 100%;
}
.step[data-type="histogram"] #previewbox,
.step[data-type="histogram"] #preview {
	height: 100% !important; 
	width: 100% !important;
}

/* *** STEP PLOT *** */
.step[data-type="plot"] [data-zoom="0"] {
	height: 25em; 
	width: 80%;
}
.step[data-type="plot"] [data-zoom="1"] {
	height: 35em; 
	width: 100%;
}
.step[data-type="plot"] #previewbox,
.step[data-type="plot"] #preview {
	height: 100% !important; 
	width: 100% !important;
}


/* *** STEP IMAGE *** */
.step[data-type="image"] #image[data-zoom="0"] {
	max-height: 25em; 
	max-width: 95%; 
	width: auto; 
	height: auto; 
	object-fit: contain;
}
.step[data-type="image"] #image[data-zoom="1"] {
	max-height: 35em; 
	max-width: 95%; 
	width: auto; 
	height: auto; 
	object-fit: contain;
}



/* *** FAKE TABLE - AFM EDIT INTERFACE *** */
.fakecell {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	padding: 0.3em;
	padding-bottom: 1em;
	border: 2px solid black;
}

.fakecell-noborder {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	padding: 0.3em;
	padding-bottom: 1em;
}

.fakecell-notop {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	padding: 0.3em;
	padding-bottom: 1em;
	border: 2px solid black;
	border-top: 0;
}
.fakecell-nobot {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	padding: 0.3em;
	padding-bottom: 1em;
	border: 2px solid black;
	border-bottom: 0;
}
/* **************************************** */



/* TABLE IN A TABLESTEP */
.regulator {
	flex-grow: 2;
	position: relative;
	display: block;
	min-height: 8em;
	max-height: 20em;
}

#tbtbl,
#thtbl {
  border-collapse: collapse;
  border: 1px solid black;
  font-size: 11px;
}

.table-outer {
  display: block;
  position: absolute;
  overflow: scroll;
  max-width: 98%;
  max-height: 100%;
}

.table-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.table-header {
  position: sticky;
  top: 0;
  display: block;
}

.table-header thead {
  background: #AAA;
  border: 1px solid black;
}

.table-body {
  float: left;
  height: 100%;
  width: inherit;
  overflow-y: scroll;
  padding-right: 16px;
}

.table-header th,
.table-body td {
  min-width: 10em;
  max-width: 10em;
  text-align: center;
}

table.tablearea td+td {
  border-left: 1px solid black;
}

table.tablearea td + td { border-left:1px solid black; }
table.tablearea th + th { border-left:1px solid black; }
tr.rowborder td {
	border-bottom:1pt solid black;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}


td#info,
th#info {
  padding-left: 2em;
}


/* ******************************************************************* */ 




.controlbox {
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #333;
  border-radius: 0px;
  box-shadow: 0 0 4px 0px #c1c1c1;
  padding: 0.5em;
  margin: auto 0;
}

canvas#undefined {
  width: 99% !important;
  height: inherit !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}



/* *** DATA TYPES PANEL *** */

.datatypesbox {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	margin: 0em 1em;
	flex-wrap: wrap;

}

.typebox {

	border: 3px solid #333;
	border-radius : 4px;

	padding: 1em;
	margin: 1em;

	flex-basis: 15em;
	flex-direction: column;

	cursor: pointer;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;

}

.typebox:hover,
.typebox[hover] {
	border: 3px solid #AAA;
}


.typebox > div#title {
	text-align: center;
}

.typebox > img {
	padding: 0.5em 0em;
	align-self: center;
	min-width: 5em;

}

.typebox > #info {
	font-size: 12px;
	text-align: justify;
}



/* *** INTERFACE PLOT EDIT *** */

.interface#interface-plot-settings span#label {
	width: 10em;
}

.interface#interface-plot-settings div#status {
	text-align: center;
}

.interface #margins input[type="number"] {
	width: 3em;
}



/* *** INTERFACE PEAKS *** */
.interface[data-iface="peaks"] #dataselector td>label {
	width: 100%;
}
.interface[data-iface="peaks"] #dataselector input#units {
	min-width: 5em;
	max-width: 8em;
	width: 100%;
}
.interface[data-iface="peaks"] #peaks input[type="text"] {
	min-width: 5em;
	max-width: 10em;
	flex-grow: 2;
}
.interface[data-iface="peaks"] #peaks #header>div,
.interface[data-iface="peaks"] #peaks [data-peak]>div {
	width: 30%;
}




/* *** INTERFACE DATA1D UPLOAD *** */

.interface#interface-data1D-upload div#dataset > div {
	align-items: center;
}


.interface#interface-data1D-upload div#params {
	flex-grow: 2;
}
.interface#interface-data1D-upload div#params div {
	align-items: center;
}


.interface#interface-data1D-upload span#label {
	width: 6em;
}

.interface#interface-data1D-upload div#params input {
	flex-grow: 2;
}

.interface#interface-data1D-upload div#controls {
	flex-basis: 24px;
	padding: 0em 1em;
}
.interface#interface-data1D-upload div#controls img {
	height: 24px;
}

/* *** STEP DATA1D UPLOAD *** */

.step[data-type="data1D"] #record > span {
	padding-right: 1em;
}

.step[data-type="data1D"] #record > img {
	padding-right: 1em;
}

.step[data-type="data1D"] #records {

	padding: 0.5em 1em;
	margin-right: 1em;
	border: 1px solid black;
	border-radius: 4px;
}






/* ********** interfaces ****** */
.interface#interface-line2D #linelist th {
	text-align: left;
}

.interface#interface-line2D #linelist button {
	height: 2em;
}






/* *** STEPS *** ************************************************************ */

.step #caption {
	margin-bottom: 1em;
}

.step #caption .wbutton,
.step #footer .wbutton {
	height: 1.25em;
	width: 1.25em;
	font-size: unset;
}

/* special button */
.step .wbutton[data-mover] {
	height: 20px !important;
	width: 20px !important;
}


/* *** AFMCOMPARE *** ******************************************************* */
.step[data-type="afmcompare"] .flexstep div.flexrow > span:first-child {
	width: 15em;
}


/* *** PYTHON *** *********************************************************** */
.step[data-type="python"] #runlog > div > span:first-child,
.step[data-type="matplotlib"] #runlog > div > span:first-child {
	width: 9em;
}


/* *** REFERENCE *** ******************************************************** */

.step[data-type="reference"] #details > div {
	padding: 0;
}
.step[data-type="reference"] #details > div > span:first-child {
	width: 8em;
}



/* *** PEAKS *** ************************************************************ */

.step[data-type="peaks"] #params > span {
	margin: 1em 0;
}

.step[data-type="peaks"] #plotdiv[data-zoom="1"] {
	height: 35em; 
	width: 100%;
}
.step[data-type="peaks"] #previewbox,
.step[data-type="peaks"] #preview {
	height: 100% !important; 
	width: 100% !important;
}

.step[data-type="peaks"] #params table td, 
.step[data-type="peaks"] #params table th {
	padding: 0.5em 0.2em;
}

.step[data-type="peaks"] #params table td:nth-child(2),
.step[data-type="peaks"] #params table td:nth-child(5),
.step[data-type="peaks"] #params table td:nth-child(8),{
	padding: 0.5em 0em;
}

.step[data-type="peaks"] #params table td:nth-child(3),
.step[data-type="peaks"] #params table td:nth-child(6) {
	padding-right: 0.5em;
	border-right: 1px solid black;
}
.step[data-type="peaks"] #params table td:nth-child(4),
.step[data-type="peaks"] #params table td:nth-child(7) {
	padding-left: 0.5em;
}



/* ************************************************************************** */

/* *** NOTEBOOK PANELS *** ************************************************** */

[data-panel] {

	border: 2px solid #333;
	border-radius : 4px;
	box-shadow: 0 0 4px 0px #CCC;

	padding: 10px;
	margin: 10px;

}

[data-panel~="modal"] {

	background-color: white;

	display: none;
	position: fixed;
	z-index: 1000;

	overflow: auto;

	width: 98%; 
	height: 98%; 
	left: 50%;
	top: 50%;

	margin:0; 
	padding: 0;

	transform: translate(-50%, -50%);
}

[data-panel="login"] {

	background-color: white;
	
	position: fixed;
	display: none;
	z-index: 1000;

	width: 20em;
	right: 2em;
	top: 5em;
}
[data-panel="register"] {

	background-color: white;
	
	position: fixed;
	display: none;
	z-index: 1000;

	width: 30%;
	right: 2em;
	top: 5em;
}

[data-panel="login"] input,
[data-panel="SAlogin"] input {
	height: 2.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}


[data-panel="SAlogin"],
[data-panel="SAregister"] {

	display: block;
	width: 40%;

	background-color: white;
	border: 2px solid #333;
	border-radius: 0px;
	box-shadow: 0 0 4px 0px #c1c1c1;
	padding: 10px;
	border-radius: 4px;
	
}

[data-panel="register"] .label,
[data-panel="SAregister"] .label {
	width: 11em;
}

[data-panel="register"] input,
[data-panel="SAregister"] input {
	flex-grow: 2;
}


[data-panel="eula"] {

	background-color: white;
	
	position: fixed;
	display: none;
	z-index: 1000;

	width: 40%;
	height: 70%;
	left: 2em;
	top: 5em;
}

/* ************************************************************************** */

.m0{margin:0;}
.m05{margin:0.5em;}
.m1{margin:1em;}
.m2{margin:2em;}

.mh1{margin-left: 1em; margin-right: 1em;}
.mh5{margin-left: 5em; margin-right: 5em;}
.mh05{margin-left: 0.5em; margin-right: 0.5em;}
.mv1{margin-top: 1em; margin-bottom: 1em;}
.mv05{margin-top: 0.5em; margin-bottom: 0.5em;}

.m105{margin:1em 0.5em;}

.mr1{margin-right:1em;}
.mr1i{margin-right:1em !important;}
.ml0{margin-left:0em;}
.ml1{margin-left:1em;}
.mt2{margin-top:2em;}
.mt1{margin-top:1em;}
.mb1{margin-bottom:1em;}
.mb2{margin-bottom:2em;}
.mr05{margin-right:0.5em;}
.mb05{margin-bottom:0.5em;}
.mt05{margin-top:0.5em;}

.pad0{padding:0;}
.pad05{padding:0.5em;}
.padh1{padding:0em 1em;}
.padv1i{padding:1em 0em !important;}

.pr{position:relative;}
.abs{position:absolute;}
.abs0{position:absolute;inset:0 0 0 0;}
.top0{top:0;}

.ofa{overflow:auto;}
.ofh{overflow:hidden;}
.ofha{overflow:hidden auto;}

.h100{height:100%;}
.h100i{height:100% !important;}
.h99{height:99%;}
.h70{height:70%;}
.h60{height:60%;}
.h50{height:50%;}
.h40{height:40%;}
.h33{height:33%;}
.h40e{height:40em;}
.h20e{height:20em;}
.h10e{height:10em;}
.h8e{height:8em;}
.h5e{height:5em;}
.h4e{height:4em;}
.h3e{height:3em;}
.h2e{height:2em;}
.h1e{height:1em;}

.w100{width:100%;}
.w100i{width:100% !important;}
.w50{width:50%;}
.w70{width:70%;}
.w50{width:50%;}
.w33{width:33%;}
.w30{width:30%;}
.w25{width:25%;}
.w15{width:15%;}
.w2e{width:2em;}
.w2emin{width:2em;min-width:2em;}
.w3e{width:3em;}
.w4e{width:4em;}
.w5e{width:5em;}
.w6e{width:6em;}
.w7e{width:7em;}
.w8e{width:8em;}
.w9e{width:9em;}
.w10e{width:10em;}
.w25e{width:25em;}


.minw15{min-width: 15em;}
.maxw15{min-width: 15em;}

.minh15{min-height: 15em;}
.maxh15{max-height: 15em;}
.maxh6{max-height: 6em;}

.brd1{border: 1px solid black;}
.brdrnd{border-radius:4px;}

.tac{text-align: center !important;}
.tal{text-align: left !important;}
.tar{text-align: right !important;}
.taj{text-align: justify !important;}
.wspre{white-space: pre;}

.toe{text-overflow: ellipsis;}
.tsub{text-decoration: underline;}

.cptr{cursor:pointer;}

.flxwrp{flex-wrap:wrap;}

.hicon{
	height:1.5em;
	margin-right:0.5em;
}


.msgsender{
	font-size: 11px;
	color: #888;
}


/* The snackbar - position it at the bottom and in the middle of the screen */
[snack-active] {
	visibility: hidden;

	min-width: 250px;
	margin-left: -125px;

	color: black;
	background-color: #FFF;
	border: 2px solid black;
	border-radius: 4px;
	
	text-align: center;
	
	padding: 2em;
	position: fixed;
	z-index: 2000;
	left: 50%;
	bottom: 30px;

	white-space: pre;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
[snack-active="1"] {
	visibility: visible; /* Show the snackbar */

	-webkit-animation: fadein 0.5s;
	animation: fadein 0.5s;
}

[snack-active="0"] {
	visibility: visible; /* Show the snackbar */
	
	-webkit-animation: fadeout 0.5s;
	animation: fadeout 0.5s;
}


/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}


/*
.searchBox {
  border-radius: 2em;
  border-style: hidden;
  padding: 0.5em;
  border: solid white;
}

.searchBox:hover {
  box-shadow: 0 0 2px 0px black;
}

.searchBox:focus {
  outline: none;
  box-shadow: 0 0 2px 0px black;
}



.afmEditContainer {
  height: 100%;
  display: flex;
}

.afmGraph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 80%;
  flex-grow: 4;
}

.afmLinescanGraph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 50%;
  flex-grow: 4;
}

.afmTools {
  display: flex;
  height: 100%;
  min-width: 20%;
  justify-content: center;
  align-items: center;
}

.afmTools table, .afmTools table td {
  border: solid #a7a7a7;
  border-collapse: collapse;
}

.afmTools table td {
  margin: 2%;
  font-size: 2em;
}

.afmTools table td:hover {
  background-color: #7092b58c;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 2px 1px #5757578c;
}
*/






/* *** AFM edit interface *** */
#interface-file-afmEdit #mainmenu span,
#interface-file-afmEdit #mainmenu label {
	margin-right: 1em;
}


/* *** slider for FFT  *** */

[data-subtool] {
	width: 100%;
	font-size: 12px;
	margin: 0.5em 0em;
}
[data-subtool] [data-slider="dualslider"] {
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: 0em;
	margin-top: 0em;
	font-size: 10px;
	flex-grow: 2;
}

[data-subtool] [data-slider="dualslider"] .noUi-pips {
	display: none;
}

.noUi-connect {
    background: #666;
}

.noUi-horizontal .noUi-handle {
	width: 2em;
	height: 2em;
	left: -1em;
	top: -0.3em;
}


.noUi-handle::after, .noUi-handle::before {
	top: 25%;
	left: 45%;
	height: 50%;
}

.noUi-handle::after {
	left: 55%;
}


.searchWrap {
  display: flex;
  flex-direction: column;
  padding: 2em;
}



/* *** SPINNER *** ********************************************************* */
.spinner {
	
	border: 0.5em solid #DDD; /* Light grey */
	border-top: 0.5em solid #666; /* Blue */
	border-radius: 50%;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}

.spinner-3 {
	width: 3em;
	height: 3em;
	display: none;
}

.spinner-2 {
	width: 2em;
	height: 2em;
	display: none;
}

.spinner-1p2 {
	width: 1.2em;
	height: 1.2em;
	display: none;
}

.spinnersmall {
	
	border: 0.25em solid #DDD; /* Light grey */
	border-top: 0.25em solid #666; /* Blue */
	border-radius: 50%;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

/*****************************************************************************/




[data-recselector],
[data-xrefselector] {

	background-color: #FFF;
	cursor: pointer;
}

[data-recselector]:hover, [data-recselector][hover],
[data-xrefselector]:hover, [data-xrefselector][hover] {

	background-color: #EEE;
	
}

[data-recselector].selected,
[data-xrefselector].selected {

	background-color: #DDD;
}