.div_container {

}

/*page navigation layout*/
.left_sidebar {
    position: fixed;
    left: 0;
    top: 80px;
}

.left_sidebar_wrapper {
    /*overflow li can be scrollable*/
    height: 600px;
    overflow-y: auto;
}

.left_sidebar h3 {
    margin-left: 10px;
    margin-bottom: 10px;
    color: #24a0ed;
}

.left_sidebar ul {
    max-width: 100px;
    display: grid;
    grid-row-gap: 10px;
}

.left_sidebar li {
    margin-left: 10px;
    list-style: none;
}

.left_sidebar li a {
    font-size: 14px;
}

a.nav- link-active {
    color: #24a0ed !important;
}

a.nav-link {
    color: #a6a49c;
}

/***/
span {
    text-decoration: none;
}
a {
    text-decoration: none;
}
a:link {
    text-decoration: none;
    color: #333;
}
a:hover{
    text-decoration: none;
    color: #333;
}

.button{
    background-color: #51be95;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-border-radius: 5px;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
    text-shadow: 1px 1px 1px #949494;
    /*按钮字体*/
    font-size: 16px;
    font-family: 'microsoft yahei', arial;
}

.button_min_width {
    min-width: 100px;
}

/*.button_max_width_fill_all {*/
/*    max-width: 100%;*/
/*}*/

/*Panel ICON部分*/
.panel_instruct_icon {
    max-height: 30px;
    max-width: 30px;
}

/* 点击提示 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    /*			top: 120%;
    */
    bottom: 100%;
    left: 50%;
    /*			为了居中,直径是 120*/
    margin-left: -100px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}


/*投票组件*/
.div_vote_left_circle {
    margin: 4px; flex-shrink: 0; width: 160px; height: 40px;
    border-radius: 16px 0px 0px 16px;
    background: #fc3274; float:left; display: flex; align-items: center; justify-content: center;
}

.div_vote_right_circle {
    margin: 4px; flex-shrink: 0; width: 160px; height: 40px;
    border-radius: 0px 16px 16px 0px;
    background: #00adee;
    float:left; display: flex; align-items: center; justify-content: center;
}

.div_vote_number_shown {
    /*min-width 保证点赞数超长也不会折叠*/
    margin: 0px; flex-shrink: 0; min-width: 20px; height: 40px;
    border-radius: 16px 0px 0px 16px;
    background: transparent; float:left; display: flex; align-items: center; justify-content: center;
}

.div_vote_btn {

}

.div_vote_btn a{
    color: white;
}

.div_vote_btn a:hover{
    color: white;
}

.div_service_content_summary {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    align-items: center;
}

.div_display_store_compare_panel {
    display: grid;
    grid-template-columns: 1fr;
}

.div_service_content_statistic {
    /*和下面部分保持间距*/
    margin-bottom: 20px;
}

/*展示一行的维度信息*/
.div_service_content_rating_row {
    /*展示为display3列的grid布局*/
    display: grid;
    grid-template-columns: 120px 120px 60px;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    margin: 0px 0px;
    align-items: center;
}

/*对比两个party的row*/
.div_service_content_compare_two_party_row {
    /*展示为display3列的grid布局*/
    display: grid;
    grid-template-columns: 60px 200px 120px 200px 60px;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    margin: 0px 0px;
    align-items: center;
}

/* 评论区对比两个party的row*/
.div_comment_compare_two_party_row {
    max-width: 100%;
    /*展示为display3列的grid布局*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    margin: 0px 0px;
    align-items: center;
}

.div_comment_compare_group {
}

.div_service_content_prompts {
    /*和下面部分保持间距*/
    margin-top: 30px;
    margin-bottom: 30px;
}

.div_service_content_statistic {
    display: grid;
    grid-template-columns: REPEAT(10, minmax(60px, 100px));
    grid-column-gap: 60px;
}

.div_statistic_card {
    /*padding: 18px 24px 13px 24px;*/
    width: 60px;
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #f4f4f4;
    position: relative;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.04);
    display: grid;
    grid-row-gap: 10px;
    grid-template-rows: 20px 50px;
}

.div_statistic_card_title {
    font-size: 14px;
    color: gray;
    text-align: center;
    /*text overflow change line*/
    white-space: normal;
    overflow-wrap: break-word;
}

