@-webkit-keyframes placeHolderShimmer-data-v-10cb457e {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
@keyframes placeHolderShimmer-data-v-10cb457e {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
.theme-item[data-v-10cb457e] {
  padding: 20px 0;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
}
.theme-item.first[data-v-10cb457e] {
    padding-top: 0;
}
.theme-item .theme-item-img[data-v-10cb457e] {
    display: block;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    overflow: hidden;
}
.theme-item .theme-item-img .follow[data-v-10cb457e] {
      width: 80px;
      height: 80px;
      margin-right: 16px;
}
.theme-item .theme-item-main[data-v-10cb457e] {
    flex-grow: 1;
}
.theme-item .theme-item-main .theme-item-title[data-v-10cb457e] {
      font-size: 16px;
      line-height: 16px;
      color: #222;
      margin-bottom: 10px;
      font-weight: bold;
      display: block;
      display: -webkit-box;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow-wrap: break-word;
      overflow: hidden;
}
.theme-item .theme-item-main .theme-item-title[data-v-10cb457e]:hover {
        color: #0E4D8C;
}
.theme-item .theme-item-main .theme-item-followers[data-v-10cb457e] {
      font-size: 14px;
      line-height: 14px;
      color: #666;
}
.theme-item .theme-item-main .theme-item-followers span[data-v-10cb457e] {
        color: #222;
}
.theme-item .themes-item-btn-group[data-v-10cb457e] {
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.theme-item .themes-item-btn-group.follow[data-v-10cb457e] {
      margin-left: 16px;
}
.theme-item .themes-item-btn-group .btn-item[data-v-10cb457e] {
      width: 72px;
      height: 32px;
      border: 1px solid #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #222;
      cursor: pointer;
}
.theme-item .themes-item-btn-group .btn-item.btn-dingyue[data-v-10cb457e] {
        background: #1677d9;
        color: #fff;
        margin-left: 10px;
        border: none;
}
.theme-item .themes-item-btn-group .btn-item.btn-dingyue[data-v-10cb457e]:hover {
          color: #fff;
}
.theme-item .themes-item-btn-group .btn-item.btn-dingyue:hover svg[data-v-10cb457e] {
            fill: #fff;
}
.theme-item .themes-item-btn-group .btn-item.btn-dingyue svg[data-v-10cb457e] {
          fill: #fff;
}
.theme-item .themes-item-btn-group .btn-item.active[data-v-10cb457e] {
        border: none;
        background-color: #f2f3f4  !important;
        color: #999 !important;
}
.theme-item .themes-item-btn-group .btn-item.active[data-v-10cb457e]:hover {
          color: #999 !important;
}
.theme-item .themes-item-btn-group .btn-item.hovering[data-v-10cb457e] {
        background-color: #e6e6e6 !important;
        color: #666 !important;
}
.theme-item .themes-item-btn-group .btn-item[data-v-10cb457e]:hover {
        color: #1677D9;
        border-color: #1677D9;
}
.theme-item .themes-item-btn-group .btn-item:hover svg[data-v-10cb457e] {
          fill: #1677D9;
}
.theme-item .themes-item-btn-group .btn-item svg[data-v-10cb457e] {
        fill: #222;
        margin-right: 6px;
}

@-webkit-keyframes placeHolderShimmer-data-v-6f80bc85 {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
@keyframes placeHolderShimmer-data-v-6f80bc85 {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
.cat-item[data-v-6f80bc85] {
  display: flex;
}
.cat-item-channels[data-v-6f80bc85] {
  width: 140px;
  flex-shrink: 0;
  border-right: 1px dashed #e6e6e6;
}
.cat-item-channels .channel-item[data-v-6f80bc85] {
    font-size: 14px;
    line-height: 14px;
    color: #222;
    margin-bottom: 24px;
    cursor: pointer;
}
.cat-item-channels .channel-item.active[data-v-6f80bc85] {
      font-weight: bold;
      font-size: 16px;
      line-height: 16px;
}
.themes-list[data-v-6f80bc85] {
  flex-grow: 1;
  padding: 0 30px;
}
.nomore[data-v-6f80bc85] {
  text-align: center;
  line-height: 60px;
  color: #ccc;
}

@-webkit-keyframes placeHolderShimmer-data-v-b3244ebc {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
@keyframes placeHolderShimmer-data-v-b3244ebc {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
.search-main[data-v-b3244ebc] {
  padding: 0 30px;
}
.search-item[data-v-b3244ebc] {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed #e6e6e6;
}
.search-item .item-img[data-v-b3244ebc] {
    width: 60px;
    height: 60px;
    overflow: hidden;
    flex-shrink: 0;
}
.search-item .item-main[data-v-b3244ebc] {
    flex-grow: 1;
    margin: 0 12px;
}
.search-item .item-main .item-title[data-v-b3244ebc] {
      font-size: 16px;
      font-weight: 700;
      color: #222;
      max-height: 16px;
      display: block;
      display: -webkit-box;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow-wrap: break-word;
      overflow: hidden;
}
.search-item .item-main .item-title[data-v-b3244ebc]:hover {
        color: #0E4D8C;
}
.search-item .item-main .item-followers[data-v-b3244ebc] {
      font-size: 13px;
      color: #666;
      margin: 8px 0;
}
.search-item .item-main .item-desc[data-v-b3244ebc] {
      font-size: 13px;
      max-height: 13px;
      color: #666;
      display: block;
      display: -webkit-box;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow-wrap: break-word;
      overflow: hidden;
}
.search-item .btn-group[data-v-b3244ebc] {
    display: flex;
    align-items: center;
}
.search-item .btn-group .btn-item[data-v-b3244ebc] {
      width: 72px;
      height: 32px;
      border: 1px solid #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #222;
      cursor: pointer;
}
.search-item .btn-group .btn-item[data-v-b3244ebc]:last-child {
        margin-left: 10px;
}
.search-item .btn-group .btn-item.active[data-v-b3244ebc] {
        border: none;
        background-color: #f2f3f4;
        color: #999;
}
.search-item .btn-group .btn-item.active[data-v-b3244ebc]:hover {
          color: #999;
}
.search-item .btn-group .btn-item[data-v-b3244ebc]:hover {
        color: #1677D9;
        border-color: #1677D9;
}
.search-item .btn-group .btn-item:hover svg[data-v-b3244ebc] {
          fill: #1677D9;
}
.search-item .btn-group .btn-item svg[data-v-b3244ebc] {
        fill: #222;
        margin-right: 6px;
}
.nomore[data-v-b3244ebc] {
  text-align: center;
  line-height: 60px;
  color: #ccc;
}

@-webkit-keyframes placeHolderShimmer-data-v-322379ba {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
@keyframes placeHolderShimmer-data-v-322379ba {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
.themes-all[data-v-322379ba] {
  padding: 0 30px;
}
.search-content[data-v-322379ba] {
  padding: 16px 0;
  display: flex;
  align-items: center;
  height: 73px;
  border-bottom: 1px dashed #e6e6e6;
}
.form-content[data-v-322379ba] {
  flex-grow: 1;
  height: 40px;
}
.form-group[data-v-322379ba] {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.form-group .icon-search[data-v-322379ba] {
    fill: #666;
    position: absolute;
    right: 16px;
    top: 11px;
    cursor: pointer;
}
.form-input[data-v-322379ba] {
  width: 100%;
  height: 100%;
  background-color: #f2f3f4;
  border-radius: 20px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 20px;
  padding-right: 40px;
  color: #222;
  outline: none;
  border: none;
}
.form-input[data-v-322379ba]::-webkit-input-placeholder {
    color: #999;
}
.form-input[data-v-322379ba]::-moz-placeholder {
    color: #999;
}
.form-input[data-v-322379ba]:-ms-input-placeholder {
    color: #999;
}
.form-input[data-v-322379ba]::-ms-input-placeholder {
    color: #999;
}
.form-input[data-v-322379ba]::placeholder {
    color: #999;
}
.cancel-search[data-v-322379ba] {
  flex-shrink: 0;
  margin-left: 20px;
  color: #1677d9;
  font-size: 14px;
  cursor: pointer;
}
.categories-content[data-v-322379ba] {
  padding: 16px 0 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px dashed #e6e6e6;
  margin-bottom: 30px;
}
.categories-content .category[data-v-322379ba] {
    color: #333940;
    font-size: 14px;
    line-height: 14px;
    padding: 8px 22px 10px;
     background-color: #f2f3f4;
    cursor: pointer;
    max-height: 32px;
    margin-right: 16px;
   border-radius: 7px;
    margin-bottom: 15px;
}
.categories-content .category[data-v-322379ba]:last-child {
      margin: 0;
}
.categories-content .category[data-v-322379ba]:hover {
      color: #1677d9;
      background-color: #e6f2ff;
}
.categories-content .category.active[data-v-322379ba] {
      color: #fff;
      background-color: #1677d9;
}


.followed-main[data-v-48ba54bc] {
  padding: 0 30px;
}
.followed-head[data-v-48ba54bc] {
  padding: 20px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #e6e6e6;
}
.followed-cats[data-v-48ba54bc] {
  flex-grow: 1;
  max-height: 32px;
  overflow: hidden;
}
.cats-main[data-v-48ba54bc] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cats-item[data-v-48ba54bc] {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 14px;
  color: #222;
  cursor: pointer;
  margin-right: 16px;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
}
.cats-item[data-v-48ba54bc]:last-child {
  margin: 0;
}
.cats-item[data-v-48ba54bc]:hover {
  color: #1677d9;
  border-color: #1677d9;
}
.cats-item.active[data-v-48ba54bc] {
  color: #fff;
  border-color: #1677d9;
  background-color: #1677d9;
}
.followed-more[data-v-48ba54bc] {
  font-size: 14px;
  line-height: 14px;
  color: #666;
  flex-shrink: 0;
  margin-left: 20px;
  cursor: pointer;
}
.followed-more[data-v-48ba54bc]:hover {
  color: #1677d9;
}
.followed-none[data-v-48ba54bc] {
  cursor: pointer;
  font-weight: 700;
  padding-left: 20px;
  margin: 20px 0;
  font-size: 14px;
  background-color: #f2f3f4;
}
.recommend-head[data-v-48ba54bc] {
  font-size: 16px;
  border-bottom: 1px dashed #e6e6e6;
}
.recommend-head[data-v-48ba54bc], .followed-none[data-v-48ba54bc] {
  height: 48px;
  line-height: 48px;
  color: #222;
}
.items-main[data-v-48ba54bc] {
  padding-top: 20px;
}
.nomore[data-v-48ba54bc] {
  text-align: center;
  line-height: 60px;
  color: #ccc;
  margin-top: -40px;
}

@-webkit-keyframes placeHolderShimmer-data-v-37fad4e7 {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
@keyframes placeHolderShimmer-data-v-37fad4e7 {
0% {
    background-position: 99% 0;
}
100% {
    background-position: -99% 0;
}
}
.tab-content[data-v-37fad4e7] {
  display: flex;
  padding: 0 30px;
  border-bottom: 1px solid #e6e6e6;
}
.tab-content .tab-item[data-v-37fad4e7] {
    height: 56px;
    font-size: 15px;
    line-height: 56px;
    color: #666;
    margin-right: 40px;
    cursor: pointer;
}
.tab-content .tab-item[data-v-37fad4e7]:last-child {
      margin: 0;
}
.tab-content .tab-item.active[data-v-37fad4e7] {
      color: #222;
      font-weight: bold;
      border-bottom: 3px solid #1677d9;
}
.main[data-v-37fad4e7] {
  padding: 0 30px;
}