.main-buttons{
display: none;
}
html { background-color: #000; } 
.my_div {
  height: calc(100vh - 80px);
  line-height: calc(100vh - 80px);
  text-align: center;
}
.my_span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
body {
  background-color: white;
  color: black;  
  font-size: 0.8rem;
  font-family: monospace;
  margin: 0;
  padding: 0.5rem;
  overflow:hidden;
}

p{
  display: block;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  margin-left: 0;
  margin-right: 0;
}
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: white gray;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 20px;
  border: 3px solid gray;
}

.joint-paper-background{
	background: rgba(211, 211, 211, 0);
 }
 
.joint-paper:focus {
  outline: none;
}

.tree-nav__item {
  display: block;
  white-space: nowrap;
  color: black;
  position: relative;
}
.tree-nav__item.is-expandable::before {
  border-left: 1px solid #333;
  content: "";
  height: 100%;
  left: 0.5rem;
  position: absolute;
  top: 1.2rem;
  height: calc(100% - 1.2rem);
}
.tree-nav__item .tree-nav__item {
  margin-left: 1.2rem;
}
.tree-nav__item.is-expandable[open] > .tree-nav__item-title::before {
  font-family: monospace;
  transform: translate(0,0.12rem) rotate(90deg);
}
.tree-nav__item.is-expandable > .tree-nav__item-title {
  padding-left: 1.2rem;
}
.tree-nav__item.is-expandable > .tree-nav__item-title::before {
  position: absolute;
  will-change: transform;
  transition: transform 300ms ease;
  font-family: monospace;
  color: black;
  font-size: 1.4rem;
  content: "\203A";
  left: 0;
  top:-0.12rem;
  display: inline-block;
  width: 1.2rem;
  text-align: center;
}

.tree-nav__item-title {
  cursor: pointer;
  display: block;
  outline: 0;
  color: black;
  font-size: 0.8rem;
  line-height: 1.2rem;
}

.tree-nav__item-leaf {
  cursor: pointer;
  display: grid;
  outline: 0;
  color: black;
  font-size: 0.8rem;
  line-height: 20px;
  width: 20px; 
  grid-template-columns: 20px 2px;
  grid-gap:5px;
  position: relative;
  left:20px;
}


.tree-nav__item-title::-webkit-details-marker {
  display: none;
}

.wrapper {
  height: calc(100vh - 20px);
  width: calc(100vw - 10px);
  display: grid;
  overflow:hidden;
  grid-template-columns: 250px auto 200px;
  grid-template-rows: 30px auto 20px;
}

.main-head {
overflow: hidden;
background: white;
grid-row-start: 1;
grid-column-start: 1;
grid-column-end: 4;	
}
.main-head-buttons {
  display:inline-block;
}

.main-head-user {
  display:inline-block;
  float:right;
  padding-right:10px;
 }

.content {
overflow: scroll;
background: rgba(211, 211, 211, 0.3);
grid-row-start: 2;
grid-column-start: 1;
grid-column-end: 4;	
}
.main-footer {
background: white;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 4;	
}


.joint-type-devs .port-body:hover {
    opacity: 1;
    fill: #ff7e5d;
}

.joint-type-devs .joint-highlight-stroke {
    stroke: #ff7e5d;
    stroke-width: 0px;
    pointer-events: none;
}

.par-container{
	display: block;
	width: 175px; 
	padding-left:5px;
	padding-top:3px;
}

.set-par-label{
	max-width:170px;
}

.set-par-input{
	width:170px;
  font-family: monospace;
}

.set-par-select{
  font-family: monospace;
	width:178px;
	height:21px;
}

.set-par-input-textarea {
    height: 6em;
    width: 170px;
    font-family: monospace;
	overflow-y: scroll;
	resize:none;
}

.set-par-input-invalid{
  font-family: monospace;
	background:red;
	width:170px;
}

.set-par-input-textarea-invalid {
	background:red;
    height: 4em;
    width: 170px;
    font-family: monospace;
	overflow-y: scroll;
	resize:none;
}


