@import "variables.css";

.op-tool {
  width: 20px;
  height: 20px;
  margin: 0 0.15rem 0 0.15rem;
  text-align: center;
}

.op-tool.others img {
  height: 20px;
  width: auto;
}

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.center {
  color: var(--main-color);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: underline;
}

.card {
  width: 90%;
  border: 0.005rem #c0c4cc solid;
  border-radius: 1rem;
  margin: 0.1rem auto;
  padding: 0.2rem 0.1rem;
  box-shadow: #ddd 5px 0 10px;
  height: 15rem;
}

.card .title.tab {
  color: var(--black-color);
}

.card .t-info {
  min-width: 20%;
}

.list-more {
  text-align: right;
  color: var(--main-color);
  font-size: 0.4rem;
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.van-dialog__header {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  font-weight: 700 !important;
}

.van-dialog--round-button .van-dialog__footer {
  padding: 0.33rem !important;
}

.van-dialog--round-button .van-dialog__confirm {
  color: var(--white-color) !important;
  background-color: var(--main-color) !important;
}

.van-goods-action-button--danger {
  background: none !important;
}

#app .van-empty__image {
  width: auto;
}

/*vant color*/
.tabs-color .van-tabs__line {
  background-color: var(--main-color);
}

.switch-color.van-switch--on {
  background-color: var(--main-color);
}

/*vant color end*/

/* notify start */
.van-notify {
  color: var(--white-color) !important;
  background-color: var(--main-color) !important;
}

/* notify end */

/* layout start */
.layout-footer-tab .van-tabbar {
  max-width: 768px;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
}

.layout-content {
  padding-bottom: 1.5rem;
}

html,
body {
  height: 100%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
}

#app {
  height: 100%;
  background: var(--white-color);
  max-width: 768px;
  margin: 0 auto;
  overflow-y: auto;
}

#app>#appElement {
  height: 100%;
}

.van-action-sheet.van-popup--bottom {
  position: fixed;
  background: transparent;
}

.van-action-sheet.van-popup--bottom .van-action-sheet__content {
  width: 100%;
  max-width: 768px;
  background: var(--white-color);
  margin: 0 auto;
  border-radius: 0.42667rem 0.42667rem 0 0;
}

.contact-body .group-name-sheet .van-action-sheet__content {
  height: 3rem;
}

.contact-body .group-title {
  font-size: 0.5rem;
  font-weight: 600;
}

.van-sticky.van-sticky--fixed {
  width: 100%;
  max-width: 768px;
  left: auto;
  right: auto;
}

.van-dropdown-item {
  max-width: 768px;
  margin: 0 auto;
}

.van-popup.van-popup--bottom {
  background-color: transparent;
}