.div_statistic_card_digit {
    font-size: 24px;
    color: #01AAED;
    text-align: center;
}
.div_statistic_card_digit a {
    font-size: 24px;
    color: #01AAED;
    text-align: center;
}

.div_service_content_statistic_small {
    display: grid;
    grid-template-columns: REPEAT(5, minmax(30px, 50px));
    grid-column-gap: 5px;
}

.div_statistic_card_small {
    /*padding: 18px 24px 13px 24px;*/
    width: 40px;
    height: 40px;
    background: #fff;
    border-bottom: 1px solid #f4f4f4;
    position: relative;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.04);
    display: grid;
    grid-row-gap: 5px;
    grid-template-rows: 20px 25px;
}

.div_statistic_card_title_small {
    font-size: 10px;
    color: gray;
    text-align: left;
    /*text overflow change line*/
    white-space: normal;
    overflow-wrap: break-word;
}

.div_statistic_card_digit_small {
    font-size: 14px;
    color: #01AAED;
    text-align: left;
}

.div_compare_panel {
    margin: 15px 15px;
    display: block;
    /*display: grid;*/
    /*grid-template-columns: 1fr;*/
    /*grid-row-gap: 10px;*/
    /*align-items: center;*/
}



.div_compare_panel_items {
    margin: 0px 10px;
    float: left;
    /*内部文字上下居中*/
    display: flex;
    align-items: center;
}

.div_similar_pub {
}

.div_similar_pub ul {
    list-style-type: none;
    display: flex;
    margin: 0px;
}

.div_similar_pub_grid {
    max-width: 100%;
    /*展示为display3列的grid布局*/
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    margin: 0px 0px;
    align-items: center;
}

.div_similar_pub_grid_item {

}

.div_section {
    margin-top: 5px;
    margin-bottom: 5px;
}

/*每个div下的a如果超长执行breakword操作,否则用p*/
/*.div_service_content_prompts a {*/
    /*word-wrap: break-word;*/
/*}*/

.div_service_content_element p {
    word-wrap: break-word;
    word-break: break-all;
}


/*展示一行的维度信息*/
.div_service_content_prompts_row {
    /*展示为display3列的grid布局*/
    display: grid;
    /*这里 grid display 最右边设置max-content小心,文本溢出不换行*/
    grid-template-columns: 10px 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    /*margin: 0px 0px;*/
    align-items: center;
    /*和下方prompts间隔开*/
    margin-bottom: 10px;
}

/*每一列下的元素*/
.div_service_content_element {
    margin: 0px;
}

/*.div_service_content_text_row{*/
    /*align-items: center;*/
    /*display: inline-flex;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
/*}*/

.div_service_content_2_cols_row{
    display: grid;
    grid-template-columns: 120px max-content;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*text overflow p that wrap*/
.div_text_overflow_wrap {
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.div_service_content_text_row{
    display: grid;
    grid-template-columns: 120px max-content;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.div_p_remark {
    font-size: 14px !important;
    color: gray !important;
}

/*评论星星*/
.ul_rating_star {
    padding:0;
    margin:0;
    list-style:none;
    width:300px;
    height:28px;
}

.li_rating_star {
    float:left;
    /* 背景设置成未被点亮的星星 */
    width:27px;
    height:28px;
}

.li_rating_star_light {
    float:left;
    /* 背景设置成未被点亮的星星 */
    width:27px;
    height:28px;
    background: url('/scripts/img/star.gif') 0 -28px;
}

.li_rating_star_dark {
    float:left;
    /* 背景设置成未被点亮的星星 */
    width:27px;
    height:28px;
    background: url('/scripts/img/star.gif') 0 0;
}

/*添加一行评论的十字加号*/
.rating_add_cross {
    height: 20px;
    width: 20px;
    position: relative;
    /*margin: 0;*/
    /*和底部元素区分开*/
    margin-bottom: 30px;
    padding: 0;
    box-sizing: border-box;
}

.rating_add_cross:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: #a6a49c;
    top: 8px;
    right: 0px;
}
.rating_add_cross:before{
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 100%;
    background: #a6a49c;
    top: 0px;
    left: 8px;
}

/*收藏十字加号*/
.follow_cross {
    background-color: white;
    border-radius: 10px;
    height: 20px;
    width: 20px;
    position: relative;
    /*margin: 0;*/
    /*和底部元素区分开*/
    padding: 0;
    box-sizing: border-box;
}

.follow_cross:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: red;
    top: 8px;
    right: 0px;
}
.follow_cross:before{
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 100%;
    background: red;
    top: 0px;
    left: 8px;
}

/*添加一行评论的十字加号*/
.div_upload_file_cross_square {
    display: block;
    height: 40px;
    width: 40px;
    padding: 20px;
    margin-top: 10px;
    background: #f3f3f3;
}

.div_upload_file_cross {
    display: block;
    height: 40px;
    width: 40px;
    position: relative;
    margin: 0;
    /*margin: 0;*/
    /*和底部元素区分开*/
    box-sizing: border-box;
}

.div_upload_file_cross:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: #a6a49c;
    top: 18px;
    right: 0px;
}

