#navbar-demo{
  height: 7.5vh;
  background-color: rgba(20, 10, 50, 1);
}

#navbar-demo .nav-element{
  display: inline-flex;
  height: 7.5vh;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}

#navbar-demo img{
  height: 5vh;
  margin: 0vh;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-flex;
}

#navbar-demo .algorithm-tab{
  background-color: #343764;
  height: 100%;
}

#navbar-demo .right-float{
  float: right;
}

#app-wrap{
  height: 75vh;
  width: 100%;
  background-color: black;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#left-wrap{
  height: 75vh;
  width: 15%;
  max-width: 15%;
  background-color: #343764;
  margin: 0;
  display: inline-block;
}

#left-inner-wrap{
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#indicator-cat, #operator-cat{
  height: 37.5vh;
  width: 17.5%;
  max-width: 17.5%;
  background-color: #150A32;
  margin: 0;
  display: inline-block;
}

.cat-element{
  height: 50px;
  cursor: pointer;
}

#indicator-list, #operator-list{
  height: 37.5vh;
  width: 82.5%;
  max-width: 82.5%;
  background-color: #343764;
  margin: 0 ;
  display: inline-block;
}

.list-wrap-scroll{
  overflow: auto;
  height: 100%;
}

fade {
  position: absolute;
  bottom: -5px;

  display: block;

  width: 100%;
  height: 20px;

  background-image: linear-gradient(to bottom, 
      rgba(52, 55, 100, 0), 
      rgba(52, 55, 100, 1)
  100%);
}

.list-item{
  min-height: 10px;
  color: rgba(20, 10, 50, 1);
  background-color: white;
  margin: 5px;
  border-radius: 5px;
  padding: 8px;
  cursor: pointer;
}

#operator-list .list-item{
  border-radius: 20px;
}

#drag-wrap{
  height: 75vh;
  width: 73.75%;
  max-width: 73.75%;
  background-color: white;
  margin: 0;
  display: inline-block;
}

#right-wrap{
  height: 75vh;
  width: 11.25%;
  max-width: 11.25%;
  background-color: #150A32;
  margin: 0;
  display: inline-block;
  overflow: auto;
}

.parameter-item{
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px #343764 solid;
  width: 100%;
}

.parameter-item input{
  width: 95%;
  border-bottom: 1px white solid;
  background-color: #150A32;
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
  color: white;
}

#edit-code-button{
  height: 25px;
  font-size: 16px;
  margin: 15px;
}

#bottom-wrap{
  height: 17.5vh;
  width: 100%;
  max-width: 100%;
  background-color: #343764;
  margin: 0;
  display: inline-block;
  padding: 0.5%;
}

#bottom-wrap .codebox{
  height: 100%;
  width: 100%;
  background-color: #150A32;
  padding: 1%;
}

#bottom-wrap .codebox textarea{
  background-color: #150A32;
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  color: white;
}



html, body, #canvas {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

.diagram-note {
  background-color: rgba(66, 180, 21, 0.7);
  color: White;
  border-radius: 5px;
  font-family: Arial;
  font-size: 12px;
  padding: 5px;
  min-height: 16px;
  width: 50px;
  text-align: center;
}

.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
  stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}

#save-button {
  position: relative;
  bottom: 40px;
  left: 20px;
}

#open-button {
  position: relative;
  bottom: 40px;
  left: 40px;
}

.indicator-block{
  border: 1px black solid;
  padding: 10px;
  width: 100%;
  background-color: #343764;
  border-radius: 15px;
  margin-bottom: 10px;
}
.work-column{
  width: 31%;
  margin: 1%;
  padding: 1%;
  height: 500px;
  background-color: #FFFFFF;
  border-left: #b8bada solid 2px;
  border-bottom: #b8bada solid 2px;
  overflow:auto;
}
.work-column-one{
  
  float: left;
}
.work-column-two{

  display: inline-block;
}
.work-column-three{

  float: right;
}
.workspace-main{
  overflow:auto;
}
.temp-submit{
  margin-left: 30px;
}

.list-primary{
  display: block;
  font-weight: bold;
}

.list-secondary{
  display: block;
  font-style: italic;
  font-size: 10px;
}

.list-tertiary{
  display: block;
  font-size: 8px;
}