@greyed: #999;
@greyed-out: #aaa;

.query {
  font-size: 65%;
  font-weight: normal;
}

.query-value {
  font-weight: bold;
}

.query-search {
  &:before, &:after {
    content: '"';
  }
}

.project {
  .description {
    margin-top: .2em;
  }
}

.project-title {
  font-size: 1.4em;
}

.date {
  font-style: italic;
  float: right;

  &:before {
    content: "updated ";
  }
}

.fields {
  margin-top: 10px;
  line-height: 18px;
}

.field-name {
  display: inline;
  float: left;
  width: 14%;
  font-weight: normal;
  a {
    color: inherit;
  }
}

.field-none {
  color: @greyed-out;
}

.field-value-container {
  width: 86%;

  &:hover {
    background-color: #D9FFD1;
  }
}

.field-value-item:not(:last-child) {
  &:after {
    content: ", ";
    color: @greyed-out;
  }
}

.field-edit {
  width: 86%;
  display: inline-block;

  input {
    display: inline-block;
  }
}

.field-value {
  margin: 0;
  display: inline;

  li {
    display: inline;
  }
}

.edit-value {
  display: inline-block;
  width: 60%;

  &:hover {
    cursor: pointer;
  }
}

.edit-message {
  display: inline-block;
  width: 100%;

   &:hover {
    &:before {
       content: "edit field";
       margin-left: 24px;
       color: @greyed-out;
    }
  }
}

.comma {
  color: @greyed;
}

.delete {
  float: right;
  cursor: pointer;
}

.UEB {
  margin-left: 0.5em;
}

#sort-legend {
  color: black;
  font-size: small;
  margin-right: 0.5em;
}

#sort-order { 
  float: right;
  font-size: 100%;
  margin-top: 16px;

  ul {
    float: left;
    display: inline;

    li {
      float: left;
  
      &:not(:last-child) &:not(:first-child) {
        &:after {
          content: "|"; 
        }
      }
    }
  }
}