.entity-attribute-view
  padding: 0
  +box-sizing(border-box)

  &.error + .error
    box-shadow: inset 0 1px 1px rgba($brand-danger, .075), inset 0 0 1px rgba(lighten(desaturate($brand-danger, 25%), 10%),.75)
    border: 1px solid $brand-danger
    border-top: 0

  .content
    padding: grid-row(1)

    label
      margin-left: 0


    table.competences
      width: 100%
      text-align: left
      border-spacing: 0
      border-collapse: collapse
      font-size: 0.7rem

      th
        border-bottom: 1px solid $lightest-gray
        margin-bottom: 5px

      tr
        padding: 5px 0

        &.missing
          td:first-child:before
            background-color: #373c41

        &.expired
          td:first-child:before
            background-color: #FE3333

        &.almost-expired
          td:first-child:before
            background-color: #FFAC34

        &.valid
          td:first-child:before
            background-color: #04D682

        td
          padding: 0
          margin: 0

          &:first-letter
            text-transform: capitalize

          &:first-child
            +flex(flex-start, center)

            &:before
              display: block
              content: ''
              width: 10px
              height: 10px
              border-radius: 999px
              margin-right: 10px
              background-color: $lightGray