:root {
	--bg_color: #dde6ee;
	--fg_color: #10081d;
	--selected_bg_color: #2389e1;
	--unselected_bg_color: #e3ecf4;
	--selected_fg_color: #cdd2d7;
	--unselected_fg_color: #6caae1;	
	--border_color:  #767272;;
	--btn_bg_color: #74b1e7;
	--btn_fg_color: #05588f;	
  }



body, html {
	height: 96vh;
	max-height: 98vh;
    padding: 10px;
    display: flex;
    flex-direction: column;	
	font-family: Arial;
	width: auto !important;
  }

  h1 {
	margin: 0px 0px 5px 0px;
    padding: 0px;
	font-family: Arial;
  }  

  h2 {
	margin: 0px 0px 5px 0px;
    padding: 0px;
	font-family: Arial;
  } 
  
  h3 {
	margin: 0px 0px 5px 0px;
    padding: 0px;
	font-family: Arial;
  }   

  p {
	margin-left: 0px;
	margin-right: 0px;
    padding: 0px;
	font-family: Arial;
  }  

.header {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
	margin-right: 10px;	
	background: var(--bg_color);
	border-color: var(--border_color);
}

.main {
	background: var(--bg_color);;
	border-color:var(--border_color);
}

.enablingtextfield {
	margin-bottom: 20px;
}


/* file Container */
/*  includes the fileSelection at the left side and the optional file content at the right side*/
.fileContainer {
	display: flex;
	flex-direction: column;
	flex-flow: row;	
	height: 80vh;
	max-height: 80vh;	
	width: auto;
	position:relative;
 }


 .fileSelection {
	flex: 1;	
	margin: 5px;
	padding: 5px;
	min-width: 50vh;
	overflow: auto;
	border: 2px solid var(--border_color);	
} 

.scrollable-tree {
	margin: auto;
	padding: 5px;
	width: 96%;
	max-height: 60vh;
	position:relative;
	overflow: auto;
	border: 2px solid var(--border_color);	
}

.exec-button {
	background-color:var(--btn_bg_color);
	border-color: var(--btn_fg_color);
	border-width: 3px;
	border-radius: 10px;
	color: var(--btn_fg_color);
	height: 50;
	padding: 5px 5px;
	text-align: center;
	text-decoration: underline;
	display: inline-block;
	font-size: 16px;
	margin: 10px 10px 10px 10px;
	cursor: pointer;
	transition: color 0.5s ease-in;		
}

.exec-button:disabled {
	color: #767272;
	cursor: default;
}



.exec-button:enabled:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
	color: rgb(16, 4, 95);	
	border-color: rgb(16, 4, 95);	
}


/* jest file content*/
.jestFileContent {
	flex: 1;
	margin: 5px;
	padding: 0px;	
	max-width: 100vh;
	min-width: 50vh;
	width: 50vh;
	border: 2px solid var(--border_color);	
 }

 /* description / name of the file*/
.jestFileDescription {
	margin: 10px;
	padding: 5px;	
	width: auto;
	display: block;
 }

 #edjestfilename {
	border: none;
	border-radius: 5px;
	margin-left: 10px;
	margin-right: 10px;	
	margin-bottom: 10px;
	font-size: 16px;
	font-family: monospace, "Arial";	
 }

/* content of the file ( code) */
 .jestFileCode {
	margin: 5px;
	padding: 5px;	
	overflow-x: auto;
	overflow-y: auto;
	height: 70vh;	
	max-height: 70vh;
	width: 98%;
 }




/*  results */
.result-pre {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 90%;
	max-height: 70hv;
	overflow-x: auto;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	text-wrap-mode: wrap;
	border: 2px solid var(--border_color);		
}

/* persistence view*/
.persistenceFileOverview {
	margin: 10px;
	padding: 10px;
	width: 98%;
	border: 2px solid var(--border_color);			
}

.persistenceFileTable {
	margin: 0px;	
	width: 98%;
	height: 150px;		
	max-height: 150px;	
	overflow: auto;
}
.persistenceFileTable thead th { position: sticky; top: 0; z-index: 1; }



.persistenceFileContent {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 94%;
	max-height: 50vh;
	overflow-x: auto;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	text-wrap-mode: wrap;
	border: 2px solid var(--border_color);		
}


[contenteditable="plaintext-only"] {
	background-color: whitesmoke !important;
	color: darkblue !important;
}

[contenteditable="false"] {
	background-color: inherit;
	color: darkgrey !important;
}

/* Style tab links */
.tablink {
	background-color: var(--unselected_bg_color);
	color: rgb(43, 11, 11);
	float: left;
	border: var(--border_color);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-style: inset;
	cursor: pointer;
	margin-right: 6px;
	padding: 12px 16px;
	font-size: 17px;
	width: 25%;
  }
  
  .tablink:hover {
	background-color: var(--bg_color);
  }
  
  /* Style the tab content (and add height:100% for full page content) */
  .tabcontent {
	color: var(--fg_color);
	display: none;
	flex-grow: 1;
    background-color: var(--bg_color);
    padding: 20px;
  }

  .tabs {
    display: flex;
    background-color:  var(--selected_bg_color);
    padding: 10px;
}

table {
	border: 1px solid black;	
  }

  th {
		background-color: #2d71ee;
		color: white;
		border: 1px solid black;
		border-collapse: collapse;
		padding-left: 5px;
  }

  td {
	border: 1px solid black;
	border-collapse: collapse;
	padding-left: 5px;
	text-align: center;
  }

  tr:nth-child(even) {
	background-color: #e0e8f6;
  }

  .radioTabCol {
	display: inline-block;	
	text-align:center;	
 }

 #plantname:enabled {
	background-color: #e3eab7;
	border: 2px solid #6d2121;
	border-radius: 5px;
	color: #170b35;
	font-size: 16px;
	font-family: monospace, "Arial";	
 }

 #plantname:focused {
	border: 2px solid #952121;
 }


 #plantname:disabled {
	background-color: #d3d6d74a;
	border: 2px solid #131a26;
	border-radius: 5px;
	color: #444;
	font-size: 16px;
	font-family: monospace, "Arial";	
 }

 #edscriptname {
	border: none;
	border-radius: 5px;
	margin-left: 10px;
	margin-right: 10px;	
	margin-bottom: 10px;
	color: #1a0357;
	font-size: 16px;
	font-family: monospace, "Arial";	
 }