.com-list{
  display:flex;
  width:100%;
  flex-direction:column;
  height:400px;
  overflow: hidden;

  .com-list-title{
    font-size:14px;
    font-weight:bold;
    padding-left:10px;
  }
  .com-items{
     display:flex;
     width:100%;
    flex-direction:column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    overflow-y: auto;
    .com-item{
        width:90%;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 14px;
        cursor: all-scroll;
        color: #323233;
        border-radius: 2px;
        background-color: #fff;
        -webkit-box-shadow: 0 0 4px 0 rgba(10,42,97,.2);
        box-shadow: 0 0 4px 0 rgba(10,42,97,.2);

        margin-top:10px;
        margin-left:10px;
        margin-right:10px;

        .icon{
          display:flex;
          width:10%;
          height:100%;
          justify-content: center;
          align-items: center;
        }
        .name{
          display:flex;
          width:75%;
          height:100%;
          justify-content: flex-start;
          align-items: center;
        }
        .remove{
          display:flex;
          width:15%;
          height:100%;
          justify-content: center;
          align-items: center;
        }
    }
   }
}