.div_upload_file_cross:before{
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 100%;
    background: #a6a49c;
    top: 0px;
    left: 18px;
}

.span_normal_text_small {
    color: #333;
    font-size: 14px;
    margin-left: 5px;
}

/*评论缩略图的CSS*/
.div_comment_wrapper {
    display: grid;
    grid-template-columns: max-content;
    grid-row-gap: 10px;
}

/*评论一行元素宽度设置,内部文本标签才会换行*/

.div_comment_row {
    text-align: left;
    width: 900px;
}

.div_comment_three_elem_row {
    display: grid;
    grid-template-columns: 40px 120px max-content;
    grid-column-gap: 5px;
    align-items: center;
}

/*多个badge的排列列表*/

.div_comment_badge_wrapper_row {
    display: grid;
    /*grid-template-columns: repeat(3, 50px);*/
    grid-template-columns: 50px 50px 80px 80px;
    grid-column-gap: 10px;
    align-items: center;
}

/** A | replies to | B | logtime */
.div_comment_four_elem_row {
    display: grid;
    grid-template-columns: 180px 70px 180px max-content;
    grid-column-gap: 5px;
    align-items: center;
}

.div_user_icon_name {
    display: grid;
    grid-template-columns: 40px 120px;
    grid-column-gap: 5px;
    align-items: center;
}

.div_comment_row_flex {
    text-align: left;
    display: grid;
    grid-template-columns: 120px 30px max-content;
    grid-column-gap: 20px;
    align-items: center;
}

.div_community_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
}

.span_highlight_blue {
    color:#01AAED;
}

/*.span_comment_detail_rating {*/
    /*margin-left: 5px;*/
/*}*/


/*评论的最大宽度900*/
.span_comment_text {
    /*英文换行*/
    word-wrap: break-word;
    word-break: normal;
    /* word-break: break-all;字母作为依据*/
    /* word-break: break-all;*/
    /* 中文换行,中文有首字母缩进*/
    white-space: pre-wrap;
    overflow: hidden;
    /*文本超出使用省略号*/
    /*text-overflow: ellipsis;*/
    display: block;
}

.div_comment_thumbnail_wrapper {
    /*展示为display 3列的grid布局*/
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    margin: 0px 0px;
    align-items: center;
}

.div_comment_thumbnail_image_wrapper {
    /*展示为display 3列的grid布局*/
    height: 150px;
    width: 150px;
}

/*缩略图大小*/
.display_card_image_thumbnail {
    /*!*max-height: 300px;*!*/
    height: 50px;
    width: 50px;
    display: block;
    /*right margin*/
    /*margin: 0px 0px 0px 0px;*/
    /*margin: 0px 4px 0px 0px;*/
    margin-right: 5px;
}

.display_card_image_thumbnail_flex {
    height: 50px;
    width: 50px;
    display: flex;
    /* div下元素垂直居中*/
    align-items: center;
    margin-right: 5px;
}

.display_card_image_thumbnail_flex_small {
    height: 40px;
    width: 40px;
    display: flex;
    /* div下元素垂直居中*/
    align-items: center;
    margin-right: 0px;
}

/*缩略图大小*/
.display_card_image_thumbnail_img_small {
    /*border-radius: 10px;*/
    /*border-width: 0px;*/
    /*max-height: 40px;*/
    /*max-width: 40px;*/
    /*align-items: center;*/
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    width: 100%;
    height: 100%;
    /*overflow cut to center*/
    object-fit: cover;
    border-radius: 10px;
}

