.icon-search-gray {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("../../static/icon/icon_search_gray.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-search-gray-small {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("../../static/icon/icon_search_gray_small.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-camera-gray {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("../../static/icon/icon_camera_gray.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-arrow-down {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("../../static/icon/icon_arrow_down.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-enter-white {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("../../static/icon/icon_enter_white.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-ds-score {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("../../static/icon/icons3.svg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -80px -1px;
}

.navbar-container .ds-comment .icon-ds-score:hover {
  mask: url("../../static/icon/icons3.svg") -80px -1px no-repeat;
  background-size: auto;
  background-color: #2a89e7;
  background-image: none;
  -webkit-mask: url("../../static/icon/icons3.svg") -80px -1px no-repeat;
}

.icon-user-center {
  display: block;
  width: 20px;
  height: 20px;
  mask: url("../../static/icon/DS_icon_a.svg") -960px 0 no-repeat !important;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -960px 0 no-repeat !important;
  background-color: #666;
  mask-size: auto 20px !important;
  margin-right: 12px;
}

.icon-user-center-active,
a:hover .icon-user-center,
.dropdown-item:hover .icon-user-center {
  background-color: #4787e0;
}

.icon-user-game {
  display: block;
  width: 20px;
  height: 20px;
  mask: url("../../static/icon/DS_icon_a.svg") -1000px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1000px 0 no-repeat;
  background-color: #666;
  mask-size: auto 20px;
  margin-right: 12px;
}

.icon-user-game-active,
a:hover .icon-user-game,
.dropdown-item:hover .icon-user-game {
  background-color: #4787e0;
}

.icon-user-logout {
  display: block;
  width: 20px;
  height: 20px;
  mask: url("../../static/icon/DS_icon_a.svg") -1040px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1040px 0 no-repeat;
  background-color: #666;
  mask-size: auto 20px;
  margin-right: 12px;
}

.icon-user-logout-active,
a:hover .icon-user-logout,
.dropdown-item:hover .icon-user-logout {
  background-color: #4787e0;
  mask-size: auto 20px;
}

.icon-user-set {
  display: block;
  width: 20px;
  height: 20px;
  mask: url("../../static/icon/DS_icon_a.svg") -1081px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1081px 0 no-repeat;
  background-color: #666;
  mask-size: auto 20px;
  margin-right: 12px;
}

.icon-user-set-active,
a:hover .icon-user-set,
.dropdown-item:hover .icon-user-set {
  background-color: #4787e0;
  mask-size: auto 20px;
}

.icon-user-message {
  display: block;
  width: 20px;
  height: 20px;
  mask-size: auto 20px;
  mask: url("../../static/icon/DS_icon_a.svg") -1120px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1120px 0 no-repeat;
  margin-right: 12px;
  background-color: #666;
}

.icon-user-message-active,
a:hover .icon-user-message,
.dropdown-item:hover .icon-user-message {
  background-color: #4787e0;
  mask-size: auto 20px;
}

.icon-ai-goods {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_ai_goods.png");
}

.icon-ai-search {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_ai_search.png");
}

.icon-scan {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  mask: url("../../static/icon/icon_scan.svg");
  -webkit-mask: url("../../static/icon/icon_scan.svg");
  background-color: #969696;
}

.icon-edit {
  display: block;
  width: 18px;
  height: 18px;
  background-size: contain;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1200px 0 no-repeat !important;
  mask: url("../../static/icon/DS_icon_a.svg") -1200px 0 no-repeat !important;
  background-color: #4787e0;
  cursor: pointer;
  background-image: none;
}

.icon-ai-comparison {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_ai_comparison.png");
  background-size: auto 20px;
}

.icon-ai-recommend {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_ai_recommend.png");
}

.icon-ai-star {
  display: block;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_ai_star.png");
}

.icon-share-blue {
  display: block;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../../static/icon/icon_share.png");
}

.icon-banner-left {
  display: block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: -64px 0;
  background-image: url("../../static/icon/icons4.svg");
}

.icon-banner-right {
  display: block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: 0 0;
  background-image: url("../../static/icon/icons4.svg");
}

.icon-opt-like {
  display: block;
  height: 100%;
  width: 100%;
  background-size: auto 30px;
  background-size: cover;
  mask: url("../../static/icon/DS_icon_a.svg") -120px 2px no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -120px 2px no-repeat;
  background-color: #969696;
}

.icon-opt-like:hover,
.opt-item:hover .icon-opt-like,
.icon-opt-like.active:hover
.opt-list .opt-item span.active {
  background-color: var(--primary-color);
  mask-position: -120px 2px;
}

.icon-opt-like.active {
  mask: url("../../static/icon/DS_icon_a.svg") -560px 2px no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -560px 2px no-repeat;
  background-color: var(--primary-color);
  color: var(--primary-color);
}

#like-num.active {
  color: var(--primary-color);
}

.icon-opt-comment {
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  mask: url("../../static/icon/DS_icon_a.svg") -160px 2px no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -160px 2px no-repeat;
  background-color: #969696;
}

.icon-opt-comment:hover,
.opt-item:hover .icon-opt-comment,
.icon-opt-comment.active:hover {
  background-color: #2a89e7;
  mask-position: -160px 2px;
}

.icon-opt-comment.active {
  mask: url("../../static/icon/DS_icon_a.svg") -600px 2px no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -600px 2px no-repeat;
  background-color: #2a89e7;
}

.icon-opt-collect {
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  mask: url("../../static/icon/DS_icon_a.svg") -80px 1px no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -80px 1px no-repeat;
  background-color: #969696;
}

.icon-opt-collect:hover,
.opt-item:hover .icon-opt-collect,
.icon-opt-collect.active:hover {
  background-color: #2a89e7;
  mask-position: -80px 1px;
}

.icon-opt-collect.active {
  mask: url("../../static/icon/DS_icon_a.svg") -520px 2px no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -520px 2px no-repeat;
  background-color: var(--primary-color);
}

#collect-num.active {
  color: var(--primary-color);
}

.icon-switch {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: auto 40px;
  background-position: -40px 0;
  background-image: url("../../static/icon/icons3.svg");
}

.icon-switch.active {
  background-position: 0 0;
}

.icon-shopbag {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: auto 48px;
  background-position: 0 0;
  background-image: url("../../static/icon/icons5.svg");
}

.icon-backtop {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: auto 48px;
  background-position: -48px 0;
  background-image: url("../../static/icon/icons5.svg");
}

.icon-arrow-select {
  height: 20px;
  width: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: 0 0;
  background-image: url("../../static/icon/icon_arrows.png");
  filter: invert(40%) sepia(8%) saturate(15%) hue-rotate(49deg) brightness(95%)
    contrast(91%);
}

.icon-arrow-left-small {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: -20px 0;
  background-image: url("../../static/icon/icon_arrows.png");
}

.icon-arrow-right-small {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: -60px 5px;
  background-image: url("../../static/icon/icon_arrows.png");
  display: inline-block;
}

.icon-arrow-up-small {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: -40px 0;
  background-image: url("../../static/icon/icon_arrows.png");
}

.icon-arrow-down-small {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: 0 0;
  background-image: url("../../static/icon/icon_arrows.png");
}

.icon-share-gray {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  mask: url("../../static/icon/DS_icon_a.svg") -880px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -880px 0 no-repeat;
  background-color: #969696;
}

.icon-preview-gray {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_preview_gray.png");
}

.icon-refresh-gray {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  mask: url("../../static/icon/DS_icon_a.svg") -920px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -920px 0 no-repeat;
  background-color: #979797;
}

.icon-refresh-blue,
.icon-refresh-gray:hover .common-container .btn:hover .icon-refresh-gray {
  display: block;
  width: 100%;
  height: 100%;
  mask: url("../../static/icon/DS_icon_a.svg") -920px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -920px 0 no-repeat;
  background-color: #2a89e7;
}

.icon-ok-gray {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  mask: url("../../static/icon/DS_icon_a.svg") -1160px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1160px 0 no-repeat;
  background-color: #a1a1a1;
}
.attention-btn:hover .icon-ok-gray {
  mask: url("../../static/icon/DS_icon_a.svg") -1160px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -1160px 0 no-repeat;
  background-color: var(--primary-color);
}

.icon-plus {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  mask: url("../../static/icon/DS_icon_a.svg") -480px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -480px 0 no-repeat;
  background-color: #2a89e7;
}

.icon-close-white {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  mask: url("../../static/icon/DS_icon_a.svg") -440px 0 no-repeat;
  -webkit-mask: url("../../static/icon/DS_icon_a.svg") -440px 0 no-repeat;
  background-color: #FFFFFF;
  opacity: 0.5;
}

.icon-close-model {
  display: block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: 20px 20px;
  background-image: url("../../static/icon/icon_close.png");
}

.icon-forget-back {
  display: block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: -128px 0;
  background-image: url("../../static/icon/icons4.svg");
}

.icon-dianzan {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_opt_like.png");
}

.icon-dianzan.active {
  background-image: url("../../static/icon/icon_dianzan_active.png");
}

.icon-wing-left {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_wing_left.svg");
}

.icon-wing-right {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_wing_right.svg");
}

.icon-exclamation {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_exclamation.png");
}

.icon-arrow-blue {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_arrow_blue.png");
}

.icon-order {
  display: block;
  width: 90%;
  height: 90%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../static/icon/icon_order.png");
  margin-right: 0.5em;
  background-position: center;
}
.icon-wechat {
  display: block;
  height: 48px;
  width: 48px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../../static/icon/wechat.svg");
}

.icon-facebook {
  display: block;
  height: 48px;
  width: 48px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../../static/icon/facebook.svg");
}

.icon-redbook {
  display: block;
  height: 48px;
  width: 48px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../../static/icon/redbook.svg");
}