.van-popup--bottom .van-picker {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

/* layout end */

/* nav-top */
.nav-top {
  height: 1.23rem;
  padding: 0 0.55rem;
}

.nav-top img,
.nav-top .nav-top-title {
  line-height: 1.23rem;
  display: inline-block;
  vertical-align: middle;
}

.nav-top .nav-top-title {
  margin-left: 0.8rem;
  font-size: 0.45rem;
}

.nav-top img {
  width: 0.55rem;
}

/*homehead start*/
.languageList {
  border: 1px solid #eaeaea;
  position: absolute;
  top: 1.4rem;
  z-index: 10;
  background: var(--white-color);
  min-width: 2.5rem;
  right: 0;
  min-height: 0.8rem;
  font-size: 0.4rem;
  border-radius: 0.2rem;
  box-shadow: #ddd 5px 0 10px;
}

.languageList div {
  padding: 0.3rem 0.3rem;
  border-bottom: 1px solid #efefef;
}

.languageList div:last-child {
  border: none;
}

.home .home-title {
  margin: 0.5rem 0.5rem 0 0.5rem;
  color: #424242;
  display: flex;
  justify-content: space-between;
}

.home .base-home-search {
  display: none;
}

.home .home-title .home-top-tools {
  position: relative;
  display: flex;
}

.home .home-title .home-top-tools .home-top-tools-icon {
  width: 37px;
  height: 37px;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home .home-top-tools-search {
  margin-right: 10px;
  background: url(../../images/icon/home-search.webp) no-repeat;
}

.home .home-top-tools-language {
  background: url(../../images/icon/home-language.webp) no-repeat;
}

.home .home-title .home-top-tools .home-top-tools-language .home-top-tools-language-text {
  transform: scale(0.75);
  font-weight: 700;
  color: white;
  font-size: 12px;
  padding-right: 3px;
}

.home .home-title img {
  width: 87px;
  height: 41px;
  vertical-align: middle;
  margin-right: 0.2rem;
}

.home .home-title span {
  font-size: 0.5rem;
  vertical-align: middle;
}

.home .home-title .logo-title {
  display: none;
}

.home-hot {
  margin: 0.5rem 0;
}

.general .list-more,.home-hot .list-more {
  color: rgba(0, 0, 0, 0.7);
  line-height: 22px;
}


.layout-footer-title {
  display: inline-block;
  margin-top: 0.1rem;
}

/*home end */
/* tableLine start*/
.song-txt {
  font-size: 14px;
}

.tableLine .buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tableLine .renew {
  padding: 0.5rem 0.42667rem;
  line-height: 0.35rem;
  color: var(--span-font-color);
  font-size: 0.4rem;
  font-weight: bold;
}

.tableLine .renew-re {
  display: inline-block;
  vertical-align: super;
  margin-left: 5px;
}

.tableLine .renew-button {
  margin: 0.5rem 0.3rem;
  font-weight: normal;
  border-radius: var(--border-radius-size);
  color: var(--white-color);
  width: 40%;
}

.tableLine .renew-auto {
  border: 0.01rem solid var(--main-color);
  color: var(--main-color);
}

.tableLine .renew-dis-auto {
  border: 0.01rem solid var(--cancel-auto-renew-color);
  color: var(--cancel-auto-renew-color);
}

.tableLine .renew-button-container {
  text-align: center;
}

.tableLine .renew-renewable {
  background: var(--main-color);
  display: inline-block;
  padding: 0 0.4rem;
  text-align: center;
  height: 1.17333rem;
  line-height: 1.17333rem;
  box-sizing: border-box;
  vertical-align: bottom;
  font-size: 0.37333rem;
}

.tableLine .renew-dis {
  background: var(--disable-button-bg-color);
  color: var(--disable-button-font-color);
}

.tableLine .renewoff-tone {
  color: var(--disable-button-font-color);
  text-decoration: none;
  cursor: default;
}

.tableLine .renewable-tone {
  color: var(--white-color);
  cursor: pointer;
  text-decoration: underline;
}

.tableLine .icon-img {
  height: 20px;
  width: 20px;
  color: var(--orange-color);
  size: 0.6rem;
  bottom: 0.22rem;
  text-align: center;
}

.tableLine .icon-img-for-home-rank {
  height: 20px;
  width: 20px;
  color: var(--orange-color);
  size: 0.6rem;
  bottom: 0.22rem;
}

.empty-sec {
  text-align: center;
}

/* tableLine end*/
/* search start */
.search-page .left-search {
  width: 8.4rem;
  height: 1.2rem;
  border-radius: 10px;
  margin-left: 0.32rem;
  flex: 1;
  border: none;
}

.search-page .search-icon {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.42rem;
}

.search-page .van-tabs__line {
  background-color: var(--main-color);
}

.search-icon {
  width: 0.34rem;
  height: 0.34rem;
  margin: 0 0.27rem 0 0.37rem;
  margin-left: 0.42rem;
}

.click-icon {
  position: absolute;
  left: 0.5rem;
  top: 0.4rem;
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0;
}

.search-input {
  font-size: 0.4rem;
  width: 100%;
  border: none;
  background-color: #e5e5e5;
  background: url(../../images/icon/search.webp) no-repeat;
  background-size: 6%;
  background-position-y: center;
  background-position: 30%;
  text-align: center;
  margin-left: 0.5rem;
  background-position: 4%;
  text-align: center;
  margin-left: 0.26rem;
}

.search-input {
  width: 7.34rem;
  height: 100%;
  font-size: 0.45rem;
  padding-right: 5px;
  padding-left: 35px;
}

.home-search {
  width: 6.56rem;
  height: 1.2rem;
  border-radius: var(--input-border-radius);
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f5f2f2;
}

.right-cancel {
  font-size: 0.36rem;
  font-weight: 700;
  -webkit-box-align: center;
  line-height: 1.1rem;
  margin-left: 0.1rem;
}

.search-nav {
  padding-top: 0.39rem;
  display: flex;
}

.search-history {
  margin-top: 0.43rem;
}

.search-history-header {
  font-size: 0.38rem;
  font-weight: bold;
}

.search-history-list .list-item {
  height: 1rem;
  margin: 0.1rem auto;
  display: flex;
  align-items: center;
}

.search-history-list .list-item-title {
  flex-grow: 1;
  margin: 0 0.3rem;
  font-size: 0.36rem;
  line-height: 1rem;
  color: #8b8282;
}

.search-history .history-total-head .list-item-icon-left {
  width: 0.55rem;
  height: 0.55rem;
  background-image: url("../../images/icon/history-icon.webp");
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 0.45rem;
  margin-left: 0.3rem;
  margin-right: 0.1rem;
}

.search-history .history-total-head {
  display: flex;
}

.search-history-list .list-item-icon-right {
  width: 0.8rem;
  height: 0.8rem;
  background-image: url("../../images/icon/history-cancel.webp");
  background-size: 0.24rem 0.24rem;
  background-position: left;
  background-repeat: no-repeat;
}

.search-page-content {
  margin-bottom: 1.6rem;
}

/* search end */

/***Home begin**/
.home {
  margin-bottom: 2rem;
}

.home {
  margin-bottom: 2rem;
}

.home .logo-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.4rem;
}

.home .top {
  margin-top: 0.4rem;
}

.home .language-icon {
  width: 1rem;
  height: 1.2rem;
  margin-left: 0.6rem;
  background-image: url("../../images/icon/language.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #f2f2f2;
  border-radius: 0.2rem;
  position: relative;
  z-index: 1;
}

.home .general .van-row {
  margin: 0.5rem 0;
}

.general .buttons {
  position: relative;
}

.general .rank-swiper .swiper-slide {
  width: 8rem;
  height: auto;
}

/***Home end**/

/* signup start */
.sign-up-guider {
  background-color: var(--main-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  width: 1.64rem;
  height: 1.47rem;
  border-radius: 50% 0 0 50%;
  box-shadow: 0 0 0.3rem #868686bd;
}

.sign-up-guider__text {
  font-size: 0.3rem;
}

.sign-up-guider--dragging>.sign-up-guider {
  border-radius: 50% 50%;
  height: 1.64rem;
}

.sign-up-guider--snapped-left>.sign-up-guider {
  border-radius: 0 50% 50% 0;
}

.float-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  z-index: 1;
  transition: all 0.3s;
}

/* signup end */

/*register start */
.register-flex {
  display: flex;
}

.subscribe-box {
  margin-top: 0.2rem;
}

.subscribe-box .register-logo {
  margin-bottom: 0.2rem;
  text-align: center;
  height: 3.5rem;
  position: relative;
}

.subscribe-box .register-logo img {
  height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.subscribe-box .logo-user {
  background: url(../../images/icon/user_o.webp) no-repeat 0.25rem;
  background-size: 0.45rem 0.45rem;
  padding-left: 1rem;
}

.subscribe-box .logo-sms {
  background: url(../../images/icon/lock_o.webp) no-repeat 0.25rem;
  background-size: 0.45rem 0.45rem;
  padding-left: 1rem;
}

.subscribe-box .logo-sms .van-cell__value--alone {
  color: var(--main-color);
}

.subscribe-box .logo-sms .sms-btn {
  border: none;
  background-color: #f5f5f5;
  color: var(--telecom-color);
}

.subscribe-box .logo-sms .sms-btn:disabled {
  color: #767676;
}

.nav-bar-register {
  display: flex;
  position: relative;
}

.nav-bar-register .left-arrow {
  width: 0.25rem;
  height: 0.44rem;
  margin-left: 0.6rem;
  margin-top: 0.35rem;
  background-image: url(../../images/icon/profile_back.webp);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 99;
}

.nav-bar-register .desc {
  flex: 1;
  text-align: center;
  font-size: var(--title-font-size);
}

.nav-bar-register img {
  position: absolute;
  right: 0.6rem;
  width: 0.6rem;
  top: 0.26rem;
}

.register-logo-box {
  width: 4rem;
  height: 4rem;
  margin: 1rem auto;
  text-align: center;
  line-height: 4rem;
}

.register-logo-box img {
  width: 100%;
}

.regist-tip-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.regist-tip-outer .regist-tip-icon {
  margin-right: 5px;
}

.regist-tip-outer .regist-link-text {
  color: var(--telecom-color);
  text-decoration: underline;
}

.register-form .login-input {
  border-radius: var(--input-border-radius);
  height: 1rem;
  line-height: 1rem;
  background-color: #f5f5f5;
  margin: 0 auto 0.66rem;
  box-sizing: content-box;
  padding-right: 0.6rem;
  padding-bottom: 0.2rem;
  padding-top: 0;
  overflow: auto;
}

.login .register-form .login-captcha {
  margin: 0 auto 0.44rem;
  width: 82%;
}

.login .register-form .login-captcha .login-captcha-input {
  width: 54%;
  margin: 0;
}

.register-form .login-input .van-field__error-message {
  white-space: nowrap;
  position: absolute;
  top: 0.9rem;
  height: 0;
}

.register-form .login-policy {
  width: 82%;
  margin-bottom: 0.44rem;
}

.register-form .login-policy .policy-btn {
  color: #848484;
  text-decoration: underline;
}

.register-form .submit-btn {
  width: 100%;
  text-align: center;
}

.register-form .captcha-outer {
  display: flex;
  justify-content: space-between;
  width: 82%;
}

.register-verify-img {
  width: 3.5rem;
  height: 1rem;
  margin-left: 0.5rem;
}

.register-form .set-password-outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.register-form .form-outer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.register-form .van-cell {
  width: 82%;
  box-sizing: border-box;
  overflow: visible;
}
.forget-password-page .subscribe-box {
  width: 82%;
}

.register-page-regRetShow {
  margin: 0.25rem 0.5rem;
  color: #666;
}

.register-page-regRetShow p {
  margin: 0;
}

.register-page-regRetShow .register-page-serType {
  display: inline-block;
  font-size: 0.5rem;
}

.register-page-regRetShow .resMsg {
  margin-left: 1rem;
  word-break: break-all;
}

.register-page-regRetShow .logo-box {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.15rem;
  vertical-align: middle;
}

.register-page-regRetShow .logo-box img {
  width: 100%;
  vertical-align: middle;
}

.register-page-regRetShow .van-icon-cross {
  color: red;
}

.register-page-regRetShow .van-icon-success {
  color: green;
}

.nick-name-page {
  padding: 1rem 0.5rem;
}

.nick-name-page .nick-name-box {
  text-align: center;
}

.nick-name-page .success-tips {
  text-align: center;
}

.nick-name-page .success-tips p {
  color: #666;
  font-size: 0.5rem;
}

.nick-name-page .suggest-tips p {
  color: #666;
  font-size: 0.4rem;
  padding: 0 0.2rem;
}

#app .nick-name-page .form-box {
  margin: 1rem auto 1.5rem;
  width: 77%;
}

.nick-name-page .form-box .el-input__inner {
  width: 300px;
}

.nick-name-page .btn-box {
  text-align: center;
  width: 77%;
  margin: auto;
}

.nick-name-page .btn-box .btn-sms {
  color: var(--white-color);
  background-color: var(--main-color);
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: var(--border-radius-size);
}

.nick-name-page .login-input {
  border-radius: var(--input-border-radius);
  background-color: #f5f5f5;
  margin-bottom: 0.44rem;
}

/*register end */

/* myRBT start */
.myrbt-login-btn {
  padding: 0 0.8rem;
  text-align: center;
}

.myrbt-login-btn .tabs-color {
  background-color: var(--main-color);
  color: var(--white-color);
}

.myrbt-videoTabs-title {
  font-size: 0.4rem;
  font-weight: bold;
  padding: 0.2rem 0.4rem;
}

.myrbt-logo {
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
  margin: 0.3rem auto;
}

.myrbt-logo-login {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--main-color);
  text-align: center;
  line-height: 1.8rem;
  color: var(--white-color);
  font-size: 0.6rem;
}

.myrbt-login-btn .login-button {
  margin: 0 auto;
  color: var(--span-font-color);
  font-size: 0.4rem;
  font-weight: bold;
}

.myrbt-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.myrbt-list-container {
  padding: 0.5rem 0.6rem;
}

.myrbt-list-container .van-cell {
  padding: 0.3rem 0.5rem;
  color: #4f5e7bff;
}

.myrbt-list-logo {
  width: 0.6rem;
  margin-right: 0.5rem;
}

.color-href {
  color: var(--main-color);
  font-size: 0.3rem;
}

.setting-list-logo {
  width: 0.6rem;
  margin-right: 0.5rem;
}

.login-user {
  display: inline-block;
  vertical-align: middle;
  color: var(--span-font-color);
  font-size: 0.45rem;
  font-weight: bold;
  width: 5rem;
  margin: 0.2rem auto;
}

.myrbt-middle {
  display: flex;
  justify-content: space-around;
  width: 85%;
  padding: 0.3rem 0;
  font-size: 0.35rem;
  margin: 0.4rem auto;
  box-shadow: 0 0 0.5rem #e8e8e8;
  border-radius: var(--input-border-radius);
}

.myrbt-middle-item {
  text-align: center;
  width: 2rem;
}

.myrbt-middle-item-img {
  width: 1.2rem;
  border-radius: 50%;
  margin-bottom: 0.2rem;
}

/* myRBT end */

/* login start */
.login-logo {
  position: relative;
  width: 100%;
  height: 3.5rem;
}

.login-logo img {
  position: absolute;
  height: 2.2rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.register-form .policy-bg {
  height: 1.85rem;
  padding: 2rem 1.6rem;
  padding-bottom: 0;
  background: url(../../images/icon/login_bg2.webp) no-repeat -1rem 0;
  background-size: 50%;
}

.register-form .policy-bg .policy-btn {
  color: var(--main-color);
  text-decoration: underline;
}

.register-form .login-btn-submit {
  margin-top: 1rem;
  text-align: center;
  width: 100%;
}

.register-form .main-color {
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: var(--border-radius-size);
  padding: 0.25rem 2.8rem;
}

.register-form .van-checkbox__icon--checked .van-icon {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.register-form .login-btn-submit .main-color {
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: var(--border-radius-size);
  padding: 0.25rem 2.8rem;
}

.register-form .login-btn-submit .white-color {
  margin-top: 0.3rem;
  background-color: var(--white-color);
  color: var(--main-color);
  border-color: var(--main-color);
  border-radius: var(--border-radius-size);
  padding: 0.25rem 2.8rem;
}

.register-form .login-btn-submit .van-button--normal {
  width: 76%;
}

.login-form-change {
  display: flex;
  justify-content: space-between;
  width: 82%;
  margin: 0 auto;
  color: #1C1C1C;
  font-size: 0.36rem;
  font-family: Roboto;
}

/* login end */

/*Banner start*/
.banner .banner-swipe {
  height: 4rem;
  width: 90%;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  border-radius: var(--border-radius-size);
}

.recommend .recommend-swipe {
  height: 4.4rem;
  margin-left: 0.5rem;
  width: 90%;
}

.recommend .swiper-slide {
  height: 4.4rem !important;
  width: 3.4rem !important;
}

.recommend-swipe-div {
  padding: 0 0.5rem;
}

.recommend .tr-layer-bottom-line {
  display: flex;
  justify-content: flex-start;
}

.banner .banner-img {
  width: 100%;
  height: 4rem;
  border-radius: var(--border-radius-size);
}

.banner .l-tool {
  margin-left: 1.18rem;
  margin-bottom: 1.18rem;
}

.banner .tr-layer {
  position: absolute;
  bottom: 0;
  padding: 0.2rem 0rem;
  width: 100%;
}

.recommend .recommend-title {
  width: 9rem;
  margin: 0.6rem 0.5rem;
  font-size: 0.5rem;
  color: var(--span-font-color);
  font-weight: bold;
}

.recommend .recommend-swipe-div .tr-layer .tr-layer-bottom-line .recommend-more .van-image__img {
  width: 0.1rem;
  height: 0.4rem;
  margin-top: 0.15rem;
  margin-left: 0.2rem;
}

.recommend .recommend-swipe-div .tr-layer .tr-layer-bottom-line .recommend-down .van-image__img {
  width: 0.2rem;
  height: 0.4rem;
  margin-top: 0.15rem;
  margin-left: 0.1rem;
}

/*Banner end*/

/**ranks begin**/
.recommend .recommend-swipe-div .van-image__img {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 10%;
}

.recommend .recommend-swipe-div .tr-layer .van-image__img {
  width: 1rem;
  height: 1rem;
}

#appElement .van-tabs .van-tab.van-tab--active {
  color: var(--main-color);
}

#appElement .ranks .van-tabs .van-tab.van-tab--active {
  color: var(--white-color);
}

#appElement .van-tabs .van-tab{
  color: var(--tab-default-color);
}