/*使用名称作为ICON的兜底色块*/
.div_icon_default_name_small {
    border-radius: 20px;
    border-width: 0px;
    height: 40px;
    width: 40px;
    background-color: rgb(104, 195, 159);
    /*padding: 5px;*/
    /*包含字体*/
    display: flex;
    /*设置垂直居中*/
    align-items: center;
    /* 设置水平居中**/
    justify-content: center;
    /*div父级别元素设置,文本水平居中*/
    text-align: center;
    /*上 右 有间隔 下左 设置为0*/
    /*margin: 4px 4px 0px 0px;*/
    margin: 0px 0px 0px 0px;
}

.div_icon_default_name_small a {
    font-size: 16px !important;
    color: white !important;
}
.div_icon_default_name_small a:visited {
    font-size: 16px !important;
    color: white !important;
}

/*图片的下方subtitle*/
.a_subtitle {
    font-size: 12px;
}

/*缩略图大小*/
.display_card_image_thumbnail_img {
    border-radius: 12px;
    border-width: 0px;
    max-height: 50px;
    max-width: 50px;
    align-items: center;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
}

.div_user_avatar_small_wrapper {

}

.div_user_avatar_small {
    border-radius: 15px;
    border-width: 0px;
    max-height: 30px;
    max-width: 30px;
    align-items: center;
}


/*!*默认上传图片的CSS*!*/
/*.upload_image_files_button {*/
    /*padding: 6px 10px;*/
    /*background-color: #1E9FFF;*/
    /*border: 1px solid #1E9FFF;*/
    /*border-radius: 3px;*/
    /*cursor: pointer;*/
    /*color: #fff;*/
    /*font-size: 12px;*/
/*}*/

/*图片缩略图区域*/
.comment_thumbnail_img {
    max-height: 150px;
    max-width: 150px;
}

.comment_thumbnail_video {
    width: 320px;
    height: 240px;
}

.display_card_detail_market {
    display: grid;
    grid-template-columns: max-content;
    height: fit-content;
    grid-row-gap: 3px;
}

.display_card_detail_row {
    align-items: center;
    /*display: inline-flex;*/
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
}

.reply_indent {
    text-align:left;margin-top:7px;margin-left:60px;color:#444;
}

/*当前一行的 row 元素垂直居中*/
.display_card_detail_row_flex {
    display: flex;
    align-items: center;
    /*display: inline-flex;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*点赞等*/
.badgeImgWrapper {
    /*width: 30px;*/
    /*height: 30px;*/
    display: grid;
    grid-template-columns: 0.6fr minmax(30px, 0.4fr);
    grid-column-gap: 3px;
    align-items: center;
}

/*follow icon + text*/
.badgeImgTextWrapper {
    display: grid;
    grid-template-columns: 0.4fr minmax(100px, 0.6fr);
    grid-column-gap: 3px;
    align-items: center;
}

/*卡片的文本是否下划线*/
/*#div_feed_list */
/*.display_card_detail_row */
a.card_a_title {
    font-size: 16px;
    color:#24a0ed;
    /*color: rgb(95, 99, 104);*/
}

/*#div_feed_list */
/*.display_card_detail_row */
a.card_a_title:hover {
    text-decoration: underline;
}

/*#div_feed_list */
/*.display_card_detail_row */
a.card_a_text {
    font-size: 16px;
    color: #333
}

a.card_a_text_pending {
    font-size: 16px;
    color: #ffaa3e;
}
a.card_a_text_online {
    font-size: 16px;
    color: #1dc116;
}
a.card_a_text_invalid {
    font-size: 16px;
    color: #fe2d46;
}

/*#div_feed_list */
/*.display_card_detail_row */
a.card_a_description {
    font-size: 16px;
    color: #333
}

/*#div_feed_list */
/*.display_card_detail_row */
a.card_a_description:hover {
    text-decoration: underline;

}

#div_feed_list {

}


/*点击放大的弹窗区域*/
#alert_box {
    /*初始设置为 none*/
    display: none;
    margin: 0;
    /*z-index 生效要和基础html对齐,基础html使用absolute*/
    position: absolute;
    background-color: rgb(0,0,0,0.2);
    /*弹窗的z-index需要足够高*/
    z-index: 9999;
    width: 100%;
    height: 100%;

    font-size: 0;
    /*padding-top: 5%;*/
    /*width: 50%;*/
    /*height: 80%;*/
    /*!*弹窗的z-index需要足够高*!*/
    /*z-index: 5;*/
}