/* Modal windows */
	
	 .modal-textarea {
        overflow-y: scroll;
        height: 200px;
		width: 100%; /* Full width */
        resize: none; /* Remove this if you want the user to resize the textarea */
    }

	 .modal-table {
		text-align: center;
		width: 100%; /* Full width */
    }

	.formula-body {
        overflow-y: scroll;
		text-align: left;
		width: 100%; 
		height: 400px; 
    }

	.formula-table {
        overflow-y: scroll;
		text-align: left;
		width: 600px; 
    }

	.help-table {
		text-align: left;
		width: 800px; 
    }
	
	.help-th {
		text-align: left;
	}	
		
	.help-th, .help-td {
		  padding-top: 3px;
		  padding-bottom: 3px;
		  padding-left: 20px;
		  padding-right: 20px;
    }

	.help-table, .help-td, .help-th {
		border: 1px solid black;
		border-collapse: collapse;
    }

	
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	  -webkit-animation-name: fadeIn; /* Fade in the background */
	  -webkit-animation-duration: 0.4s;
	  animation-name: fadeIn;
	  animation-duration: 0.4s
	}

	/* Modal Content */
	.modal-content {
	  position: fixed;
	  bottom: 0;
	  background-color: #fefefe;
	  width: 100%;
	  -webkit-animation-name: slideIn;
	  -webkit-animation-duration: 0.4s;
	  animation-name: slideIn;
	  animation-duration: 0.4s
	}

	/* The Close Button */
	.close {
	  display:block;	
	  color: white;
	  float: right;
	  font-size: 18px;
	  font-weight: bold;
	}

	.close:hover,
	.close:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}

	.modal-header {
	  padding: 2px 16px;
	  line-height: 25px;
	  background-color: gray;
	  color: white;
	}

	.modal-body {padding: 2px 16px;}
	.help-body {
		display:block;
		padding: 2px 16px;
        overflow-y: scroll;
        height: 400px;
		width: 100%; /* Full width */
        resize: none; /* Remove this if you want the user to resize the textarea */
    }	

	.modal-footer {
	  padding: 2px 16px;
	  background-color: gray;
	  color: white;
	}

	.login {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	  -webkit-animation-name: fadeIn; /* Fade in the background */
	  -webkit-animation-duration: 0.4s;
	  animation-name: fadeIn;
	  animation-duration: 0.4s
	}

	/* Modal Content */
	.login-content {
	  position: fixed;
	  left: calc(50vw - 150px);
	  top: calc(50vh - 100px);
	  width: 300px; /* Full width */
	  height: 200px; /* Full height */
	  background-color: #fefefe;
	  -webkit-animation-name: slideIn;
	  -webkit-animation-duration: 0.4s;
	  animation-name: slideIn;
	  animation-duration: 0.4s
	}

	.login-header {
	  padding: 2px 16px;
	  line-height: 25px;
	  background-color: gray;
	  color: white;
	}

	.login-body {
		display:block;
		padding: 2px 16px;
        overflow: hidden;
        height: 200px;
		width: 300px; /* Full width */
    }	

	.login-footer {
	  padding: 2px 16px;
	  background-color: gray;
	  color: white;
	}
	
	.login-label{
	  width:100px;
	  font-family: monospace;
	}

	.login-input{
	  width:250px;
	  font-family: monospace;
	}


	/* Add Animation */
	@-webkit-keyframes slideIn {
	  from {bottom: -300px; opacity: 0} 
	  to {bottom: 0; opacity: 1}
	}

	@keyframes slideIn {
	  from {bottom: -300px; opacity: 0}
	  to {bottom: 0; opacity: 1}
	}

	@-webkit-keyframes fadeIn {
	  from {opacity: 0} 
	  to {opacity: 1}
	}

	@keyframes fadeIn {
	  from {opacity: 0} 
	  to {opacity: 1}
	}