.ranks .van-tab--active {
  color: var(--white-color);
  font-weight: 500;
  background-color: var(--main-color) !important;
}

.ranks .van-tabs__line {
  background-color: var(--white-color);
}

.ranks .van-tab {
  height: 1rem;
  margin-left: 0.6rem;
  border-radius: 10%;
  padding: 0 0.3rem;
  background-color: #f1f0f0;
}

.ranks .recommend .recommend-swipe {
  height: 4.4rem;
  margin-left: 0.5rem;
  width: 90%;
}

.ranks .l-tool {
  margin-bottom: 1.18rem;
  margin-left: 1.18rem;
}

.ranks .tr-layer {
  position: absolute;
  bottom: 0;
  padding: 0.2rem 0rem;
  width: 100%;
}

.my-swipe .van-swipe-item {
  width: 8rem !important;
}

/**ranks end**/
/**recommendBox begin**/

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tr-layer .song-txt {
  color: var(--span-font-color);
  line-height: 0.4rem;
  padding-left: 0.08rem;
  width: 2.5rem;
}

.tr-layer .singer-txt {
  color: var(--recommed-singer-name-color);
  line-height: 0.4rem;
  padding-left: 0.08rem;
  width: 2.5rem;
}

/**recommendBox end**/

/**Contact begin**/
.nav-bar-contact .van-nav-bar__arrow {
  margin-right: 0.10667rem;
  font-size: 0.52667rem;
}

.nav-bar-contact .van-nav-bar .van-icon {
  color: #0c0d0d;
}

.contact-body .van-tab {
  font-size: var(--tab-font-size);
  line-height: 0.53333rem;
  font-weight: var(--tab-font-weight);
}

.van-dialog__message {
  overflow-y: inherit !important;
}

.contact-body .van-tab--active {
  color: var(--main-color);
}

.contact-body .van-cell {
  line-height: 0.6rem;
}

.contact-body .empty-sec {
  text-align: center;
  margin-top: 35%;
}

.contact-body .index-anchor-title {
  background-color: #fafafa;
  height: 0.6rem;
  padding-left: 0.6rem;
  padding-top: 0.25rem;
  padding-bottom: 0.1rem;
  color: #000000ff;
  font-weight: bold;
  font-size: 0.47rem;
  line-height: 0.47rem;
  letter-spacing: 0rem;
  text-align: left;
}

.add-group-body .contact-body .index-anchor-title {
  padding-left: 1.2rem;
}

.contact-body .van-nav-bar .van-icon {
  color: #0c0d0d;
}

.contact-body .nav-bar-contact .van-nav-bar .van-icon {
  color: #0c0d0d;
}

.contact-body .van-tabs__line {
  position: absolute;
  bottom: 0.4rem;
  left: 0;
  z-index: 1;
  width: 2.06667rem;
  height: 0.05rem;
  background-color: var(--main-color) !important;
  border-radius: 0.08rem;
}

.contact-body .van-checkbox__icon--checked .van-icon {
  color: var(--white-color);
  background-color: var(--telecom-color);
  border-color: var(--telecom-color);
}

.contact-body .van-checkbox__icon .van-icon {
  width: 0.53rem;
  height: 0.53rem;
}

.contact-body .contact-info {
  margin-top: 0.2rem;
}

.contact-body .contact-content .van-swipe-cell__wrapper {
  padding: 10px 0;
}

.contact-body .group-info {
  margin-top: 0.2rem;
}

.contact-body .van-checkbox {
  margin-top: 0.45rem;
  margin-left: 0.2rem;
}

.contact-body .group-description {
  margin-top: 0.1rem;
  width: 3rem;
}

.contact-body .contact-button .van-button--info {
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  height: 0.9rem;
  width: 70%;
  margin: 0 auto;
  border-radius: var(--border-radius-size);
}

.contact-body .contact-button.contact-button-group .van-button--info {
  width: 40%;
}

.contact-body .contact-content {
  padding-bottom: 1.6rem;
  overflow: auto;
}

.contact-body .contact-content .van-cell__value {
  text-align: left;
}

.add-group-body .contact-body .contact-content {
  padding-bottom: 1.7rem;
  overflow: auto;
}

.contact-body .contact-button .van-button--small {
  font-size: 0.42rem;
}

.contact-body .contact-content .contact-pic .icon-list-item h5{
  display: none;
}

.contact-body .contact-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background-color: white;
  height: 1.4rem;
  padding-top: 0.5rem;
  max-width: 768px;
}

.contact-body .caller-name {
  color: var(--span-font-color);
  font-weight: bold;
  font-size: 0.37rem;
  line-height: normal;
  letter-spacing: 0rem;
  text-align: left;
  margin-bottom: 0.18rem;
  width: 100%;
}

.contact-body .van-tab {
  font-size: var(--tab-font-size);
  line-height: 0.53333rem;
  font-weight: var(--tab-font-weight);
  letter-spacing: -0.08px;
  text-align: center;
}

.contact-body .van-cell {
  line-height: 0.6rem;
}

.contact-body .van-nav-bar .van-icon {
  color: #0c0d0d;
}

.contact-body .select-group .van-nav-bar .van-icon {
  color: var(--white-color);
}

.contact-body .select-group .van-button--info {
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

.contact-body .nav-bar-contact .van-nav-bar .van-icon {
  color: var(--black-color);
}

.add-group-body .van-button--info {
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: var(--border-radius-size);
  width: 80%;
  margin: 0.2rem auto 0 auto;
}

.add-group-body .group-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  height: 1.4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.2rem;
  max-width: 768px;
}

/**AddContact**/
.add-contact-body .van-button--block {
  border-radius: var(--border-radius-size);
  width: 85%;
  margin: 2rem auto 0 auto;
}

.add-contact-body .close-icon {
  margin-top: 0.14rem;
  margin-left: 0.2rem;
}

.add-contact-body .icon-add-button .icon-add-group {
  margin-left: 0.3rem;
  width: 1.3rem;
}

.add-contact-body .icon-add-button .group-span {
  color: #bdbab7;
}