/*.modal_class {*/
    /*margin: auto;*/
    /*padding-top: 5%;*/
    /*width: 50%;*/
    /*height: 80%;*/
    /*!*弹窗的z-index需要足够高*!*/
    /*z-index: 5;*/
/*}*/

#alert_box_middle_wrapper {
    /*获取图片放大的位置*/
    position: fixed;
    /*top: 50%;*/
    /*left: 50%;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    left: 40%;
    bottom: 10%;
}

#alert_box_middle_wrapper img {
    animation-name: zoom;
    animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;

    max-width: 100%;
    /*max-height: 100%;*/
    /** 设置固定max-height 防止超出div */
    max-height: 600px;

    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
    /**图片在阴影下方*/
    vertical-align: bottom;

    z-index: 99999;
}



/*切换TAB的脚本*/
#div_compare_comment_id ul.compareTabUl {
    background-color: white;
    /*width: 80%;*/
    height: 8vmin;
    margin: 10vmin auto;
    /* display: table; */
    display: flex;
    text-align: center;
    align-items: center;
}

#div_compare_comment_id li.compareTabLi {
    /* display: table-cell; */
    line-height: 8vmin;
    text-align: center;
    display: inline-block;
    align-items: center;
    /*这个对比需要保留,保证每个块inline-block占50%宽*/
    width: 50%;
}

#div_compare_comment_id .compareTitle {
    /*li下标题文本垂直居中*/
    display: flex;
    align-items: center;
}

#div_compare_comment_id .tabLiClickColor {
    background-color: #f5f5f5;
}

#div_compare_comment_id .compareTabItem{
    font-size: 18px;
}

#div_compare_comment_id .compareTabMain div{
    /*width: 80%;*/
    /*height: 100px;*/
    margin: 0 auto;
}

/* Market部分展示 */
.display_card_two_column {
    display: grid;
    column-gap: 16px;
    /*grid-template-columns: max-content auto;*/
    grid-template-columns: auto auto;
    margin: 0px 0px;
}

/*feeds卡片*/

/*FEEDS的卡片*/
.div_feeds_wrapper {
    margin-bottom: 50px;
}

.div_feed_list {
    list-style-type: none;
}

.div_feeds_li {
    margin: 20px 0px;
}

.div_feeds_li_content {
    display: grid;
    grid-template-rows: 40px 20px 200px 40px;
    row-gap: 10px;
    align-items: center;
    justify-items: start;
}

.div_feeds_li_content_row {
    float: left;
    display: flex;
}

/*BLOG的正文*/
.div_main_text {
}

.div_main_text p {
    line-height: 170%;
}

.div_feeds_detail_content {
    display: grid;
    /*grid-template-rows: 40px 20px 200px 40px;*/
    row-gap: 10px;
    align-items: center;
    justify-items: start;
}

/*max 10 buttons each row*/
.div_button_row {
    display: grid;
    grid-template-columns: repeat(10, 120px);
    grid-column-gap: 30px;
}

/*展示一行的维度信息*/
.div_feed_card_one_col {
    /*展示为display3列的grid布局*/
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    /*margin: 0px 0px;*/
    align-items: center;
    /*和下方prompts间隔开*/
    margin-bottom: 10px;
}

/*展示一行的维度信息*/
.div_feed_card_two_cols {
    /*展示为display3列的grid布局*/
    display: grid;
    /*这里 grid display 最右边设置max-content小心,文本溢出不换行*/
    grid-template-columns: 0.4fr 0.6fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    /*margin: 0px 0px;*/
    align-items: center;
    /*和下方prompts间隔开*/
    margin-bottom: 10px;
}

.div_feed_card_col_stack_image_text {

}

.div_comment_share_button {
    /*display: inline-block;*/
    /*padding: 10px 20px;*/
    /*margin: 10px 5px;*/
    font-size: 16px;
    color: #fff;
    /*background-color: #555; !* 灰色背景 *!*/
    border: 2px solid #a6a49c; /* 灰色边框 */
    border-radius: 15px; /* 圆角边框 */
    cursor: pointer;

    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 30px
}

