app/addons/fauxton/assets/less/components.less

@import "../../../../../assets/less/variables.less";
@import "../../../../../assets/less/bootstrap/variables.less";
@import "../../../../../assets/less/bootstrap/mixins.less";

.api-bar-tray {
  padding: 16px 20px;

  input[type="text"].text-field-to-copy {
    .border-radius(5px 0 0 5px);
  }
  .input-append.input-prepend {
    margin-bottom: 0;

    .btn {
      background-color: @secondaryBlue;
      color: @buttonText;
      margin-left: -1px;
      padding: 10px 10px 9px;
      border: none;
      line-height: 1.5em;
      &:hover{
        background-color: #cbcbcb;
      }
    }

    .icon-question-sign {
      margin-left: 3px;
      color: @secondaryBlue;
      &:hover {
        color: @hoverHighlight;
      }
    }
  }
}

.api-bar-tray:before {
  right: 80px;
}

.clipboard-copy-element {
  i:before {
    margin-right: 0px;
  }

}

button.clipboard-copy-element {
  background: transparent;
  border: 0;
  &:hover {
    color: @hoverHighlight;
  }
}

#perma-warning {
  background-color: white;
  height: 3.5rem;
  border-bottom-style: solid;
  border-width: 2px;
  border-top-style: solid;
  border-color: #B11925; 
  overflow-y: auto;
}

.perma-warning__content {
  margin: 0rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: #B11925;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}