.xm-record {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translate(-50%, 0);

  height: 56px;
  width: 336px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
  margin-bottom: 32px;
  transition: bottom 0.5s;
  .record-left{
    width: 100px;
    height: 56px;
    display: flex;
    flex-direction: column;
    margin-left: 24px;
    align-items: flex-start;
    justify-content: center;
  }
  &.visible {
    animation: visibleRecord 0.5s;
    bottom: 4px;
    z-index: 10000;
  }
  &.hidden {
    animation: hiddenRecord 0.5s;
    bottom: -100px;
  }

  @keyframes visibleRecord {
    from{
      display: none;
    }
    to{
     display: block;
    }
  }

  @keyframes hiddenRecord {
    from{
      display: block;
    }
    to{
     display: none;
    }
  }
 
  .text {
    height: 25px;
    img {
      margin-right: 3px;
    }
  }
  .btn-wrapper {
    position: absolute;
    right: 24px;
    top: 9px;
    
    .ant-btn {
      margin-left: 12px;
      &.finish {
        background-color: #FF483C !important;
      }
    }
  }
}