.div_comment_share_button a.label_share {
    color: #a6a49c;
}

.div_comment_share_button:hover {
    /*background-color: #3e3e3e; !* 深灰色背景 *!*/
    /*border-color: #3e3e3e; !* 深灰色边框 *!*/
}

.div_feed_card_thumbnail {
    /* 左边的图片区域*/
    max-width: 200px;
    max-height: 180px;
}

.div_feed_card_thumbnail img {
    /* 左边的图片区域*/
    max-width: 200px;
    max-height: 180px;
    border-radius: 5px;
}

.div_feed_card_paragraph {
    /* 右边的文本区域*/
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 5px;
}

/* Display Icon Default*/
.div_icon_default_name {
    border-radius: 12px;
    border-width: 0px;
    height: 50px;
    width: 50px;
    background-color: rgb(104, 195, 159);
    display: flex;
    /*设置垂直居中*/
    align-items: center;
    /* 设置水平居中**/
    justify-content: center;
    /*div父级别元素设置,文本水平居中*/
    text-align: center;
    /*上 右 有间隔 下左 设置为0*/
    /*margin: 4px 4px 0px 0px;*/
    margin: 0px 0px 0px 0px;
}

/* Display Icon Font Default*/
.div_icon_default_name a {
    color: white !important;
    font-size: 12px !important;
    margin: auto;
}

/*workspace*/
.div_display_none {
    display: none;
}

/**SearchBox*/
.div_search_card {
    margin-top: 100px;
    margin-bottom: 100px;
}

.page_selector {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: REPEAT(30, minmax(35px, 45px));
}
.page_id_wrapper {height: 16px; min-width: 20px; float: left; text-align:center}
.page_id_wrapper_start {margin-right: 5px}
.page_prefix_a {color: #a6a49c;font-size:16px}
.page_id_a {color: #a6a49c;font-size:16px}
.page_id_a:hover {text-decoration: underline}
.page_id_a_active {color: #a6a49c;font-size:16px; text-decoration: underline}

/* Search Switch Tab*/
#div_search_result_tab_id ul.searchTabUl {
    background-color: white;
    /*width: 80%;*/
    margin: 0 auto;
    /* display: table; */
    display: grid;
    grid-template-columns: repeat(10, minmax(50px, 70px));
    text-align: center;
    align-items: center;
    grid-column-gap: 10px;
}

#div_search_result_tab_id li.searchTabLi {
    /* display: table-cell; */
    /*line-height: 8vmin;*/
    text-align: center;
    display: inline-block;
    align-items: center;
    /*width: 50px;*/
}

#div_search_result_tab_id li.searchTabLi a {
    font-size: 12px;
}

#div_search_result_tab_id .searchTabLiChosen {
    border-bottom: solid #a6a49c 0.1rem;
}

#div_search_result_tab_id .searchTitle {
    /*li下标题文本垂直居中*/
    display: flex;
    align-items: center;
}

#div_search_result_tab_id .searchTabItem{
    font-size: 18px;
}

#div_search_result_tab_id .searchTabMain div{
    margin: 0 auto;
}


#div_service_tab_banner_id {

}

/*service detail page*/
/* Service Switch Tab*/
#div_service_tab_banner_id ul.div_service_split_tab_ul {
    background-color: white;
    /*width: 80%;*/
    margin: 0 auto;
    /* display: table; */
    display: grid;
    grid-template-columns: repeat(10, minmax(50px, 80px));
    text-align: center;
    align-items: center;
    grid-column-gap: 10px;
}

#div_service_tab_banner_id li.div_service_split_tab_li {
    /* display: table-cell; */
    /*line-height: 8vmin;*/
    text-align: center;
    display: inline-block;
    align-items: center;
    /*width: 50px;*/
}

#div_service_tab_banner_id li.div_service_split_tab_li a {
    font-size: 12px;
}

#div_service_tab_banner_id li.div_service_split_tab_li_chosen {
    border-bottom: solid #a6a49c 0.1rem;
}

.div_service_content_statistic_chart {

}
#div_service_data_series {
    width: 600px;
    height:400px;
}

/*messages*/
.div_msg_li_span {
    display: flex;
}

