#selector-main {
  max-width: 250px;
}

#viewer-main {
  overflow: clip;
  max-width: 100%;
}

.multiselect-type, .select-type, .select-object, .name-input, .abc-input, .regex-input, .operation-selector {
  min-width: 250px;
  max-width: 100%;
}

.dfa-input, .nfa-input {
  min-width: 250px;
  min-height: 400px !important;
  white-space: nowrap;
}

.grammar-input {
  min-width: 250px;
  min-height: 400px !important;
  white-space: nowrap;
}

.clickme {  
  cursor: pointer;
}

.automata-container {  
  cursor: grab;
}

.invalid-indicator {
  color: red;
}
   
.exists-indicator {
  color: orange;
}

.indicator-match {
  background-color: lightgreen !important;
}

.indicator-mismatch {
  background-color: lightcoral !important;
}

.object-value {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 250px;
}

.code-block {
  background: #ddd;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 250px;
  text-align: left;
}

.close-button {
  cursor: pointer;
  float: right;
  font-size: 45px;
  font-weight: 600;
}

.abc-object {
} 
.abc-object::before {
  color: blue;
  content: "[abc] ";
}

.reg-object {
} 
.regex-object::before {
  color: grey;
  content: "[regex] ";
}

.dfa-object {
} 
.dfa-object::before {
  color: red;
  content: "[dfa] ";
}

.nfa-object {
} 
.nfa-object::before {
  color: orange;
  content: "[nfa] ";
}

.grammar-object {
} 
.grammar-object::before {
  color: black;
  content: "[cfg] ";
}

sup {
  position: unset;
  line-height: unset;
}