.terminal-asn1-node {
  display: inline-flex;
  gap: 0.2em;
  align-items: center;
  cursor: crosshair;
  width: calc(100% - 0.5em);
}

.asn1-constructor-header {
  display: inline-flex;
  gap: 0.2em;
}

.asn1-constructor-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding-left: 1.5em;
  width: calc(100% - 1.5em);
  border-left: 2px solid #70a66c;
}

.asn1-node-info-label {
  font-size: 0.6em;
  color: #4c5159;
  align-self: center;
  white-space: nowrap;
}

.asn-simple-value {
  border: none;
  border-radius: 0.1em;
  padding: 0.1em 0.2em 0.1em 0.2em;
  background-color: #aab7ce;
  font-size: 0.7em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asn-bool-true {
  border: none;
  border-radius: 0.1em;
  padding: 0.1em 0.2em 0.1em 0.2em;
  color: #0e7e4a;
  font-size: 0.9em;
}

.asn-bool-false {
  border: none;
  border-radius: 0.1em;
  padding: 0.1em 0.2em 0.1em 0.2em;
  color: #ba0021;
  font-size: 0.9em;
}

.hover_node {
  background: #edd5ce;
}

.asn1-button-with-icon {
  font-size: 0.8em;
  padding: 0.15em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 0.2em;
  border: 0;
  background: transparent;
  transition: 0.2s;
}

.asn1-button-with-icon > img {
  width: 2em;
  height: 2em;
}

.asn1-button-with-icon:hover {
  cursor: pointer;
  transition: 0.3s;
}

.asn1-button-with-icon:focus {
  box-shadow: 0 0 0 2px #736664;
}

.asn1-node-options {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.3em;
  font-size: 0.9em;
  width: max-content;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #dbcfbf;
  color: #50437f;
  border: 2px solid transparent;
  padding: 0.5em;
  border-radius: 0.3em;
  transition: all 0.4s;
  box-shadow: 0 1px 4px 1px grey;
}

.asn1-node-options:hover {
  border: 2px solid #94897b;
}

.asn1-node-container {
  display: inline-flex;
  width: 100%;
}

.asn1-node-options-name {
  cursor: pointer;
  white-space: nowrap;
}

.asn1-node-edit-options {
  z-index: 10;
}

.asn1-button-add-node {
  font-size: 0.8em;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 0px;
  transition: 0.15s;
  background: transparent;
}

.asn1-button-add-node-container {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-90%, 50%);
}

.asn1-button-add-node img {
  width: 1.5em;
  height: 1.5em;
  background-color: #e0e0e0;
  border-radius: 50%;
}

.asn1-remove-node-button-container {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-20%, 0%);
}

.ctrl-down {
  /* only for ctrl button press indication */
}

body.ctrl-down .asn1-button-add-node {
  display: flex;
  opacity: 0;
  cursor: pointer;
}

body.ctrl-down .asn1-button-add-node-container:hover .asn1-button-add-node {
  opacity: 1;
}

body.ctrl-down .asn1-remove-node-button-container:hover .asn1-button-add-node {
  opacity: 1;
}

.asn1-button-add-separator {
  border: 1px solid #403735;
  width: 1.5em;
  height: 0;
  content: " ";
}