.add-contact-body .van-button--info {
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

.contact-body .van-button--danger {
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  height: 100%;
}

.add-contact-body .icon-add-button {
  margin-left: 0.8rem;
  margin-top: 0.5rem;
}

/**ContactHead**/
.nav-bar-contact .van-nav-bar__title {
  max-width: 60%;
  margin: 0 auto;
  font-weight: var(--title-font-weight);
  font-size: var(--title-font-size);
}

/**GroupItem**/
.contact-body .group-item-cell .van-button--danger {
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

.contact-body .group-item-cell .group-row {
  margin-left: 0.3rem;
}

/**Contact end**/

/**categories start**/
.categories {
  margin-bottom: 1.2rem;
}

.categories .van-tabs>div {
  min-height: 2.45rem;
}

.categories .van-tabs__nav--card {
  height: 100% !important;
  border: none;
  margin: 0;
}

.categories .van-tabs__nav--card .van-tab {
  width: auto;
  opacity: 0.49;
  padding: 0.1rem;
  flex: none;
}

.categories .van-tabs__nav--card .van-tab .icon-list-item {
  width: 2rem;
  padding-top: 0.25rem;
}

.categories .van-tabs__nav--card .van-tab--active {
  opacity: 1;
}

.categories .van-tabs__nav--card .h5 {
  color: rgb(26, 26, 26);
}

.icon-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-list-item>h5 {
  text-align: center;
  margin: 0.2rem;
  font-size: 0.34rem;
  color: rgb(26, 26, 26);
  width: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
}

.icon-list-item .icon-normal {
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  display: inline-block;
  border-radius: 50%;
  background-color: var(--main-color);
  vertical-align: middle;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0px;
  color: #ffffff;
  word-break: break-all;
  font-size: 0.36rem;
}

.icon-list-item .icon-normal-contact {
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0px;
  color: #ffffff;
  word-break: break-all;
  font-size: 0.56rem;
}

.icon-list-item .icon-normal-contact_0,
.add-advanceSetting .contact-box-item-icon_0 {
  background-color: var(--main-color);
}

.icon-list-item .icon-normal-contact_1,
.add-advanceSetting .contact-box-item-icon_1 {
  background-color: var(--contact-list-one);
}

.icon-list-item .icon-normal-contact_2,
.add-advanceSetting .contact-box-item-icon_2 {
  background-color: var(--contact-list-second);
}

.icon-list-item .icon-normal-contact_3,
.add-advanceSetting .contact-box-item-icon_3 {
  background-color: var(--contact-list-Three);
}

/**categories end**/

/*operations start */
.reauthen-box .van-dialog__header {
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.reauthen-box .register-form .login-input {
  margin: 0 1rem;
  border-radius: 0.2rem;
  background-color: #f5f5f5;
  margin-bottom: 0.44rem;
}

.operation-title {
  color: var(--span-font-color);
  margin-left: 0.43rem;
  font-weight: 700;
  font-size: 0.49rem;
  line-height: normal;
  letter-spacing: 0rem;
  text-align: left;
}

.nav-bar-operation {
  display: flex;
}

.nav-bar-operation .left-arrow {
  width: 0.25rem;
  height: 0.44rem;
  margin-left: 0.6rem;
  margin-top: 0.35rem;
  background-image: url(../../images/icon/profile_back.webp);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 99;
}

.nav-bar-operation .desc {
  flex: 1;
  text-align: center;
  margin-left: -0.85rem;
}

.operation-main .login-input {
  margin: 0 1rem;
  border-radius: var(--input-border-radius);
  background-color: #f5f5f5;
  margin-bottom: 0.44rem;
  height: 1.5rem;
  line-height: 1rem;
}

.operation-logo {
  background-color: var(--main-color);
  width: 4rem;
  height: 4rem;
  margin: 1rem auto;
  text-align: center;
  line-height: 4rem;
}

.operation-desc-box {
  margin: 0.5rem 0 0.5rem 0.43rem;
}

.operation-desc-box .desc-box-img {
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.4rem;
  text-align: center;
  margin-right: 0.5rem;
}

.operation-desc-box .desc-box-img img {
  width: 100%;
  height: 100%;
}

.operation-desc-box .desc-content .desc-key {
  font-weight: 700;
  margin-top: 0;
}

.operation-desc-box .desc-value {
  color: #666;
  margin-top: 0;
  margin-left: 0.2rem;
  overflow: hidden;
  width: 2.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-form-box {
  width: 80%;
  margin: 0.5rem auto;
  margin-bottom: 1rem;
}

.operation-form-box .van-dropdown-item--down {
  width: 76%;
  margin: 0 auto;
}

.operation-form-box .van-radio--horizontal {
  margin-left: 1rem;
  margin-right: 1rem;
}

.operation-form-box .van-radio__icon--checked .van-icon {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.operation-btn-box {
  display: flex;
  margin: 0 auto;
  margin-bottom: 0.5rem;
  justify-content: space-around;
}

.operation-btn-box .van-button {
  width: 4.6rem;
  border: 0.02rem solid var(--main-color);
  border-radius: var(--border-radius-size);
}

.operation-btn-box .van-button--normal {
  background-color: var(--main-color);
  color: white;
}

.operation-btn-box .main-color {
  background-color: var(--main-color);
  color: var(--white-color);
}

.operation-btn-box .van-button--normal.default-color {
  background-color: var(--white-color);
  color: var(--main-color);
}

/* operations end */

/* download start */
.operation-result-box .btn-box {
  margin-top: 0.6rem;
  padding-bottom: 1rem;
  text-align: center;
}

.operation-result-box .van-checkbox__icon--checked .van-icon {
  background-color: var(--telecom-color);
  border-color: var(--telecom-color);
}

.operation-result-box .btn-box .main-color {
  width: 80%;
  padding: 0.25rem 0;
  border-radius: var(--border-radius-size);
  background-color: var(--main-color);
  color: var(--white-color);
}

.operation-result-box .btn {
  padding: 10px 20px;
  margin-right: 20px;
}

.operation-result-box .resultMsg {
  color: #383838cc;
  font-weight: regular;
  font-size: 0.43rem;
  line-height: 0.7rem;
  letter-spacing: 0rem;
  text-align: center;
  padding: 0 1rem;
}

.operation-result-box .failed-box {
  margin: 0.5rem auto;
  padding-top: 0.5rem;
  text-align: center;
}

.operation-result-box .failed-box img {
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.2rem;
}

.operation-result-box .failed-box p {
  color: #383838;
  font-weight: bold;
  font-size: 0.65rem;
  line-height: normal;
  letter-spacing: 0rem;
  text-align: center;
}

.operation-result-box .success-box .content {
  margin: 0.5rem auto;
  padding-top: 0.5rem;
  text-align: center;
}

.operation-result-box .success-box .van-checkbox__label {
  color: #383838cc;
  font-weight: regular;
  font-size: 0.43rem;
  line-height: 0.7rem;
  letter-spacing: 0rem;
}

.operation-result-box .success-box .content img {
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.2rem;
}

.operation-result-box .success-box .content p {
  color: #383838;
  font-weight: bold;
  font-size: 0.65rem;
  line-height: normal;
  letter-spacing: 0rem;
  text-align: center;
}

.operation-result-box .success-box .check-item {
  width: 6.6rem;
  margin: 0.5rem auto;
}

.operation-result-box .success-box .btn-box {
  margin-top: 0.5rem;
  padding-bottom: 1rem;
}

.operation-result-box .success-box .btn-box .van-button--normal {
  width: 80%;
  padding: 0.25rem 0;
}

.renew-result-box {
  margin-top: 1rem;
}

.renew-result-box .res-li {
  display: flex;
  margin: 0.4rem;
}

.renew-result-box .res-li img {
  display: block;
  margin-right: 0.2rem;
  height: 0.43rem;
  width: 0.43rem;
}

.renew-result-box .res-li p {
  font-size: 0.43rem;
  margin: 0;
  color: #383838cc;
}

.renew-result-box .btn-box {
  text-align: center;
  padding-bottom: 1rem;
}

.renew-result-box .btn-box .main-color {
  background-color: var(--main-color);
  color: var(--white-color);
}

.renew-result-box .btn-box .van-button--normal {
  width: 80%;
  padding: 0.25rem 0;
  border-radius: var(--border-radius-size);
}

/* download end */

/* present start */
.present-form {
  width: 76%;
}
.present-form .van-form .van-field .van-field__value .van-field__error-message {
  margin-top: 0 !important;
}

/* present end */

/* audio start */
.listen {
  background: url(../../images/icon/bg.webp) no-repeat 0 0;
}

.h-tool.listen {
  width: 30px;
  height: 30px;
  background-position: -487px -68px;
}

.h-tool,
.l-tool,
.op-tool {
  cursor: pointer;
}

.h-tool {
  float: left;
  margin: 0 5px;
}

.h-tool.listen.stop {
  width: 30px;
  height: 30px;
  background-position: -456px -68px;
}

.tone-line-box .tone-play {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-right: 0.25rem;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../../images/icon/play.webp) no-repeat;
  background-size: contain;
}

.tone-line-box .tone-stop {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-right: 0.25rem;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../../images/icon/bg.webp) no-repeat -66px -194px;
}

.tone-line-box .content {
  width: 100%;
}

.tone-line-box .content .singer {
  color: #9d9d9d;
  margin-top: 0.1rem;
}

.tone-line-box .content .tone {
  font-size: 0.4rem;
  margin-bottom: 0;
}

.tone-line-img {
  position: relative;
  display: inline-block;
}

.tone-line-img .diy-mark {
  position: absolute;
  color: var(--white-color);
  font-size: 0.2rem;
  text-align: center;
  width: 0.5rem;
  top: 0;
  right: 0;
  padding: 0.06rem;
  background: var(--orange-color);
  border-top-right-radius: var(--border-radius-size);
}

/* audio end */

/* download_box start */
.download-box .tone-box-header .img-box {
  text-align: center;
}

.download-box .audio-list-box .table-header {
  display: flex;
  margin-top: 0.5rem;
  border-bottom: 1px solid #9d9d9d;
  width: 100%;
  justify-content: space-between;
}

.download-box .audio-list-box .table-header .box-info-desc {
  margin-left: 0.5rem;
}

.download-box .audio-list-box .table-header .box-info-boxId {
  color: #9d9d9d;
}

.download-box .audio-list-box .table-header .box-info-desc .box-name {
  font-size: 0.7rem;
}

.download-box .audio-list-box .table-header .box-info-desc .box-info span {
  color: #9d9d9d;
}

.download-box .audio-list-box .table-header .box-info-desc .box-info span.info-validay {
  color: #9d9d9d;
  display: inline-block;
  margin-left: 0.3rem;
}

.download-box .audio-list-box .table-header .box-play-control {
  padding-top: 0.5rem;
  margin-right: 0.5rem;
}

.download-box .audio-list-box .table-header p {
  margin: 0;
  line-height: 0.8rem;
}

.download-box .audio-list-box .table-header .all-play-box {
  display: inline-block;
  flex: 1;
  padding-left: 10px;
}

/* download_box end */

.indexbar {
  position: fixed;
  top: 16%;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.initail-header-text {
  border-radius: 50%;
  width: 0.4rem;
  margin-top: 0.01rem;
}

.text-activated {
  background: var(--main-color);
}

/**component dialog**/
.dialog .van-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog .van-popup {
  border-radius: 0.03rem;
}

.dialog-content {
  width: 8.65rem;
  border-radius: 0.03rem;
}

.dialog-content-text {
  padding: 0.38rem;
  font-size: 0.53rem;
}

.dialog-button-group {
  margin-bottom: 0.6rem;
  padding: 0 0.48rem;
  display: flex;
  justify-content: space-evenly;
}

/**component dialog end**/

/**IconAdd**/
.icon-add-circle-first {
  fill: #efeeed;
}

.icon-add-circle-second {
  fill: none;
  stroke: #bbbaba;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke-dasharray: 14.1268, 10.0906;
}

.icon-add-circle-Three {
  fill: #c0bfbf;
}

/****/

/* forget password start */
.forget-password-box {
  margin-top: 1rem;
}

.forget-password-page .logo {
  text-align: center;
  padding-top: 1rem;
}

.forget-password-page .logo img {
  height: 2.2rem;
}

.forget-password-page .congratulate-box {
  margin-top: 1.2rem;
  justify-content: center;
}

.forget-password-page .form-box {
  text-align: center;
  margin-bottom: 1rem;
}

.forget-password-page .form-box .main-color {
  color: var(--white-color);
  background-color: var(--main-color);
  border-radius: var(--border-radius-size);
}

.forget-password-page .congratulate-box img {
  width: 1.8rem;
  height: 1.8rem;
}

.forget-password-page .congratulate-box .success-tips {
  font-size: 0.5rem;
  text-align: center;
}

.forget-password-page .congratulate-box .success-tips p {
  color: #666;
  display: inline-block;
  line-height: 0.8rem;
  margin-left: 0.6rem;
}

.forget-password-page .suggest-tips {
  padding: 0.5rem;
  font-size: 0.5rem;
  text-align: center;
}

/* forget password end */

/* policy start */
.policy-content {
  height: 12rem;
  overflow: auto;
  padding: 0.2rem 0.5rem;
}

.policy-main-box .confirm-policy {
  border-top: 1px solid #ccc;
  padding: 1rem 0.4rem;
  text-align: center;
  margin-top: 0.5rem;
}

.policy-main-box .confirm-policy-text {
  color: var(--main-color);
  text-decoration: underline;
  margin: 0 0.15rem;
  cursor: pointer;
}

.policy-main-box .confirm-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
}

.policy-main-box .policy-btn {
  width: 3.2rem;
  height: 1rem;
  border-radius: var(--border-radius-size);
}

.policy-main-box .button-yellow {
  background-color: var(--main-color);
  border: none;
  color: white;
  outline: none;
}

/* policy end */

/***OrdinarySettings**/
.ordinary-settings .setting-tips {
  margin-left: 0.4rem;
  line-height: 0.7rem;
  margin-top: 0.2rem;
  font-size: 0.37rem;
  color: var(--main-color);
}

.ordinary-settings .setting-tips-click-icon {
  width: 0.5rem;
}

.ordinary-settings .setting-tips .setting-tips-settingNum-number {
  color: var(--main-color);
  margin: 0 5px;
}

.ordinary-settings .van-tabs__line {
  background-color: var(--main-color) !important;
  width: 23%;
}

.ordinary-settings .tableLine .bell {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.3rem;
  background: url(../../images/icon/unbell_1.webp) no-repeat;
  background-size: cover;
}

.ordinary-settings .van-tabs__wrap--scrollable .van-tab {
  font-size: 0.45rem;
}

.ordinary-settings .van-tab--active {
  color: var(--main-color);
}

.forget-password-page .forgetPWD-title {
  text-align: center;
  color: var(--telecom-color);
  font-weight: bold;
  margin-top: 0.5rem;
  font-size: 17px;
}

.ordinary-settings .tableLine .bell_ed {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.3rem;
  background: url(../../images/icon/ring.webp) no-repeat;
  background-size: contain;
}

/* MyAccount start*/
.my-account {
  border-top: 1px solid #fdfbfb;
  background-color: #ffffff;
  height: 100%;
}

.my-account-info {
  background-color: var(--white-color);
  padding: 0 0.1rem;
  margin-bottom: 0.3rem;
}

.my-account-phoneNumberIcon {
  background: url(../../images/icon/phone.webp) no-repeat;
  background-size: 10%;
  font-size: 1em;
  text-indent: 1rem;
  line-height: 1rem;
}

.my-account-phoneNumber {
  color: #949292;
  width: 26%;
  margin: auto;
  display: flex;
  border-bottom: 0rem solid #ffffff;
}

.my-account-bottom {
  padding: 0.6rem;
  background: var(--page-bg);
}

.my-account-operate {
  height: 2.1rem;
  line-height: 1.25rem;
}

.my-account-info-item:not(:last-child),
.my-account-operate-item:not(:last-child),
.my-account-pray-item {
  width: 90%;
  margin: auto;
  display: flex;
  border-bottom: 0rem solid #ffffff;
}

.nickname {
  background: url(../../images/icon/name.webp) no-repeat;
  background-size: 8%;
  font-size: 1em !important;
  text-indent: 1rem;
}

.birthday {
  background: url(../../images/icon/birthday.webp) no-repeat;
  background-size: 8%;
  font-size: 1em;
  text-indent: 1rem;
  top: -1rem;
}

.gender {
  background: url(../../images/icon/gender.webp) no-repeat;
  background-size: 8%;
  font-size: 1em;
  text-indent: 1rem;
}

.email {
  background: url(../../images/icon/email.webp) no-repeat;
  background-size: 8%;
  font-size: 1em;
  text-indent: 1rem;
}

.called {
  background: url(../../images/icon/called.webp) no-repeat;
  background-size: 8%;
  font-size: 0.37rem;
  text-indent: 1rem;
}

.calling {
  background: url(../../images/icon/caller.webp) no-repeat;
  background-size: 8%;
  font-size: 0.37rem;
  text-indent: 1rem;
}

.pray,
.calledRBTService,
.callingRBTService,
.prayService {
  font-size: 0.37rem;
  line-height: 1rem;
}

.my-account-info-item:last-child,
.my-account-operate-item:last-child {
  width: 90%;
  margin: auto;
  display: flex;
}

.my-account-info-list,
.my-account-operate-list,
.my-account-pray-list {
  width: 90%;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-account-bottom .my-account-operate .my-account-btnBox {
  justify-content: center;
}

.nicknameText {
  margin-top: -0.15rem;
}

.birthdayText {
  margin-top: -0.1rem;
}

.genderText {
  margin-top: 0rem;
}

.emailText {
  margin-top: -0.25rem;
}

.prayPause {
  margin: 0.25rem 0.5rem !important;
  height: 0.9rem !important;
  background-color: var(--white-color) !important;
  color: var(--main-color) !important;
  border-radius: var(--border-radius-size) !important;
  border: 0.005rem var(--main-color) solid !important;
  width: 40%;
}

.prayChangeArea {
  margin: 0.25rem 0.5rem !important;
  height: 0.9rem !important;
  background-color: var(--white-color) !important;
  color: var(--main-color) !important;
  border-radius: var(--border-radius-size) !important;
  border: 0.005rem var(--main-color) solid !important;
  width: 40%;
}

.praySub {
  margin: 0.25rem 0.5rem !important;
  height: 0.9rem !important;
  background-color: var(--main-color) !important;
  color: var(--white-color) !important;
  border-radius: var(--border-radius-size) !important;
  width: 40%;
}

.prayUnsub {
  margin: 0.25rem 0.5rem !important;
  height: 0.9rem !important;
  background-color: var(--main-color) !important;
  color: var(--white-color) !important;
  border-radius: var(--border-radius-size) !important;
  width: 40%;
}

.my-account-font {
  margin-top: -8px;
  line-height: 12px;
}

.my-account-item-left {
  margin-right: -2.9rem;
  float: right;
  margin-top: -0.1rem;
}

.my-account-operate-list,
.my-account-pray-list {
  width: 100%;
}

.my-account-info-edit,
.my-account-info-edit {
  width: 40%;
  height: 1.1rem;
  line-height: 1.16rem;
  text-align: right;
}

.my-account-operate,
.my-account-pray {
  background-color: var(--white-color);
}

.my-account-btnBox {
  width: 100%;
  margin: auto;
  display: flex;
}

.my-account-btnBox .pray-btn {
  margin: 0.25rem 0.5rem;
  height: 0.9rem;
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: var(--border-radius-size);
  width: 40%;
}

.my-account-btnBox .pray-btn-disabled {
  margin: 0.25rem 0.25rem 0.25rem 0;
  height: 0.9rem;
  background-color: var(--main-color);
  color: var(--white-color);
}

.unpraySubBtn {
  background-color: var(--main-color) !important;
  /* Green */
  border: none !important;
  color: white !important;
  padding: 15px 32px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  border-radius: var(--border-radius-size) !important;
  margin: 0.25rem 2.5rem 0.25rem 20px !important;
  height: 0.85rem !important;
  font-size: 0.35rem !important;
  width: 105px !important;
}

.my-account-currentPrayArea {
  display: flex;
  align-items: center;
  padding-right: 0.1rem;
}

.my-account-changeArea-icon {
  height: 0.6rem;
  margin-right: 0.2rem;
}

.my-account-changeArea-tips {
  font-size: 0.35rem;
  padding-left: 0.2rem;
  color: var(--main-color);
  line-height: 25px !important;
}

.my-account-changeArea-tableBox {
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 1rem;
}

.my-account-changeArea-tableBox-header {
  height: 1rem;
  background-color: #eed5c6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.25rem 0 0.25rem;
}

.my-account-changeArea-tableBox-left,
.my-account-changeArea-tableBox-right {
  color: var(--main-color);
  font-size: 0.4rem;
  cursor: pointer;
}

.my-account-changeArea-tableBox-date {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
}

.my-account-changeArea-tableBox-table {
  width: 100%;
  overflow: auto;
}

.my-account-changeArea-tableBox-table-thead th {
  border-bottom: 1px solid var(--main-color);
  height: 1rem;
  color: #7e7c7c;
}

.my-account-changeArea-tableBox-table-tbody .no-data {
  color: #7e7c7c;
}

.my-account-changeArea-tableBox-table-tbody tr td {
  height: 1rem;
  text-align: center;
}

.my-account-changeArea-tableBox-table-tbody tr:not(:last-child) td {
  border-bottom: 1px solid #e4e3e3;
}

.my-account-changeArea-btnBox {
  display: flex;
  justify-content: center;
  width: 55%;
  margin: 0.25rem auto;
}

.my-account-changeArea-btnBox-ok {
  height: 0.9rem !important;
  width: 6rem;
  background-color: var(--main-color) !important;
  color: var(--white-color) !important;
  border-radius: var(--border-radius-size) !important;
}

.my-account-info-dialog {
  padding-top: 0.6rem;
}

.my-account-info-radio {
  padding-left: 0.7rem;
  height: 0.9rem;
  font-size: 0.4rem;
}

.my-account-info-datepicker {
  border-bottom: 1px solid #e4e3e3;
  margin-bottom: 0.6rem;
}

.my-account-edit-label {
  height: 0.8rem;
  line-height: 0.8rem;
  padding-left: 0.4rem;
}

.edit-info-btnBox {
  display: flex;
  justify-content: space-around;
  margin: 0.3rem 0 0.3rem 0;
}

.edit-areaChange-btnBox {
  display: flex;
  justify-content: space-around;
  margin: 0rem 0 0rem 0;
  background-color: #ffffff;
  height: 1.5rem;
}

.edit-info-btn.cancel {
  width: 2.8rem;
  height: 0.9rem !important;
  border: 0.005rem var(--main-color) solid;
  border-radius: var(--border-radius-size);
}

.edit-info-btn.confirm {
  width: 2.8rem;
  height: 0.9rem !important;
  background-color: var(--main-color) !important;
  color: #fff;
  border: 0.005rem #ccd4e6 solid;
  border-radius: var(--border-radius-size);
}

.CalledRbtSer,
.CallingRbtSer,
.prayRbtItem {
  border-radius: var(--input-border-radius);
  margin-bottom: 0.6rem;
  padding: 0.2rem 0.1rem 0.8rem 0.1rem;
  box-shadow: #ddd 5px 0 10px;
  position: relative;
}

.my-account-bottom-line {
  position: absolute;
  width: 0.3rem;
  height: 0.1rem;
  background: var(--myaccount-line);
  top: 0;
  left: 0.55rem;
}

.my-account .my-account-icon {
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.2rem;
}

.my-account .my-account-value {
  width: 3rem;
  float: right;
}

/* MyAccount end*/

/* Modify Password start*/
.modify-pwd-step,
.modify-pwd-a {
  font-size: 0.37rem;
  margin-left: 1.2rem;
  line-height: 0.8rem;
}

.modify-pwd-a {
  color: var(--main-color);
  text-decoration: underline;
}

.modify-pwd-btnBox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  width: 100%;
}

.modify-pwd-btn {
  background-color: var(--main-color) !important;
  color: var(--white-color) !important;
  padding: 0.25rem 2.8rem;
}

.modify-pwd-captcha-inp {
  width: 70.3%;
  float: left;
  padding-left: 1.9888%;
}

.modify-pwd-captcha-img {
  width: 25%;
  height: 1.1rem;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
}

.modify-pwd-captcha-img-pic {
  width: 90%;
  height: 89%;
  padding-right: 30%;
}

.modify-pwd-rules {
  width: 85%;
  padding: 0.4rem 0.3rem 0.2rem 0.5rem;
  color: #8a8787;
  background-color: #f9f9f9;
  margin: auto;
  border-radius: var(--border-radius-size);
}

.modify-pwd-rules-icon {
  color: var(--main-color);
}

/*for Modify Pasword top padding*/
.modify-pwd .van-cell-group {
  background-color: #fff;
  padding-top: 0.28rem;
}

.modify-pwd .van-cell-group .van-field__control {
  width: 90%;
  padding: 0.4rem;
  background-color: #f6f2f0;
  border-radius: var(--input-border-radius);
  margin: auto;
}

/*for submit button*/
.modify-pwd-btnBox .van-button--normal {
  width: 83%;
  border-radius: var(--border-radius-size);
}

/*for delete line on box bottom*/
.modify-pwd .diy-van-field-control {
  position: static !important;
}

.modify-pwd .van-field__error-message {
  margin-left: 0.46rem;
}

.operation-main .van-field__error-message {
  margin-top: 8px;
}

/* Modify Password end*/

.recordline .content-title {
  font-size: 0.45rem;
  font-weight: bold;
  color: var(--span-font-color);
}

.recordline .right {
  float: right;
  margin-top: -0.3rem
}

.recordline .content-gray {
  color: #4F5E7B;
}

.recordline .color {
  color: var(--main-color);
}

.songTable .van-cell__value {
  text-align: left;
}

/* advanced settings start */
.advanced-setting-box {
  height: 100vh;
  background: var(--page-bg);
}

.advanced-setting-box .time-box span .van-icon {
  color: var(--main-color);
  margin-right: 0.2rem;
}

.advanced-setting-box .van-tabs__line {
  background-color: var(--main-color);
}

.advanced-setting-box .top-nav {
  position: relative;
}

.advanced-setting-box .top-nav .plus-icon {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 99;
}

.advanced-setting-box .list-item-style {
  padding: 0 0.5rem;
  margin: 0.3rem 0;
  background: transparent;
}

.advanced-setting-box .tone-list .list-style {
  text-align: left;
  padding: 0.3rem 0.5rem 0.2rem 0.5rem;
  background: var(--white-color);
  position: relative;
}

.advanced-setting-box .tone-list .list-style-icon img {
  height: 0.5rem;
}

.advanced-setting-box .tone-list .list-style-icon-delete {
  margin-left: 0.2rem;
}

.advanced-setting-box .list-style .list-style-icon {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
}

.advanced-setting-box .list-style .content {
  display: flex;
  margin-top: 0.1rem;
}

.advanced-setting-box .list-style .content .title {
  color: var(--gray-font-color);
}

.advanced-setting-box .list-style .content span {
  width: 50%;
}

.advanced-setting-box .list-style .content .content-value {
  color: var(--van-cell-text-color);;
}

.advanced-setting-box .list-style .time-box .content .content-value {
  display: inline-block;
  width: 2rem;
}

.advanced-setting-box .list-style .time-box .title {
  font-weight: 700;
}

.add-advanceSetting .time-box .time-box-img {
  height: 0.6rem;
  margin-right: 0.3rem;
}

.add-advanceSetting .advance-setting-add-list {
  padding: 0.2rem 0;
}

.add-advanceSetting .advance-setting-add-list .van-cell {
  background: var(--page-bg);
}

.add-advanceSetting .advance-setting-add-list .rbt-container,
.add-advanceSetting .advance-setting-add-list .musicBox-container {
  width: 95%;
  margin: auto;
  border-radius: var(--border-radius-size);
}

.play-priority .priority-box {
  width: 80%;
  border: 1px solid #ddd;
  margin: 0.5rem auto;
  box-shadow: 0px 0px 0.3rem #ccc;
  border-radius: 0.3rem;
}

.play-priority .priority-box .title {
  margin-right: 0.3rem;
  padding-left: 0.4rem;
  padding-top: 0.2rem;
}

.play-priority .priority-box .choose-box {
  padding: 0.25rem;
}

.play-priority .priority-box .choose-box .van-radio {
  margin-top: 0.15rem;
}

.play-priority .priority-box .choose-box .van-radio__icon--checked .van-icon {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.play-priority .priority-tip {
  text-align: center;
  margin: 0.8rem auto;
  width: 80%;
  font-size: 0.5rem;
}

.play-priority .priority-tip .tip-content {
  color: var(--main-color);
}

.hr-line {
  margin: 0.3rem 0;
}

.add-advanceSetting .advance-setting-timeType {
  width: 8.5rem;
}

.add-advanceSetting .advance-setting-timeType .title-timeType {
  padding-left: 0.4rem;
  font-size: 0.48rem;
}

.add-advanceSetting .advance-setting-timeType .btn-box {
  margin: 0.2rem auto;
  width: 100%;
  text-align: center;
}

.add-advanceSetting .advance-setting-timeType .btn-box .main-color {
  padding: 0.2rem 3rem;
  border-radius: var(--border-radius-size);
}

.add-advanceSetting .time-box {
  display: flex;
  justify-content: space-between;
}

.add-advanceSetting .time-box .time-title {
  font-weight: 700;
  font-size: 0.4rem;
}

.add-advanceSetting {
  padding-bottom: 0.1rem;
}

.add-advanceSetting .time-box .time-content {
  flex: 1;
  text-align: center;
  color: #9d9d9d;
}

.add-advanceSetting .van-radio__icon--checked .van-icon {
  background-color: var(--telecom-color);
  border-color: var(--telecom-color);
}

.add-advanceSetting .btn-box {
  margin: 1rem auto;
  width: 100%;
  text-align: center;
}

.add-advanceSetting .btn-box .main-color {
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: var(--border-radius-size);
  padding: 0.25rem 2.8rem;
}

.add-advanceSetting .contact-box {
  padding: 0.4rem 0.3rem;
}

.add-advanceSetting .contact-box .van-radio {
  margin-top: 0.2rem;
}

.add-advanceSetting .contact-box .contact-box-item {
  padding: 0.2rem 0.4rem;
  background: var(--page-bg);
  font-size: 0.4rem;
}

.add-advanceSetting .contact-box .contact-box-item>div {
  margin-bottom: 0.3rem;
}

.add-advanceSetting .contact-box-item-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: var(--white-color);
  margin-right: 0.2rem;
}

.add-advanceSetting .contact-box .contact-spec {
  padding-left: 0.4rem;
}

.add-advanceSetting .register-form .login-input {
  margin: 0;
  width: 4rem;
  margin-top: 0.2rem;
  height: 1rem;
  line-height: 0.6rem;
}

.add-advanceSetting .register-form .login-input.phoneNum {
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  height: 1rem;
  line-height: 1rem;
}

.add-advanceSetting .color-href {
  color: var(--main-color);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 0.4rem;
  margin-top: 0.4rem;
  line-height: 0.5rem;
}

.add-advanceSetting .contact-dialog-box {
  padding: 0.4rem;
  height: 6rem;
  overflow-y: scroll;
}

.add-advanceSetting .contact-dialog-box .hd {
  padding: 0.4rem 0.64rem;
}

.add-advanceSetting .contact-dialog-box .name-hd {
  width: 3rem;
  display: inline-block;
}

.add-advanceSetting .contact-dialog-box .name-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 0.2rem;
}

.add-advanceSetting .contact-dialog-box .phoneNumber-hd {
  width: 3.2rem;
  display: inline-block;
}

.add-advanceSetting .contact-dialog-box .phoneNumber-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.add-advanceSetting .contact-dialog-box .van-radio {
  margin-bottom: 0.2rem;
}

.add-advanceSetting .van-checkbox__icon--checked .van-icon {
  background-color: var(--telecom-color);
  border-color: var(--telecom-color);
}

.timePicker-advanceSetting .btn-box {
  margin: 1rem auto;
  width: 100%;
  text-align: center;
}

.timePicker-advanceSetting .btn-box .main-color {
  background-color: var(--main-color);
  color: var(--white-color);
}

.timePicker-advanceSetting .btn-box .confirm-btn {
  border-radius: var(--border-radius-size);
  width: 80%;
}

.timePicker-advanceSetting .van-picker__cancel {
  display: none;
}

.timePicker-advanceSetting .van-picker__confirm {
  display: none;
}

.timePicker-advanceSetting .van-picker__toolbar {
  justify-content: center;
}

.timePicker-advanceSetting .van-popup {
  position: absolute;
}

.time-picker-tile {
  text-align: center;
  font-weight: var(--title-font-weight);
  font-size: var(--title-font-size);
}

/* advanced settings end */

/**RankList begin**/
.newRank .van-tab {
  -webkit-flex: inherit;
  margin-left: 0.4rem;
}

.newRank .van-tabs__line {
  height: 0;
}

.newRank .rightSpan {
  float: right;
}

.newRank .highLight {
  font-weight: bold;
}

.newRank .title {
  text-align: center;
  margin-top: 0.2rem;
}

.newRank .tab {
  cursor: pointer;
  font-size: 0.5rem;
  color: var(--span-font-color);
}

.newRank .needRight {
  margin-left: 0.5rem;
  color: var(--span-font-color);
  font-size: 0.5rem;
}

.newRank .bold-ranks {
  font-weight: bold;
}

.newRank .van-tabs--line .van-tabs__wrap {
  width: 50%;
  float: left;
}

/**RankList end**/

/**TableLine begin**/
.tableLine img {
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 0.2rem;
}

.other-operator .van-action-sheet__item {
  height: 2.8rem;
  margin: 0.5rem 0.3rem;
  background-color: white;
  color: var(--main-color);
  border-radius: 1rem;
  font-size: 0.5rem;
}

.other-operator .van-action-sheet__item:hover {
  background-color: #F38100;
}

.share-to .share-to-title {
  color: var(--span-font-color);
  margin-left: 0.43rem;
  font-weight: 700;
  font-size: 0.49rem;
  line-height: normal;
  letter-spacing: 0rem;
  text-align: left;
}

.share-to .confirm-submit .van-button {
  width: 4.6rem;
  border: 0.02rem solid var(--main-color);
  border-radius: var(--border-radius-size);
}

.share-to .confirm-submit {
  display: flex;
  margin: 0 auto;
  margin-bottom: 0.5rem;
  justify-content: space-around;
}

.share-to .confirm-submit .white-color {
  margin-top: 0.3rem;
  background-color: var(--white-color);
  color: var(--main-color);
  border-color: var(--main-color);
  border-radius: var(--border-radius-size);
}

.share-to .confirm-submit .main-color {
  margin-top: 0.3rem;
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: var(--border-radius-size);
}

.share-to .van-picker-column__item {
  color: var(--span-font-color);
}

.other-operator .van-action-sheet__gap {
  display: block;
  height: 0.02rem;
  background-color: #f7f8fa;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.other-operator .van-action-sheet__cancel {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #0c0d0d;
  background-color: var(--white-color);
  height: 1.5rem;
  width: 100%;
  max-width: 768px;
  font-size: 0.5rem;
  margin: 0 auto;
}

.other-operator img {
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
}

.other-operator .other-operator-content {
  display: flex;
}

.tableLine .digital {
  line-height: 1rem;
  text-align: center;
}

.tableLine .song-txt {
  width: 70% !important;
}

.tableLine .singer-txt {
  font-size: 12px !important;
  margin-top: 0.05rem;
  width: 69%;
}

.tableLine .t-info {
  text-align: left;
}

.tableLine .sup {
  padding: 0 0.04rem;
  color: var(--white-color);
  font-weight: bold;
  background: var(--main-color);
}

.tableLine .single-line-txt-for-rbt-box {
  line-height: 1rem;
}

.tableLine .checkbox-middle {
  margin-top: 0.222rem;
}

.tableLine .diy-ellipsis {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**TableLine end**/

/* DIY */
.main-btn.van-button--default {
  background-color: var(--main-color);
  color: var(--white-color);
}

.diy-content {
  height: 8rem;
  position: relative;
}

.diy-content-img {
  width: 7rem;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.upload-button {
  margin-top: 2rem;
}

.diy-content-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.diy-button {
  text-align: center;
}

.upload-done {
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--main-color);
}

.upload-btn.van-button--default {
  margin: 0 0.6rem;
}

.diy-button .van-button {
  background-color: var(--main-color);
  border-color: var(--main-color);
  width: 75%;
  max-width: 10rem;
  border-radius: var(--border-radius-size);
}

.diy-button .van-uploader {
  width: 75%;
}

.diy-button .file-upload,
.diy-button .van-uploader__wrapper,
.diy-button .van-uploader__input-wrapper,
.diy-button .upload-btn {
  width: 100%;
}

.diy-button .upload-btn.van-button {
  margin: 0 0 0.5rem 0;
}

.diy-submit-icon {
  width: 0.6rem;
  margin-right: 0.3rem;
}

.show-content {
  margin: 1rem 0.5rem;
  text-align: center;
}

.show-content-tip {
  margin-bottom: 0.8rem;
  font-size: 0.45rem;
  font-weight: bold;
  text-align: center;
}

.upload-btn.van-button--default {
  margin: 0 0.6rem;
}

.show-content .file-upload {
  width: 42%;
}

.show-content .van-uploader,
.show-content .van-uploader__wrapper,
.show-content .van-uploader__input-wrapper,
.show-content .upload-btn {
  width: 100%;
}

.show-content .upload-btn {
  margin: 0;
  border-radius: var(--border-radius-size);
}

.show-content .not-allow {
  width: 42%;
  border-radius: var(--border-radius-size);
  margin-right: 0.5rem;
  background-color: transparent;
  color: var(--main-color);
  border-color: var(--main-color);
}

.show-content .allow {
  width: 42%;
  border-radius: var(--border-radius-size);
  margin-right: 0.5rem;
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.file-upload {
  display: inline-block;
}

.resource-select .van-field__label {
  width: 50%;
}

.resource-select .van-field__control {
  text-align: right;
}

.diy-submit-btn.van-button {
  margin: 1rem 0.3rem;
  width: 70%;
  max-width: 8rem;
  border-radius: var(--border-radius-size);
}

.diy-manage {
  height: 100%;
  padding-bottom: 2rem;
  position: relative;
  box-sizing: border-box;
}

.diy-now {
  text-align: center;
  height: 2rem;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.diy-upload-button.van-button {
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: var(--border-radius-size);
  width: 70%;
  max-width: 8rem;
  margin-top: 0.5rem;
}

.register-form .van-checkbox__icon.van-checkbox__icon--square {
  background-color: #F5F5F5;
  border: none;
  border-radius: 3px;
}

.register-form .van-checkbox__icon.van-checkbox__icon--square .van-icon {
  border: none;
}

/*For rbt list icon box*/
.diy-van-col--8 {
  width: 39.5% !important;
}

.van-icon-play-circle-o::before {
  content: "\F09F";
  color: var(--orange-color);
}

.van-icon-pause-circle-o::before {
  content: "\F093";
  color: var(--orange-color);
}

/* DIY End */
.allrbt {
  margin-bottom: 1.2rem;
}

.allrbt .van-tab {
  font-size: 0.4rem;
  color: var(--tab-default-color);
}

.allrbt .van-tabs__line {
  background-color: var(--main-color);
  width: 2rem;
}

.recordhistory .van-dropdown-item__option--active {
  color: var(--main-color);
}

.recordhistory .van-dropdown-menu__title {
  padding-left: 0.8rem;
  color: var(--gray-font-color);
}

.recordhistory .van-cell {
  padding: 0.26667rem 0.8rem;
}

.recordhistory .van-dropdown-menu__title--active {
  color: var(--main-color);
}

.recordhistory .van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #fff;
  background: url(../../images/icon/checked.webp) no-repeat;
  margin-left: 3.3rem;
  background-size: 0.5rem 0.5rem;
}

.recordhistory .van-dropdown-menu__item {
  flex: none;
}

/****   aplayer   ****/
.play-container {
  position: fixed;
  bottom: 1.2rem;
  width: 100%;
  max-width: 768px;
  background: var(--white-color);
  padding: 0.4rem 0.3rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem #e0e0e0;
  box-sizing: border-box;
  z-index: 5000;
}

.play-container .aplayer {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

.play-container .aplayer-list-cur {
  background: var(--main-color) !important;
}

.play-container .cancelPlay {
  position: absolute;
  font-size: 0.6rem;
  right: 0.1rem;
  top: -0.2rem;
  color: #aaa;
}

.play-container .aplayer-icon-mode {
  display: none;
}

.aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-title {
  font-size: 0.3rem !important;
  font-weight: bold;
}

.play-container .aplayer-author {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 0.1rem;
}

.play-container .aplayer .aplayer-body .aplayer-info {
  height: auto;
  padding: 0.1rem;
}

.play-container .aplayer-thumb {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
}

.play-container .aplayer-played {
  background: var(--main-color) !important;
}

.play-container .aplayer-pic {
  background-color: var(--main-color) !important;
  width: 1.5rem;
  height: 1.5rem;
}

.play-container .aplayer-pic {
  position: static;
  border-radius: 0.3rem;
}

.play-container .aplayer .aplayer-body {
  padding-right: 1.5rem;
}

.play-container .aplayer-pic .aplayer-play,
.play-container .aplayer-pic .aplayer-pause {
  right: 0.2rem;
  width: 1rem;
  height: 1rem;
  top: 0.25rem;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
}

.play-container .aplayer-pic .aplayer-play .aplayer-icon-play,
.play-container .aplayer-pic .aplayer-pause .aplayer-icon-pause {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.play-container .aplayer-pic .aplayer-play svg,
.play-container .aplayer-pic .aplayer-pause svg {
  display: none !important;
}

.play-container .aplayer-pic .aplayer-button {
  transition: none;
}

.play-container .aplayer-pic .aplayer-icon-pause {
  background-image: url(../../images/icon/audio-pause.webp);
  background-size: cover;
  box-shadow: var(--main-color) 0 2px 16px 0px;
  border-radius: 50%;
}

.play-container .aplayer-pic .aplayer-icon-play {
  background-image: url(../../images/icon/audio-play.webp);
  background-size: cover;
  box-shadow: var(--main-color) 0 2px 16px 0px;
  border-radius: 50%;
}

/*
* pop-up window
*/
.pop-close {
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}

.pop-result {
  height: 1.5rem;
  width: 1.5rem;
  margin-top: 1rem;
}

.pop-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pop-content {
  width: 9.5rem;
  background: var(--white-color);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.pop-title {
  font-weight: bolder;
  font-size: 20px;
}

.pop-subtitle {
  display: flex;
  justify-content: center;
  padding: 0 0.5rem;
  font-size: 18px;
  text-align: center;
}

.pop-tips {
  font-size: 18px;
  color: var(--main-color);
}

.pop-result-img {
  width: 0.5rem;
  height: 0.5rem;
}

.pop-account-result {
  display: flex;
  padding-left: 0.5rem;
  padding-right: 0.1rem;
}

.pop-account-text {
  font-size: 18px;
  margin: 0;
  padding: 0 0 0.5rem 0.2rem;
}

.pop-tips-text {
  font-size: 18px;
  padding: 0 0.5rem;
  margin: 0.4rem 0;
}

.pop-img {
  display: flex;
  justify-content: center;
}

.pop-bottom-button .pop-double-button {
  width: 7rem;
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0.3rem;
}

.pop-bottom-button .pop-single-button {
  width: 7rem;
  display: flex;
  justify-content: center;
  margin: 0.5rem 0.3rem;
}

.pop-bottom-button .pop-cancel-button {
  width: 3.2rem;
  background-color: var(--white-color);
  border-radius: 0.2rem;
}

.pop-bottom-button .pop-confirm-button {
  width: 3.2rem;
  border: 0.02rem solid var(--main-color);
  border-radius: 0.2rem;
  background-color: var(--main-color);
  color: var(--white-color);
}

.pop-bottom-button .pop-confirm-single-button {
  width: 4.6rem;
  border: 0.02rem solid var(--main-color);
  border-radius: 0.2rem;
  background-color: var(--main-color);
  color: var(--white-color);
}

/**
vant-toast
*/
.van-toast {
  width: unset !important;
  height: unset !important;
  flex-direction: row !important;
  padding: 0.1rem 0.4rem !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  min-height: 1.6rem !important;
}

.van-toast__text {
  text-align: left !important;
  padding-left: 0.5rem !important;
}

.van-icon__image {
  height: 0.8rem !important;
  width: 0.8rem !important;
}

.tableLine .tone-line .tone-info .tone-info-name {
  color: #1C1C1C;
}

.my-account .account-email .van-cell__title {
  min-width: 2.5rem;
}
.pray-service .van-radio__icon--checked .van-icon {
  background-color: var(--main-color);
  border-color:  var(--main-color);
}
.other-operator-content .favorite-img {
  background-image: url(../../images/icon/Group-3.webp);
}
.other-operator-content .present-img {
  background-image: url(../../images/icon/Group-4.webp);
}
.other-operator-content .share-img {
  background-image: url(../../images/icon/Group-5.webp);
}
#app .operation-desc-box .tone-info .tone-price .tone-price-number {
   color: #000000;
}

#app .tone-operation .op-tool .stop {
	  margin: 0;
  }