.competence-page
  width: 100%
  margin: 0
  position: relative

.competences-header
  padding-top: 52px
  +flex(space-between, flex-start)

.competences-list
  list-style: none
  margin: 0
  padding: 0
  +inline-flex(space-between, flex-start)
  flex-wrap: wrap
  width: 100%

  li.competence
    border: 1px solid #CECECE
    border-radius: 15px
    width: 49%
    min-width: 400px
    background-color: white
    margin-bottom: 30px
    box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1)
    position: relative
    height: 100%
    padding: 30px
    display: block

    a
      color: $semiBlack
      text-decoration: none

      label
        font-weight: 600
        +flex(flex-start, baseline)

        &:hover
          cursor: pointer

        &:first-letter
          color: red
          text-transform: uppercase

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

      span
        color: $placeholderGray
        margin: 0 10px 0 20px
        font-size: 0.7rem
        line-height: 1.5rem

        &:hover
          cursor: pointer

    &.missing
      a
        label:before
          background-color: $semiBlack

    &.expired
      a
        label:before
          background-color: #FE3333

    &.almost_expired
      a
        label:before
          background-color: #FFAC34

    &.valid
      a
        label:before
          background-color: #04D682