/*
How to use
font-family: 'wechatnum';
*/
/*
How to use
font-family: 'wechatnum';
*/
.preview_audio_context {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
}
.preview_audio_context .preview_audio_status {
  height: 40px;
  line-height: 40px;
  margin: 0 8px;
  padding: 0 16px;
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  font-size: 14px;
}
.preview_audio_context .preview_audio_status .weui-desktop-icon_msg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.appmsg_card_context.audio_card {
  border: none;
  background-color: #F7F7F7;
  z-index: 100;
}
.audio_card {
  width: 382px;
  box-sizing: border-box;
  margin: 0 auto;
}
.audio_card_wrp {
  padding: 20px;
  line-height: 1.4;
  text-align: left;
  box-sizing: border-box;
}
.audio_card_wrp .weui-audio-btn::before {
  color: rgba(0, 0, 0, 0.9);
}
.audio_card_top {
  margin-top: 50px;
}
.audio_card_title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.audio_card_title + .weui-flex {
  padding-top: 8px;
}
.audio_card_desc {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  padding: 4px 72px 4px 0;
}
.audio_card_switch {
  padding-left: 10px;
}
.audio_card_tips {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  padding-top: 7px;
  line-height: 1;
  overflow: hidden;
}
.audio_card_tips em {
  font-style: normal;
}
.audio_card_length_current {
  float: left;
}
.audio_card_length_total {
  float: right;
}
.audio_card_length_total:before {
  position: absolute;
  left: -9999em;
  content: "总时长";
}
.audio_card_opr {
  display: block;
  padding-top: 20px;
}
.audio_card_progress_wrp {
  position: relative;
  display: block;
  height: 2px;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.audio_card_progress {
  display: block;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}
.audio_card_progress_inner {
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.audio_card_progress_buffer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.19);
}
.audio_card_progress_loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.audio_card_progress_loading:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  -webkit-animation: slidein 6s linear infinite normal;
  animation: slidein 6s linear infinite normal;
  background-image: repeating-linear-gradient(-15deg, rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.19) 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
}
@-webkit-keyframes slidein {
  from {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slidein {
  from {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.audio_card_progress_handle {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  z-index: 2;
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  margin: -14px/2 0 0 -14px/2;
}
.audio_card_progress_handle:before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  top: 50%;
  left: 50%;
  margin-top: -7px/2;
  margin-left: -7px/2;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
}
.audio_action {
  position: absolute;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
  top: -45px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 20px;
  font-size: 14px;
  padding: 0 0 0 20px;
  color: #4A4A51;
}
.audio_action_item {
  display: flex;
  white-space: nowrap;
  cursor: pointer;
  margin-right: 20px;
}
.audio_action_item em {
  margin-right: 4px;
}
.audio_action_icon_switch {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACFUlEQVR42u2YP0jDQBTGxT8gKuKmiyIijoKIow6iWNukzSUNrZZCccgmIuImEnHQqYIgCm6CIIggOCmlCApOTlLETRSKs4v1b72jhHxtJQeSHmLz4Bvae+T9evfdu0trvPDCi2oNv5/4qHIFqS/xeLzZKT8QUG9pbp4pENCWKw4oSdqcVZACZp1ydV2vo4CvNiCJVhyQFtyyAcm5c67WA7kUUB8UsMTqGczgLgdwAgFjsViriBm8t4tqi5zcWVjep4rDJRKJRlr00yoqy5rCAdwEwAtXIEKhaKclWda7ikVGccmCQTIO42WigGkbUD3EMavGb9pIXqQ8QOGAzFeWaJsYQ9EHZsD0RzhWLrICIF9UvtIcVsPtHpi1irIThbODFwDwwRUAzrHVgksjy+FJDuAOzHaq4oDBoDZQ3GL0Xg5gGvK3BVwS1AgccW+madZz7PAIgPMizuAlKHjnlCvLRhPbGGAHScQM7gHgCccO/WgHQiJ9ImbwCi6eSc6PCQPgu2EYDW7eVm5+EvMd3kxgrEzYjujnD6fc/3eS/HlAOu0btrRkQSQFD82x75zEfAf5pzjGnotyawevWgV5vlGURFvpnVHEDj7AS4JzD1SHEFBRot0i3kOuocWscwCn0Q6madYKACTPADjDsYMJgBkBy6t3FL/bhoc5dtgHOxyL8N9Isemn2jn5l9ZfI5JE1mq88MKLKo1vbyzHDawu8pIAAAAASUVORK5CYII=);
}
.audio_action_icon_add {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACFUlEQVR42u2YP0jDQBTGxT8gKuKmiyIijoKIow6iWNukzSUNrZZCccgmIuImEnHQqYIgCm6CIIggOCmlCApOTlLETRSKs4v1b72jhHxtJQeSHmLz4Bvae+T9evfdu0trvPDCi2oNv5/4qHIFqS/xeLzZKT8QUG9pbp4pENCWKw4oSdqcVZACZp1ydV2vo4CvNiCJVhyQFtyyAcm5c67WA7kUUB8UsMTqGczgLgdwAgFjsViriBm8t4tqi5zcWVjep4rDJRKJRlr00yoqy5rCAdwEwAtXIEKhaKclWda7ikVGccmCQTIO42WigGkbUD3EMavGb9pIXqQ8QOGAzFeWaJsYQ9EHZsD0RzhWLrICIF9UvtIcVsPtHpi1irIThbODFwDwwRUAzrHVgksjy+FJDuAOzHaq4oDBoDZQ3GL0Xg5gGvK3BVwS1AgccW+madZz7PAIgPMizuAlKHjnlCvLRhPbGGAHScQM7gHgCccO/WgHQiJ9ImbwCi6eSc6PCQPgu2EYDW7eVm5+EvMd3kxgrEzYjujnD6fc/3eS/HlAOu0btrRkQSQFD82x75zEfAf5pzjGnotyawevWgV5vlGURFvpnVHEDj7AS4JzD1SHEFBRot0i3kOuocWscwCn0Q6madYKACTPADjDsYMJgBkBy6t3FL/bhoc5dtgHOxyL8N9Isemn2jn5l9ZfI5JE1mq88MKLKo1vbyzHDawu8pIAAAAASUVORK5CYII=);
}
.audio_action_icon_delete {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAyklEQVR42u3XPQ7CMAwF4I5sDByEYyBSZ4jbrlXOwAXgRCyUE2Vg4Q5Ah8hSFyqFpK54T/ISV9Enq+lPhSBrTV3z3Rj3mlPjtcWBAphX2ic4VH8TmUyWSr9Xl8FJaZ/gkHRaczwBdG0G4NqARG5vDJ+JmpP3fjPp9UR8+fRMeaCc+KucwOYQ17uu28o6P8oDpXeLPWtbiuvO9TsBuieAAAIIIIAArhSo/l2s/mtGxZ4Afsni/8k/AHLIB+SQDLS2PeZBchj3rhBEed6x4zW8eCouLQAAAABJRU5ErkJggg==);
}
.audio_action_icon_switch_album {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACqUlEQVR42u1YT0sbQRRPLS0WLLYHRQ89Ce1NoT16MHozu9lkJlkipYGgkC+g0uIp13jy4BdITi148CgezEF66Qco5NRLb+0poRQadPt+dMO+lNnsOmNiFhx4ZMm++b037/9O6n7d1bKst88tq/Auk5ENyxKtTEa0LUt2QXjGf3gHHvCOTTHbloKUuCAlekReTOphD/aOTDHHkask5DMEmhAwgHVrirmu+5CAjxSCrsiNl/S7a9vFtBCll8Q7A8Iz/sM78IBXoewRsI2Uy+crzyiOzgeB5W+iuhBiPi4OeLEHezkWsCFDWzk6/df/AE9yua0XugfGXmBwTMiALA23Dljumtx0cFthAyxgckveyN085gBE2VcaQTUocSUhM3a2chdEWM7YklxWrOxGGeAxlxrx4jEJ2ZFFmGdrnITwPO/Bv47iLugmDs/uocUc1Z4pWI+RTE8oCz/5p183sGKdWfEitLeiJfWLcFSdk1IuEvAX/zAfTdwMWayY96CL6hRlVpsuhwFms/I1AX73eX+QJedMYxEymffKqvhrMjPvhgMVJYH9CsBQLwv7cclx3FcqXMhkcdhUnaAVMBTTYTHHapcWkRxXhQ2ZjKelKs7tPgOavQqkVqtNkRU+2LY41CXHKSyrsCGTHaStMnG3z4CJJDXmBZksxLoqF3eCir79dNwKQiZzcUfLxdVq9VE2W9zUJ3eDLPVY08XRSYL6ZD5Ru280k0Q2ospMpVKZps3vb0CnrBz9IdydIXVwj/E2NAq1VtB/8/F+knvX4hZq9HbjVhfdXwvHwcRcWjJsdephQX8YFSv+FH5Glpw1GBbMx62wZEK8YYzXGbeSO7AmYuSf+I+mRHx2TvyHeyKuPhJxeZSI67fEXGCqe7cs4wMn7AoY78AD3tT9uqP1FwTAgx5v1KrOAAAAAElFTkSuQmCC);
}
.audio_album_null {
  display: block;
  margin-bottom: -5px;
  margin-top: 24px;
  position: relative;
  opacity: 0.2;
  font-size: 14px;
  color: #353535;
}
.audio_album {
  line-height: 40px;
  font-size: 14px;
  display: block;
  margin-bottom: -20px;
  position: relative;
  margin-top: 20px;
}
.audio_album::before {
  content: "";
  display: block;
  left: 0;
  right: 0;
  border-top: 1px solid #E4E8EB;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
  position: absolute;
  top: 0;
}
.audio_album em {
  font-style: normal;
  font-weight: 500;
}
.audio_album::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 16px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAAcklEQVR42u3MoQqAMBSFYTVoUJvNIMKqYQgbZytLgz3A3mdvPr02+y3i/eFw2tdIf66U0gFQ3vuZBSTMWnver1nQEMJEmKCCQscYR25UcYALYTRjzM6GAThyzj0bllIaBPsqRjnnNjaMqrW2ANYHk6RXFziOT5YghEFlAAAAAElFTkSuQmCC);
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.audio_iframe::before {
  display: none;
}
.audio_iframe .audio_card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
.audio_iframe:hover .audio_card::before {
  background: rgba(7, 193, 96, 0.05);
}
.audio_iframe.custom_select_card_selected .audio_card::before {
  border-radius: 4px;
  border: 1.5px solid #07C160;
  box-sizing: border-box;
  background: rgba(7, 193, 96, 0.1);
  z-index: 1001;
}
body,
p {
  margin: 0;
}
body {
  line-height: 1.6;
  font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
  font-size: 14px;
}


/*# sourceMappingURL=audio_tmpl.css.map*/