.mch-project-list{
  min-height: 500px;
  .toolbar{
    padding: 10px;
  }
  .list{
    height: ~'calc(100% - 55px)';
    overflow: auto;
  }
  .map {
    right: 0;
    text-align: left;
  }
  .control{
    background-color: #424242;
    border: 1px solid #7e7e7e;
    line-height: 32px;
    padding: 0 10px;
    border-radius: 5px;
    margin: 0 5px;
    cursor: pointer;
    width: 110px;
    .label{
      width: 80px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    &.active{
      border: 1px solid #2d8cf0;
      background-color: rgba(45, 140, 240, 0.4);
    }
  }
  .view-list, .map{
    padding: 0 10px;
  }
  .empty{
    height: 400px;
    background-image: url(./images/empty.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .mch-card {
    width: 100%;
    .card-item {
      width: 100%;
      height: 215px;
      background-color: #424242;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      overflow: hidden;
    
      .thumb {
        width: 100%;
        height: 145px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        overflow: hidden;
        position: relative;
        border-radius: 2px 2px 0 0;
        background-color: #3d3d3d;
      }
    
      .meta {
        width: 100%;
        text-align: left;
        padding: 5px 10px;
    
        .name {
          border: none;
          background: transparent;
          width: 100%;
          font-size: 14px;
          line-height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        input{
          width: 100%;
          border: none;
          border-radius: 4px;
          color: inherit;
          padding: 0 5px;
          height: 30px;
          outline: none;
        }
    
        .date {
          line-height: 30px;
          font-size: 12px;
          color: #acacac;
        }
      }
      .mch-card-actions{
        bottom: 10px;
        right: 10px;
      }
    }
    .list-item {
      width: 100%;
      background-color: #424242;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 10px;
    
      .thumb {
        width: 100px;
        height: 45px;
        margin-right: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        overflow: hidden;
        position: relative;
        border-radius: 2px 2px 0 0;
        background-color: #3d3d3d;
      }
    
      .prefix {
        text-align: left;
    
        .name {
          border: none;
          background: transparent;
          width: 200px;
          font-size: 14px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        input{
          width: 200px;
          border: none;
          border-radius: 4px;
          color: inherit;
          padding: 0 5px;
          height: 30px;
          outline: none;
        }
    
        
      }
      .date {
        width: 100px;
        text-align: left;
        font-size: 12px;
        color: #acacac;
      }
      .actions{
        width: 250px;
        .btn{
          margin: 0 10px;
          color: #00ccff;
          &.delete{
            color: #f56224;
          }
        }
      }
    }
  }
  .mch-tips{
    right: 10px;
    top: 10px;
    .tip{
      background-color: #545454;
      border-radius: 3px;
      padding: 1px 4px;
      margin: 0 1px;
      font-size: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      &.Uploading{
        color: rgb(56, 201, 234);
      } 
      &.Waiting{
        color: rgb(56, 201, 234);
      }
      &.Running{
        color: rgb(180, 255, 127);
      }
      &.Error{
        color: rgb(242, 50, 63);
      }
      .Stoped{
        color: #ffd47f;
      }
    }
  }
}

.project-marker{
  
  .marker-img{
    width: 20px;
    height: 35px;
    background-image: url(./images/marker.svg);
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .marker-name{
    color: #ffffff;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-text-stroke: 0.5px #000000;
  }
}
.mch-card-actions-icon{
  margin-right: 2px;
}