.phead{display:flex;flex-direction:column;width:100%;padding:40px 0;background-color:#f8f8f8}
.phead .ptitle{flex:1;display:flex;align-items:center;margin:0;font-size:36px;font-weight:600;line-height:44px}
.phead .pdesc{font-size:14px;display:flex;align-items:center;flex-wrap:wrap;gap:30px;color:#999;font-size:18px;line-height:24px;margin-block-start:16px}
.phead .pdesc > div{display:flex;align-items:center;gap:5px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin:30px 0 20px 0}
.panel-head .panel-title{font-size:28px;font-weight:600;margin:0}
.h3-title{font-size:18px;font-weight:600;margin:0}
.filter-wrapper{display:flex;align-items:self-start;flex-wrap:wrap;gap:20px;margin-block-start:30px}
.filter-wrapper .filter{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border:1px solid #d7d7d7;border-radius:5px;padding:0 0 0 10px;transition:border-color 0.2s ease-in-out;overflow:hidden;height:32px;background-color:#fff}
.filter-wrapper .filter:hover{border-color:var(--el-color-primary)}
.filter-wrapper .filter .filter-label{flex-shrink:0;font-size:12px;color:#7F7F7F;white-space:nowrap;max-width:110px;text-overflow:ellipsis;overflow:hidden}
.filter-wrapper .filter .el-select__wrapper,.filter-wrapper .filter .el-input__wrapper{box-shadow:none !important}
.filter-wrapper .filter .el-cascader__tags{flex-wrap:nowrap;overflow:hidden}
.filter-wrapper .filter .el-cascader__tags .el-tag.el-tag--info{--el-tag-text-color:#333;margin-block-end:0 !important}
.filter-wrapper .filter .el-cascader__tags .el-tag{max-width:75%}
.filter-wrapper .filter .el-cascader__search-input{margin-block-end:0 !important;margin-block-start:0 !important}
.tabCreativeInsights .dt-tab-head{font-size:16px;font-weight:600;padding:0 0 5px 0;margin-block-start:10px}
.tabPanelPerformanceAnalytics ul{display:flex;align-items:flex-start;flex-wrap:wrap;gap:20px;margin-block-start:20px}
.tabPanelPerformanceAnalytics ul li{--point-color:#bfbfbf;display:flex;justify-content:center;flex-direction:column;padding:16px;width:227px;height:100px;border-radius:8px;background-color:#f8f8f8;cursor:pointer;transition:all 0.2s ease}
.tabPanelPerformanceAnalytics ul li .label{font-size:14px;display:flex;align-items:center;gap:5px;margin-block-end:16px}
.tabPanelPerformanceAnalytics ul li .label::before{content:"";display:inline-flex;width:8px;height:8px;border-radius:50%;background-color:var(--point-color)}
.tabPanelPerformanceAnalytics ul li .content{display:flex;align-items:baseline;gap:10px}
.tabPanelPerformanceAnalytics ul li .content .count{white-space:nowrap;font-weight:400;font-size:22px}
.tabPanelPerformanceAnalytics ul li .content .note{color:#8a8a8a;font-size:12px;line-height:16px}
.tabPanelPerformanceAnalytics ul li .content .icon-question{color:#d2d2d2}
.tabPanelPerformanceAnalytics ul li.line-a{--point-color:#fe2c55;background-color:#ffedf0}
.tabPanelPerformanceAnalytics ul li.line-b{--point-color:#006bfd;background-color:#edf5ff}
.PopularityAndCTR{margin-block-start:20px;width:100%;height:350px}
.PopularityAndCTR-tooltip{font-size:12px;font-weight:600}
.PopularityAndCTR-tooltip .name{display:flex;align-items:center;gap:5px;color:#999;margin-block-start:3px;font-weight:400}
.PopularityAndCTR-tooltip .name::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background-color:var(--color)}
.tab-panel-animation-x{transform:translateX(50px);transition:transform 0.5s ease}
.tabPanelAudienceInsights{display:none;align-items:flex-start;gap:20px;margin-block-start:40px}
.tabPanelAudienceInsights .ls{width:calc(100% - 20px)}
.tabPanelAudienceInsights .ls > .dt-space{margin-block-end:20px}
.tabPanelAudienceInsights .ls > .dt-space .dt-space-item:first-child{font-size:16px;font-weight:600;padding:0 0 5px 0}
.AgeRangeChart{width:100%;height:320px}
.RelatedInterestsChart li{--percent:0%;display:flex;align-items:center;margin-block-end:20px;gap:20px}
.RelatedInterestsChart li .name{width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.RelatedInterestsChart li .bar{width:300px;height:30px;background-color:rgba(123,104,238,0.1);position:relative;overflow:hidden;border-radius:5px;color:#fff;background-blend-mode:multiply}
.RelatedInterestsChart li .bar::before{content:"";position:absolute;top:0;right:0;width:var(--percent);height:30px;z-index:2;background-color:var(--el-color-danger)}
.RelatedInterestsChart li .bar .score{position:absolute;top:0;right:0;z-index:1;width:max-content;height:30px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap;padding-inline-end:10px;color:#fff;font-size:14px;filter:drop-shadow(0px 0px 1px rgba(247,113,176,0.8))}
.RelatedVideos{margin-block-start:40px}
.RelatedVideos ul{display:flex;align-items:center;overflow:auto hidden;gap:10px 20px;margin:20px 0 20px 0}
.RelatedVideos ul li{flex-shrink:0;width:325px;height:739px;position:relative;overflow:hidden;background-color:#f5f5f5;border-radius:10px}
.RelatedVideos ul li iframe{width:100%;height:100%;border-radius:10px;border:none}
.RelatedVideos #pagination{padding-block-end:30px}
.RelatedProducts{margin-block-start:40px}
.RelatedProducts #pagination{padding-block-end:30px}
.RecommendedForYou{margin-block-start:10px}
.RecommendedForYou ul{background-color:#f8f8f8;border-radius:10px;width:100%;padding:20px 40px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:40px;margin-block-start:20px}
@media screen and (max-width:768px){
  .phead{padding-inline-start:10px;padding-inline-end:10px}
  .panel-head{padding-inline-start:10px;padding-inline-end:10px}
  .phead .pdesc > div{flex-wrap:wrap}
  .phead .pdesc > div > span{flex-shrink:0}
  .h3-title{padding-inline-start:10px}
  .filter-wrapper .filter{width:100%}
  .tabCreativeInsights{padding-inline-start:10px;padding-inline-end:10px}
  .tabPanelPerformanceAnalytics ul{padding-inline-start:10px;padding-inline-end:10px}
  .tabPanelPerformanceAnalytics ul li{width:100%}
  .RelatedVideos ul{padding-inline-start:10px}
}