#settings
  .settings-form
    margin: 30px 0 30px 0

    p.short-settings-element
      display: inline-block
      vertical-align: middle
      margin: 0 10px 0 0
      float: left

    label
      line-height: 30px

    input
      display: inline-block
      float: left
      width: 60px
      height: 18px
      padding: 5px 18px 5px 18px
      background-color: #F5F5F5
      border: 1px solid #E3E1E1
      border-radius: 4px
      line-height: 19px
      font-size: 11px
      color: #999999
      text-align: center

  .field.invalid
    input, textarea
      border-width: 1px
      border-color: #ffb6c1
      background: rgb(252, 227, 230)

  form.env-var, form.ssh-key
    margin-top: 20px

    .field
      padding-bottom: 10px
    .field:after
      visibility: hidden
      display: block
      font-size: 0
      content: " "
      clear: both
      height: 0

    label
      display: inline-block

  form.env-var
    label
      width: 40px
  form.ssh-key
    span.error
      display: block
      margin-left: 76px
    label
      width: 73px
    label.value
      float: left
    textarea
      margin-left: 3px
      width: 580px
      height: 250px
      display: inline-block
      padding: 0 5px 0 5px
      background-color: #fff
      border: 1px solid #ddd
      line-height: 17px
      font-size: 13px
      color: #999999
      text-align: left

  span.error
    display: inline-block
    margin-left: 10px
    color: #a80000

  .env-var input[type=submit].saving, .ssh-key input[type=submit].saving,
  .env-var .delete-var.deleting, .delete-ssh-key.deleting
    background-color: #bbb
    background-image: inline-image('ui/round-spinner.svg')
    background-repeat: no-repeat
    background-position: center
    background-size: 20px
    text-indent: -9999px

  .env-var-name
    span
      font-size: 18px
      font-weight: 600
      color: #5e6872

  .env-var-value
    span
      color: #838b8c
      marin-bottom: 6px
        
    .value-display
      letter-spacing: 2px
      font-size: 15px

  .add-env-var, .add-ssh-key
    color: #ffffff
    background-color: #97a3aa
    border-radius: 4px
    padding: 8px 12px 8px 12px
    font-size: 13px
    line-height: 55px
    cursor: pointer

  .add-env-var:hover, .add-ssh-key:hover
    background-color: #7c878d

  input
    display: inline-block
    width: 260px
    height: 20px
    padding: 0 5px 0 5px
    background-color: #fff
    border: 1px solid #ddd
    line-height: 17px
    font-size: 13px
    color: #999999
    text-align: left

  form.env-var .actions
    margin-bottom: 35px

  input.submit-env-var, input.submit-ssh-key
    color: #ffffff
    background-color: #7ea35a
    border-radius: 4px
    font-size: 13px
    width: 60px
    height: 32px
    text-align: center
    margin-right: 6px
    cursor: pointer

  .submit-env-var:hover, .submit-ssh-key:hover
    background-color: #6f924f

  .cancel-env-var, .cancel-ssh-key
    margin-left: 3px

  .cancel-env-var:hover, .cancel-ssh-key:hover
    text-decoration: underline

  input[type="checkbox"]
    display: inline-block
    vertical-align: middle

  .edit-var
    display: inline-block
    margin: 6px 0 15px 0
    color: #ffffff
    background-color: #bcbcbb
    border-radius: 4px
    padding: 4px 15px 4px 15px
    font-size: 13px
    cursor: pointer

  .edit-var:hover
    background-color: #a4a5a4

  .delete-var, .delete-ssh-key
    display: inline-block
    margin: 6px 0 15px 0
    color: #ffffff
    background-color: #932828
    border-radius: 4px
    padding: 4px 15px 4px 15px
    font-size: 13px
    cursor: pointer

  .delete-var:hover, .delete-ssh-key:hover
    background-color: #820b0b

  ul.env-vars
    max-width: 500px
  li.env-var
    margin-top: 20px

    .var
      font-size: 13px
      display: inline-block
      margin-right: 10px

    .row
      .label
        display: inline-block
        text-align: left
        margin-right: 5px