.msgUnreadNotification {
    background: red;
    color: white;
    font-size: 12px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    justify-content: center;
    align-content: center;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

a.blog_item_tag_highlight, a.blog_item_tag_highlight:hover{
    /*边框颜色*/
    height: 20px;
    line-height: 20px;
    min-width: 32px;
    border-radius:4px 4px 4px 4px;
    border:2px solid #4e6ef2;
    float: left;
    text-align:center;
    /*文字颜色*/
    color: #4e6ef2;
    font-size:15px;
    padding: 1px 1px 1px 1px;
    margin: 0 0 0 0;
    text-decoration:none;
    overflow: hidden;
    white-space: nowrap;
}

a.blog_item_tag, a.blog_item_tag:hover {
    height: 20px;
    line-height: 20px;
    min-width: 32px;
    border-radius:4px 4px 4px 4px;
    border:2px solid #a6a49c;
    float: left;
    text-align:center;
    color: #a6a49c;
    font-size:15px;
    padding: 1px 1px 1px 1px;
    margin: 0 0 0 0;
    text-decoration:none;
    overflow: hidden;
    white-space: nowrap;
}


/* workspace添加内容 */
.add_title_form {
    /*width: 900px;*/
    width: 400px;
    height: 50px;
    border: none;
    outline: none;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    /*background-image: url(bg.gif);*/
    background-position: bottom right;
    background-repeat: no-repeat;
}
.add_content_form {
    /*width: 900px;*/
    width: 400px;
    height: 250px;
    border: none;
    outline: none;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    /*background-image: url(bg.gif);*/
    background-position: bottom right;
    background-repeat: no-repeat;
}
.add_tags {
    max-width: 400px;
    height: 50px;
    border: none;
    outline: none;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    /*background-image: url(bg.gif);*/
    background-position: bottom right;
    background-repeat: no-repeat;
}


/*Github Style Copy Button*/
/* GitHub风格灰色按钮 */
.copy-btn {
    width: 32px;
    height: 32px;
    background-color: #f6f8fa;  /* GitHub浅灰色 */
    border: 1px solid #d0d7de;  /* GitHub边框色 */
    border-radius: 6px;         /* GitHub圆角 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 悬停效果 */
.copy-btn:hover {
    background-color: #eaeef2;  /* 悬停时稍深灰色 */
    border-color: #afb8c1;
}

/* 点击效果 */
.copy-btn:active {
    background-color: #dbe0e6;
}

/* 图标样式 */
.copy-icon {
    width: 16px;
    height: 16px;
    background-color: #57606a;  /* GitHub图标灰 */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z'/%3E%3Cpath fill-rule='evenodd' d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z'/%3E%3C/svg%3E");
    transition: background-color 0.2s;
}

/* 复制成功状态 */
.copy-btn.copied .copy-icon {
    background-color: #2da44e;  /* GitHub绿色 */
}

/*通用的搜索框的CSS*/
.kw_input_common {
    width:200px;height:16px;padding:12px 16px;font-size:16px;margin:0;
    vertical-align:top;outline:0;box-shadow:none;
    border-radius:10px 10px 10px 10px;
    border:2px solid #c4c7ce;background:#fff;color:#222;
    overflow:hidden;
    box-sizing:content-box}
.kw_input_common:focus{
    border-color:#4e6ef2!important;
    opacity:1;
    filter:alpha(opacity=100)\9
}
.s_ipt::-webkit-input-placeholder{padding-left:3px;color:#aaa;font-size:13px}
.s_ipt::-moz-placeholder{padding-left:3px;color:#aaa;font-size:13px}
.s_ipt:-ms-input-placeholder{padding-left:3px;color:#aaa;font-size:13px}
.s_ipt::placeholder{padding-left:3px;color:#aaa;font-size:13px}
.kwsuggest{width:200px;height:50px;padding:5px 16px;font-size:16px;margin:0;vertical-align:top;outline:0;box-shadow:none;border-radius:0px 0 0 0px;
    /*border:0px;*/
    background:#fff;color:#222;overflow:hidden;box-sizing:content-box}
.kwsuggest:focus{opacity:1;filter:alpha(opacity=100)\9}
.kwsuggest a, a:hover{text-decoration: none}
/*SUG的高亮*/
.highlight_suggest{color: #4e6ef2;}
.suggest_no_text_decoration{text-decoration: none;}


@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}