.jmc-editor-audio{
  h5{
    font-weight: normal;
  }
  .jmc-editor-audio-title{
    padding: 35px 24px 23px;
    position: relative;
    .transing-prog{
      position: absolute;
      left: 0;
      top: 4px;
      right: 0;
    }
    h6{
      color: #494949;
    }
  }
  .jmc-editor-audio-content{
    padding: 0;
    .jmc-editor-audio-content-tab{
      border-bottom: 1px solid #e7e7e7;
      font-size: 15px;
      font-weight: bold;
      display: flex;
      margin-bottom: 14px;
      span{
        position: relative;
        margin-left: 25px;
        padding-bottom: 12px;
        color: #494949;
        &::before{
          position: absolute;
          border-bottom: 2px solid #3297fc;
          content: '';
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
    .jmc-editor-audio-content-item{
      padding: 36px 24px 0;
      &:last-child{
        padding: 30px 24px 0;
      }
      .jmc-editor-audio-content-label{
        font-size: 14px;
        color: #494949;
        max-width: 14%;
      }
      .jmc-editor-audio-tip{
        color: #999;
        font-size: 13px;
        padding-top: 1px;
        &:last-child{
          padding-top: 10px;
        }
      }
      .jmc-editor-audio-selbtn{
        button{
          margin-top: 20px;
          color: #3297FC;
          font-weight: normal;
          padding: 3px 16px;
          font-size: 13px;
          border: 1px solid #3297FC;
          &:hover{
            background-color: #fff;
          }
        }
      }
      .jmc-ea-cover{
        width: 144px;
        height: 99px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        &:hover{
          .jmc-ea-cover-bg{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 1;
            background-color: rgba($color: #000000, $alpha: .4);
            cursor: pointer;
            &:before{
              width: 20px;
              height: 18px;
              content: '';
              position: absolute;
              left: calc(50% - 9px);
              top: calc(50% - 10px);
              background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAYAAAD7PHgWAAACCUlEQVRYR92YvY+MURSHn1+IRIJCqcVOovNRKLR0Yi0hVrHxP1iiEdFs7PofRIGsYImOVqHw0UlYWqXEkEiE/ORM7mzeEbN77ztGrj3dm5xzzzPn3PMxV7QQ2+eBhULTWUnXC21QqYHtGeAGFNsaOCfpZonPIkDbR4EHwMYSJw3dH8CUpMe59tmAtg8BT4DNuYcP0fsGHJH0LOecHqDt3cAccBjYlmM4Rp0u8BS4JGlZCe45sH2MTtsc/Qk4GID3gBNtTvgHNvcD8HMFaR32W7sBGOVfrax7wO/AQ+AR8AL4mFKxAzgAHAMmgU1tUzRKBJeAGF8fVnNue2cai8fbQLYB/Jl6VNEstj2beu2GEtA2gBckDcDZjoa/F+gk52+B15IGCjBBzo8TcEnSVNOB7fi+Buz6zfF74KKkmN0rYju+s9NdEsEoiD3NO2f7CnB5lc0mInhVUuj1JN3JN7mFUwJ4V9LphqOIXEyhtRaOgDzZjKTtReBUTqpLAM9Kup2iEFDv/pDWYT4j3RP9O2l7Grj1twE7kgIq0rQPeJnjoKGzX9KrZD8BRCGtKSUR3Crpa3JwBuhFs0CmJd1J9luALzm26wqw+hRXXyTVt5nqG3UUXdWjrt8Vql4WArL6dasfyWoX1uYAqHrlz5lUI+uUjLqRnbU54L/4417900e8bNX7eJT2s2qf334BYYdcRjCxTO0AAAAASUVORK5CYII=);
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .jmc-ea-info{
        width: 500px;
        height: 76px;
        margin-top: 20px;
        position: relative;
        background-color: #f7f7f7;
        overflow: hidden;
        &::after{
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAAjElEQVRIiWNkoDEwmfXf8/+/f7NAtjAyMaWdSWPcjmwjC60dALL8////MmAOxCGyyPJMGDqo7QCY5WhsujmAEBh1AAuhVEpzBxBKpbQGTIRSKc0dgCEy6oBRB9AZUFwZUVqOUOwASssRgg4g5ENKyxGCDqB1SUkwEdK6pBwtB0YdMOqAUQcMrAMYGBgAlnBeknCJI/QAAAAASUVORK5CYII=);
          background-position: 0 center;
          background-repeat: repeat-x;
          background-size:16px 14px;
          width: 14px;
          height: 14px;
          position: absolute;
          right: 20px;
          top: 31px;
          content: '';
        }
        &.playing{
          &::after{
            animation: audioPlaying 30s linear infinite;
          }
          i{
            &::after{
              border-width: 2px;
              border-color: transparent #fff transparent #fff;
              height: 10px;
              width: 6px;
            }
          }
        }
        i{
          width: 111px;
          height: 76px;
          position: absolute;
          left: 0;
          top: 0;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          cursor: pointer;
          &::before{
            content: '';
            background-color: rgba($color: #000000, $alpha: .3);
            border: 1px solid #fff;
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 30px;
            position: absolute;
            left: 40px;
            top: 23px;
            z-index: 2;
          }
          &::after{
            content: '';
            width: 0;
            height: 0;
            overflow: hidden;
            position: absolute;
            left: 52px;
            top: 33px;
            z-index: 3;
            border-width: 5px 0 5px 8px;
            border-color: transparent transparent transparent #fff;
            border-style: solid;
          }
        }
        h5{
          margin: 17px 60px 2px 130px;
          overflow: hidden;
          font-size: 16px;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333;
        }
        p{
          margin: 0 60px 0 130px;
          font-size: 14px;
          color: #999;
        }
      }
    }
    .jmc-editor-audio-uploading{
      color: #666;
      width: 459px;
      height: 108px;
      background-color: #f7f7f7;
      font-size: 12px;
      padding: 15px 11px;
      margin-top: 20px;
      .jmc-ea-progress{
        position: relative;
        display: flex;
        overflow: hidden;
        b{
          font-weight: normal;
          margin-right: 30px;
          max-width: 250px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        del{
          font-style: normal;
          text-decoration: none;
          color: #3297FC;
          cursor: pointer;
        }
        var{
          position: absolute;
          right: 2px;
          top: 1px;
          color: #3297FC;
        }
      }
      .jmc-ea-progress-bar{
        margin: 16px 0;
        height: 6px;
        overflow: hidden;
        position: relative;
        background-color: #e7e7e7;
        div{
          background-color: #3297FC;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
        }
      }
    }
  }
  .jmc-editor-audio-content-item{
    padding-top: 30px !important;
  }
  .jmc-editor-audio-button{
    padding: 30px;
    margin: 0;
    button{
      box-shadow: none;
      padding: 3px 25px;
      margin-left: 12px;
      font-weight: normal;
      border-radius: 2px;
      &:first-child{
        font-size: 13px;
        color: #333;
        background-color: #fff;
        border: 1px solid #ddd;
      }
      &:last-child{
        font-size: 13px;
        background-color: #404a53;
        border: 1px solid #404a53;
        color: #fff;
        &:disabled{
          background-color: #eee;
          border: 1px solid #eee;
          cursor: default;
          color: #b0b0b0;
        }
      }
    }
  }
}

.fdialog-bg{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  position: fixed;
  touch-action: none;
  background-color: rgba(0, 0, 0, 0.5);
  .fdialog-w{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .fdialog-ww{
      opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      border-radius: 4px;
      width: 900px;
      max-width: unset;
      flex: 0 1 auto;
      max-height: calc(100% - 96px);
      margin: 48px;
      display: flex;
      position: relative;
      overflow-y: auto;
      flex-direction: column;
      box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2), 0px 24px 38px 3px rgba(48, 47, 47, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12);
      background-color: #fff;
      .fdialog-header{
        padding: 35px 24px 30px;
        flex: 0 0 auto;
        font-size: 20px;
        font-weight: bold;
      }
      .fdialog-content{
        flex-grow: 1;
        overflow: hidden auto;
        flex: 1 1 auto;
      }
      .fdialog-actions{
        padding: 30px;
        flex: 0 0 auto;
        justify-content: flex-end;
        display: flex;
      }
    }
  }
}