.inputwrapper {
  font-family: "ABeeZee", sans-serif;
  margin: 0 1em 1em 1em;
}

.textwrapper {
  margin: 0 0 1em 0;
  padding: 0 1em 0 0;
}

.arrow_box {
  position: relative;
  background: #fff;
  border: 1px solid #aaa;
  &:focus {
    border-color: #888;
  }
  &:hover {
    border-color: #333;
  }
  &:after, &:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 1em;
    margin-left: -1em;
  }
  &:before {
    border-color: rgba(170, 170, 170, 0);
    border-top-color: #aaa;
    border-width: calc(1em + 1px);
    margin-left: calc(-1em - 1px);
  }
  &:focus:before {
    border-color: rgba(136, 136, 136, 0);
    border-top-color: #888;
  }
  &:hover:before {
    border-color: rgba(51, 51, 51, 0);
    border-top-color: #333;
  }
  .selectwrapper > & {
    display: inline-block;
  }
}

.textinput {
  background-color: #fff;
  border: none;
  color: #000;
  font-family: "Free Monospaced", monospace;
  height: 10em;
  margin: 0;
  padding: 0.5em;
  resize: vertical;
  width: 100%;
  &:focus {
    border-color: #888;
  }
  &:hover {
    border-color: #333;
  }
}

.selectwrapper {
  margin: 0 0 1em 0;
  padding: 0;
  text-align: center;
  &.error {
    > .arrow_box {
      border-color: red;
      &:before {
        border-top-color: red;
      }
    }
    select {
      color: red;
    }
  }
}

.select {
  background-color: #fff;
  border: none;
  color: #000;
  font-family: "ABeeZee", sans-serif;
  margin: 0;
  padding: 0.5em;
}

.option {
  /*    font-family: "ABeeZee", sans-serif;*/
}

.errormessage {
  color: red;
  text-align: center;
}