%detail-section {
  font-weight:  bold;
  font-size:    18px;
}

#member-chat {
  #conversejs {
    margin:   none;
  }
}

#profiles-list,
#member-info {
  img {
    display:  block;
  }

  &, img {
    width:      100%;
  }

  div[name="name"] {
    @extend %detail-section;
    padding-top:  10px;
  }

  div[name="name"], 
  div[name="location"] {
    display:  flex;
  }
}

#member-detail {
  #member-info {
    ldp-display-mailto,
    ldp-display-tel {
      display:    block;
    }

    a[name="email"],
    a[name="number"] {
      &::before {
        font-family:      FontAwesome;
        padding-right:    4px;
        color:            black;
      }
    }
    a[name="email"] {
      &::before {
        content:          "\f0e0";
      }
    }
    a[name="number"] {
      &::before {
        content:          "\f10b";
        font-size:        22px;
        padding-left:     3px;
        padding-right:    7px;
      }
    }
  }

  .section {
    @extend %detail-section;
    margin-top:  40px;
  }

  #member-skills {
    display:      flex;
    flex-wrap:    wrap;

    ldp-display {
      display:            block;
      background-color:   $hd-color; 
      color:              white;
      border-radius:      100px;
      padding:            3px 10px;
      margin-bottom:      5px;
      margin-right:       5px;
    }
  }
}

@media (min-width: $sm-with) {
  #member-detail {
    #member-info {
      ldp-display-img {
        display:  block;
        float:    right;
        width:    300px;
      }
    }
  }
}