.reframe-lookup-field {
  border: 1px solid rgba(34,36,38,.15);
  border-radius: .28571429rem;
  display: flex;
  background: @white;
  &:focus {
    outline: none !important;
    border-color: #85B7D9;
    border-radius: .28571429rem;
    background: #FFF;
    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;
  }
}
.reframe-value-token {
  padding: 1em;
  word-break: break-word;
}
.reframe-lookup-field-prompt {
  margin: .6em;
  line-height: 1.4285em;
  color: #CCC !important;
  flex: 1;
  min-height: 1.4285em;
}
.reframe-lookup-token {
  flex: 1;
  line-height: 1.4285em;
  color: #888888 !important;
  .border-radius(5px);
  strong {
    color: #000;
  }
  .avatar {
    display: inline-block !important;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    float: left;
  }
  .reframe-value-token,
  .token {
    padding: .67861429em 1em;
  }
}
.reframe-lookup-field-clear {
  flex: 0 0 35px;
  display: flex;
  i {
    .hover(color, fadeout(@black, 70));
    margin: auto;
    line-height: 18px;
    font-size: 18px;
    color: fadeout(@black, 80);
    cursor: pointer;
  }
}
.reframe-lookup-panel {
  flex: 1;
  display:flex;
  flex-direction: column;
  background-color: #FFF;
}
.reframe-lookup-panel-search {
  border-bottom: 1px solid fadeout(@black, 85);
}
.reframe-lookup-panel-add {
  padding: 0.8em;
  border-top: 1px solid fadeout(@black, 85);
}
.reframe-lookup-panel-loader {
  flex: 1;
  display:flex;
  flex-direction: column;
}
.reframe-lookup-panel-results {
  flex: 1;
  .scrollable();
}
.reframe-lookup-panel-result {
  .hover(background-color, fadeout(@black, 98));
  border-bottom: 1px solid fadeout(@black, 95);
  cursor: pointer;
  display: flex;
  color:  fadeout(@black, 30) !important;
  .reframe-lookup-panel-result-label {
    flex: 1;
  }
  .reframe-lookup-panel-result-icon {
    flex: 0 0 25px;
    .fa {
      color: @green;
    }
  }
  strong {
    color: #000;
  }
  .avatar {
    display: inline-block !important;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    float: left;
  }
}
.reframe-lookup-panel-empty {
  flex: 1;
  display: flex;
  margin: 20px;
  border: 3px dashed #DDD;
  background-color: #F9F9F9;
  width: ~"calc(100% - 40px)";
}
.reframe-lookup-panel-empty-message {
  margin: auto;
  text-align: center;
  padding: 20px;
  h2 {
    margin: 0 0 20px;
    font-size: 50px;
    i {
      background-color: #FFF;
    }
  }
  h3 {
    font-size: 22px;
    line-height: 28px;
    margin: 0;
    color: #666;
  }
  p {
    margin: 0 0 20px;
    color: #888;
  }
  .ui.basic.red.button {
    display: block;
    background: #FFF !important;
  }
}