:root {
                font-family: system-ui, -apple-system, BlinkMacSystemFont, 
                segoe ui, Roboto, Helvetica, Arial, sans-serif;
            }

            *,
            ::after,
            ::before {
                font-family: inherit;
            }

            .tab_content_all{
                width: 1920px;
            }

            .body_style{
                background-color:#F0F2F5;
                margin-left: auto;
                margin-right: auto;
                min-width: 1200px;
                overflow: auto;
            }

            .header{
                height: 150px;
                background: #5F0185;
            }

            .analyticalTitle{
                width: 600px;
                height: 56px;
                font-size: 40px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 56px;
                padding-top: 43px;
            }

            .header_logo{
                float: left;
            }
            
            .header_title{
                margin-left: 50px;
            }

            .fastq_div{
                height: 110px;
                background: #FFFFFF;
            }

            .fastq_title{
                /* width: 299px; */
                height: 46px;
                font-size: 32px;
                font-weight: 500;
                color: #333333;
                line-height: 45px;
                padding-top: 32px;
            }

            .footer_div{
                height: 100px;
                background: #FFFFFF;
            }

            .footer{
                width: 400px;
                height: 52px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
                line-height: 17px;
                text-align: center;
                padding-top: 24px;
                margin-left: auto;
                margin-right: auto;
            }

            .div_tab{
                background: #F9FBFC;
            }

            #tab{
                margin-top: -16px;
                margin-left: -35px;
            }

            #tab li{
                float: left;
                height: 28px;
                font-size: 20px;
                font-weight: 400;
                color: #999999;
                line-height: 28px;
                list-style: none;
                margin-top: 25px;
            }

            #tab li.tabin {
                float: left;
                height: 28px;
                font-size: 20px;
                font-weight: 500;
                color: #5F0185;
                line-height: 28px;
            }

            .tab_content {
                margin-top: 20px;
                width: 1200px;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                padding-left: 10px;
            }

            .tab_margin{
                margin-left: 56px;
            }

            .tab_content .show{
                display: block;
            }

            .tab_content .unshow{
                display: none;
            }

            .canvas{
                width: 1200px;
                margin-left: auto;
                margin-right: auto;
            }

            .tab_height{
                height: 100px;
            }

            #scatter_canvas{
                width: 780px;
                background: #FFFFFF;
                box-shadow: 0px 0px 4px 0px rgba(95,1,133,0.0500);
                border-radius: 8px;
                float: left;
            }

            #clustering_square_bin_canvas, #cellBin_cluster_canvas{
                background: #FFFFFF;
                box-shadow: 0px 0px 4px 0px rgba(95,1,133,0.0500);
                border-radius: 8px;
                /* float: left; */
            }

            .title_label{
                width: 4px;
                height: 20px;
                background: #5F0185;
                float: left;
                margin-top: 34px;
                margin-left: 32px;
            }

            .span_title{
                float: left;
                height: 40px;
                font-size: 28px;
                font-weight: 500;
                color: #333333;
                line-height: 40px;
                padding-top: 24px;
                padding-left: 16px;
            }

            .fa{
                font-style: normal;
                line-height: 1;
                width: 9px;
                height: 15px;
                color: #CECECE;
            }

            .button_explain{
                margin-left: 16px;
                margin-top: 30px;
                border: 1px solid #CECECE;
                border-radius: 20px;
                background: #FFFFFF;
                width: 28px;
                height: 28px;
            }

            #div_quation{
                display: none;
                width: 550px;
                height: 20px;
                font-size: 14px;
                font-weight: 500;
                color: #999999;
                line-height: 20px;
                margin-left: 32px;
                margin-top: 16px;
            }

            .divScatterBackground{
                width: 716px;
                height: 640px;
                background: #F7F7F7;
                border-radius: 8px;
                margin-left: 32px;
                margin-top: 16px;
            }

            .scatter_plot_title{
                height: 28px;
                font-size: 20px;
                font-weight: 500;
                color: #333333;
                line-height: 28px;
                margin-top:20px;
                padding-bottom: 24px;
                text-align:center;
            }

            .btn-link{
                width: 128px;
                height: 50px;
                background: #FFFFFF;
                border-radius: 8px;
                border: 1px solid #5F0185;
                font-size: 12px;
                color: #5F0185;
                font-weight: 500;
            }

            #slider_gene_exp, #slider_square_cluster, #slider_cluster{
                text-align: center;
            }

            #range, #range_cluster, #range_cluster_bin20, #range_cluster_bin50, #range_cell_cluster{
                width:40%;
                height:3px;
                text-align: center;
                /*tira a barra do input range*/
                -webkit-appearance:none;  
                background:#A329D4;
                outline:none;
            }

            #range::-webkit-slider-thumb{
                -webkit-appearance:none;
                background:#5F0185;
                width:22px;
                height:22px;
                border-radius:50%;
                cursor:pointer;
            }

            #range_cluster::-webkit-slider-thumb,
            #range_cluster_bin20::-webkit-slider-thumb,
            #range_cluster_bin50::-webkit-slider-thumb 
              {
                -webkit-appearance:none;
                background:#5F0185;
                width:22px;
                height:22px;
                border-radius:50%;
                cursor:pointer;
            }

            #range_cell_cluster::-webkit-slider-thumb{
                -webkit-appearance:none;
                background:#5F0185;
                width:22px;
                height:22px;
                border-radius:50%;
                cursor:pointer;
            }

            #slider_content{
                margin-top: 24px;
            }

            .summary_info_div{
                margin-left: 40px;
                float: left;
            }

            .total_read_div{
                width: 380px;
                height: 199px;
                background: #FFFFFF;
                box-shadow: 0px 0px 4px 0px rgba(95,1,133,0.0500);
                border-radius: 8px;
            }

            .content_div{
                display: grid;
                padding-bottom: 40px;
                background: #F9FBFC;
            }
            
            .total_read_div_color{
                width: 380px;
                height: 6px;
                background: #FF614F;
                border-radius: 8px 8px 0px 0px;
            }

            .mean_mid_div_color{
                width: 380px;
                height: 6px;
                background: #FFE6D1;
                border-radius: 8px 8px 0px 0px;
            }

            .mean_gene_div_color{
                width: 380px;
                height: 6px;
                background: #C6F3AE;
                border-radius: 8px 8px 0px 0px;
            }

            .unique_read_div_color{
                width: 380px;
                height: 6px;
                background: #949ECE;
                border-radius: 8px 8px 0px 0px;
            }

            .summary_sub_number{
                height: 56px;
                font-size: 40px;
                font-weight: 600;
                color: #333333;
                line-height: 56px;
                margin-top: 47px;
                text-align: center;
            }

            .summary_sub_title{
                height: 34px;
                font-size: 24px;
                font-weight: 500;
                color: #666666;
                line-height: 33px;
                margin-top: 16px;
                text-align: center;
            }

            .margin_top_class{
                margin-top: 21px;
            }

            .sunburst_canvas, .information_canvas, .sequencing_saturation_canvas, .square_bin_statistics_canvas, .bin1_canvas, .bin50_canvas, .bin100_canvas, .bin150_canvas, .bin200_canvas, .clustering_square_bin_canvas, .CellBin_canvas, .cell_bin_stats_canvas, .cellBin_cluster_canvas{
                margin-top: 40px;
                width: 1200px;
                background: #FFFFFF;
                border-radius: 8px;
                padding-bottom: 24px;
                display: grid;
            }

            .no_margin_top{
              margin-top: 0;
            }
            .sequencing_saturation_canvas .plot{
              /* border: solid 1px #999999; */
              /* transform: translate(210px, 50px); */
            }

            .sequencing_saturation_canvas .zerolinelayer {
              /* transform: translateX(10px) */
            }

            .summary_canvas{
                display: flex;
                margin-top:24px;
            }
            .no_margin_top{
              margin-top: 0;
            }
            #div_explain_sunburst, #div_explain_sequencing_saturation, #div_explain_sequencing, #div_explain_rna_mapping, #div_explain_tissueCut, #div_explain_filtering, #div_explain_annotation, #div_explain_square_bin_statistics, #div_explain_bin1, #div_explain_bin20, #div_explain_bin50, #div_explain_bin100, #div_explain_bin150, #div_explain_bin200, #div_explain_clustering_square_bin, #div_explain_clustering_analysis,#div_explain_clustering_analysis_bin50,#div_explain_clustering_square_bin50,#div_explain_cellBin, #div_explain_cell_bin_stats, #div_explain_cellBin_clustering, #div_explain_stitching, #div_explain_registration, #div_explain_qc,
            .explation-box {
                display: none;
                font-size: 14px;
                font-weight: 500;
                color: #999999;
                line-height: 20px;
                margin-left: 42px;
                margin-top: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                display: none;
                margin-bottom: 12px;
                margin-right: 32px;
            }

            #div_explain_image_left{
                display: none;
                font-size: 14px;
                font-weight: 500;
                color: #999999;
                line-height: 20px;
                margin-left: 86px;
                margin-top: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                display: none;
                margin-bottom: 12px;
                margin-right: 32px;
                text-align: left;
                width: 390px;
            }

            #div_explain_image_middle{
                display: none;
                font-size: 14px;
                font-weight: 500;
                color: #999999;
                line-height: 20px;
                margin-left: 415px;
                margin-top: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                display: none;
                margin-bottom: 12px;
                margin-right: 32px;
                text-align: left;
                width: 375px;
            }

            #div_explain_image_right{
                display: none;
                font-size: 14px;
                font-weight: 500;
                color: #999999;
                line-height: 20px;
                margin-left: 100px;
                margin-top: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                display: none;
                margin-bottom: 12px;
                margin-right: 32px;
                text-align: left;
                width: 390px;
            }

            .sequencing_canvas, .rna_mapping_canvas, .tissueCut_canvas, .filtering_canvas, .annotation_canvas, .image_information_canvas, .stitching_canvas, .qc_canvas, .registration_canvas,.filtering_canvas {
                width: 580px;
                margin-top: 40px;
                background: #FFFFFF;
                border-radius: 8px;
                padding-bottom: 24px;
                display: grid;
            }
            .filtering_canvas {
              display: none;
            }

            .sunburst_part_right{
                float: right;
                margin-top: 25px;
                margin-right: 50px;
            }

            .sunburst_part_left{
                float: left;
                margin-top: 25px;
                margin-left: 30px;
                width: 500px;
            }

            .circle_total_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #FF614F;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .sunburst_title{
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
                float: left;
                margin-left: 8px;
            }

            .sunburst_num{
                float: right;
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #666666;
                line-height: 22px;
            }

            .sunburst_sub_div{
                height: 30px;
                margin-top: 10px;
            }

            .circle_cid_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #FFBD84;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_invalid_cid_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #FFCEA2;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_discarded_mid_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #FFE6D1;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_clean_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #A2D287;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_non_relevant_short_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #C6F3AE;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_uniquely_mapped_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #98C1DD;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_multi_mapped_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #C2E2F9;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_unmapped_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #D7EDFB;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_annotated_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #949ECE;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_unannotated_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #B1B8D7;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_unique_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #F7BCFF;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .circle_duplicated_read{
                width: 10px;
                height: 10px;
                border-radius:8px;
                background: #EDD2F0;
                float:left;
                margin-top: 5px;
                margin-left: 8px;
            }

            .sunburst_total_div{
                display: inline-block;
                width: 1200px;
            }

            .information_canvas{
                width: 1200px;
                background: #FFFFFF;
                box-shadow: 0px 0px 4px 0px rgba(95,1,133,0.0500);
                border-radius: 8px;
            }

            .summary_third_content_title{
                margin-left: 5px;
                font-size: 16px;
                margin-top: 16px;
                margin-bottom: 16px;
                color: #666666 !important;
                float: left;
                width: 305px;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
            }

            .cell_content_title{
                margin-left: 32px;
                font-size: 16px;
                margin-top: 16px;
                margin-bottom: 16px;
                color: #333333 !important;
                float: left;
                width: 290px;
                font-weight: 500;
                line-height: 22px;
            }

            .summary_third_content_image_title{
                margin-left: 5px;
                font-size: 16px;
                margin-top: 16px;
                margin-bottom: 16px;
                color: #333333;
                float: left;
                width: 100px;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
            }

            .summary_third_content_information_title{
                margin-left: 32px;
                font-size: 16px;
                margin-top: 16px;
                margin-bottom: 16px;
                color: #333333;
                float: left;
                width: 90px;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
            }

            .summary_third_content_num{
                margin-right: 5px;
                margin-top: 17px;
                color: #666666;
                float: right;
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
            }

            .cell_content_num{
                margin-right: 32px;
                margin-top: 17px;
                color: #666666;
                float: right;
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
            }

            .summary_third_content_information_num{
                margin-right: 32px;
                margin-top: 17px;
                color: #666666;
                float: right;
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
            }


            .summary_third_content_div {
                border: 1px solid #CCCCCC;
                position: relative;
                width: 568px;
                margin-left: -1px;
                height: 61px;
                border-bottom: 0px;
                float:left;
            }

            .summary_third_content_left_top_div{
                border: 1px solid #EEEEEE;
                position: relative;
                width: 568px;
                margin-left: -1px;
                height: 61px;
                float:left;
                border-left:0px;
                border-top:0px;
            }

            .summary_third_content_right_top_div{
                border: 1px solid #EEEEEE;
                position: relative;
                width: 568px;
                margin-left: -1px;
                height: 61px;
                float:left;
                border-right:0px;
                border-top:0px;
            }

            .summary_third_content_left_bottom_div{
                border: 1px solid #EEEEEE;
                position: relative;
                width: 568px;
                margin-left: -1px;
                height: 61px;
                float:left;
                border-left:0px;
                border-bottom:0px;
                border-top:0px;
            }

            .summary_third_content_right_bottom_div{
                border: 1px solid #EEEEEE;
                position: relative;
                width: 568px;
                margin-left: -1px;
                height: 61px;
                float:left;
                border-right:0px;
                border-bottom:0px;
                border-top:0px;
            }

            .summary_third_content_sub_div {
                border: 1px solid #CCCCCC;
                position: relative;
                width: 568px;
                margin-left: -1px;
                margin-top: -1px;
                height: 61px;
                /* border-bottom: 0px; */
                float:left;
            }

            .summary_third_content_sub_total_div{
                border: 1px solid #CCCCCC;
                position: relative;
                width: 1137px;
                margin-left: -1px;
                margin-top: -1px;
                /* border-bottom: 0px; */
                float:left;
                padding-bottom: 16px;
            }

            .content_margin_top_left{
                margin-top: 16px;
                margin-left: 36px;
            }

            .content_margin_top{
                margin-top: 16px;
                margin-left: 36px;
            }

            .fastq_margin_top{
                margin-bottom: 16px;
                margin-left: 36px;
            }

            .content_margin_sub_top{
                margin-left: 36px;
            }

            .content_canvas_div{
                display:inline-block;
                width: 1200px;
            }
            
            .content_canvas_half_div{
                display:inline-block;
            }

            .summary_left_part{
                float: left;
                width: 49%;
            }

            .summary_right_part{
                float: right;
                width: 49%;
                margin-left: 40px;
            }

            .middle_canvas{
                width: 1200px;
                margin-bottom: 16px;
                display: flex;
            }

            .middle_content_div {
                border: 1px solid #EEEEEE;
                position: relative;
                width: 516px;
                margin-left: -1px;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                float:left;
            }

            .summary_six_title_div{
                border: 1px solid #EEEEEE;
                position: relative;
                width: 1136px;
                height: 80px;
                margin-left: -1px;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                margin-left: auto;
                margin-right: auto;
            }

            .summary_six_content_div{
                border: 1px solid #EEEEEE;
                position: relative;
                width: 1136px;
                height: 54px;
                margin-left: -1px;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                margin-left: auto;
                margin-right: auto;
            }

            .summary_bin_content_title{
                margin-top: 21px;
                color: #666666;
                float: left;
                text-align: center;
                width: 216px;
                margin-left: 8px;
                height: 22px;
                font-size: 16px;
                font-weight: 500;
                color: #333333;
                line-height: 22px;
            }

            .text-blue{
                color: #5F0185;
                margin-bottom: 2px;
                font-size: 14px;
            }

            #saturation_plot{
                width: 1100px;
                margin-left: 50px;
                margin-top: 26px;
            }

            #pop-img-big{
                height: 90%;
            }

            #pop-box{
                position: fixed;
                top: 5%;
                left: 5%;
                width: 90%;
                /* height: 80vh; */
                justify-content: center;
                align-items: center;
                display: none;
                z-index: 10;
                background-color: white;
                border: 1px solid black;
                border-radius: 10px;
                overflow: auto;
                cursor: pointer;
            }

            #pop-box-big{
                position: fixed;
                top: 5%;
                left: 5%;
                width: 90%;
                height: 80vh;
                justify-content: left;
                align-items: center;
                display: none;
                z-index: 10;
                background-color: white;
                border: 1px solid black;
                border-radius: 10px;
                overflow: auto;
                cursor: pointer;
            }

            .summary_bin_content_value{
                font-size: 18px;
                margin-top: 16px;
                color: #666666;
                float: left;
                text-align: center;
                width: 210px;
                margin-left: 14px;
                font-size: 16px;
                font-weight: 400;
                color: #666666;
                line-height: 22px;
            }

            #bin1_plot{
                margin-left: 65px;
                width: 550px;
                margin-top: 30px;
            }

            #bin50_plot{
                margin-left: 30px;
                width: 550px;
                margin-top: 30px;
            }

            #bin100_plot{
                margin-left: 30px;
                width: 550px;
                margin-top: 30px;
            }

            #binCell_plot{
                margin-left: 30px;
                width: 550px;
                margin-top: 30px;
            }

            .distribution_image{
              width: 312px;
          }

            .saturation_plot_div{
                border:1px solid #CCCCCC;
                border-radius: 10px;
                margin-top: 30px;
                display: inline-block;
                width:1180px;
                text-align:center;
            }

            #binCellMIDGeneDNB_plot, #bin50MIDGeneDNB_plot, #bin100MIDGeneDNB_plot, #bin200MIDGeneDNB_plot{
                width: 1100px;
                margin-top:30px;
                margin-bottom: 10px;
                margin-left:50px;
            }

            .title_margin{
                margin-top: 24px;
            }

            #heatmap_left{
                width: 48%;
                float: left;
                border-radius: 8px;
                background: #FFFFFF;
            }

            #heatmap_right{
                width: 48%;
                float: left;
                margin-left: 20px;
                border-radius: 8px;
                background: #FFFFFF;
            }

            #heatmap_center{
                width: 1200px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                border-radius: 8px;
                background: #FFFFFF;
            }

            .heatmap_plot_div{
                margin-top: 30px;
                text-align: center;
            }

            /* 1030列表样式 */
            .box_total_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAXUlEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpIhWyALTln+dgeHIexgPQtsIMjBM1ISw8ZrICPQFDMBNhOmESaDTeE1EVky0QhZQYBofIxDgjAxbASFnMftNUPqUAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
            }
            .box_cid_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAXUlEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpIhWyALTln+dgeHIexgPQtsIMjBM1ISw8ZrICPQFDMBNhOmESaDTeE1EVky0QhZQYBofIxDgjAxbASFnMftNUPqUAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 18px;
            }
            .box_clean_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAXUlEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpIhWyALTln+dgeHIexgPQtsIMjBM1ISw8ZrICPQFDMBNhOmESaDTeE1EVky0QhZQYBofIxDgjAxbASFnMftNUPqUAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 36px;
            }
            .box_uniquely_mapped_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 54px;
            }
            .box_annotated_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAXUlEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpIhWyALTln+dgeHIexgPQtsIMjBM1ISw8ZrICPQFDMBNhOmESaDTeE1EVky0QhZQYBofIxDgjAxbASFnMftNUPqUAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 72px;
            }
            .box_unique_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 90px;
            }
            .box_duplicated_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 90px;
            }
            .box_unannotated_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 72px;
            }
            .box_multi_mapped_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 54px;
            }
            .box_unmapped_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 54px;
            }
            .box_non_relevant_short_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 36px;
            }
            .box_invalid_cid_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 18px;
            }
            .box_discarded_mid_read{
                width: 10px;
                height: 10px;
                /* border-radius:8px; */
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACqADAAQAAAABAAAACgAAAAA7eLj1AAAAM0lEQVQYGWM0Pvp/638GBi8GPICRgWEbg9HR/wQBSA0THoNQpEamQhZQYBofIxDgjAxbARhjLTv42vAuAAAAAElFTkSuQmCC)
    100% no-repeat;
                background-size: 100% 100%;
                float:left;
                margin-top: 5px;
                margin-left: 18px;
            }
            .sunburst_persent{
                float: right;
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #666666;
                line-height: 22px;
                width: 60px;
                text-align: right;
            }

            .sunburst_line1 {
                height: 390px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 23px;
                margin-top: 65px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            .sunburst_line11 {
                height: 30px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 23px;
                margin-top: 465px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185);
            }
            .sunburst_line2 {
                height: 310px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 40px;
                margin-top: 105px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185);
            }
            .sunburst_line3 {
                height: 190px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 58px;
                margin-top: 145px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            .sunburst_line31 {
                height: 30px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 58px;
                margin-top: 345px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            .sunburst_line4 {
                height: 110px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 76px;
                margin-top: 185px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            .sunburst_line5 {
                height: 30px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 95px;
                margin-top: 225px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            .text_fastq_name {
              width: 350px;
              /* height: 61px; */
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 16px;
              font-family: PingFangSC-Regular;
              text-align: right;
              line-height: 24px;
              /* margin: 135px 0 0 57px; */
          }
            /* 1130列表样式 */
            .span_form{
                float: right;
                height: 50px;
                line-height: 40px;
                padding-top: 30px;
                padding-right: 32px;
                margin-bottom: 0;
            }
            .span_select{
                width: 130px;
                float: right;
                border-radius: 6px;
                height: 28px;
                font-size: 12px;
                font-weight: 500;
                color: #5F0185;
                line-height: 40px;
                padding-top: 0px;
                padding-right: 0px;
            }
            .sub_lab{
                display: flex;
                float: bottom;
                margin-top: 52px;
                margin-left: 10px;
                width: 100px;
                position: absolute;
                flex-direction: column
            }
            .sub_lab1{
                display: flex;
                float: bottom;
                /* margin-top: 50px; */
                margin-left: 66px;
                width: 100px;
                position: absolute;
                flex-direction: column
            }
            .sub_span1{
                /* margin-top: 4px; */
                height: 20px;
                font-size: 15px;
                font-weight: 400;
                color: #999999;
            }
            .sub_span2{
                margin-top: 5px;
                height: 20px;
                font-size: 15px;
                font-weight: 400;
                color: #999999;
            }
            .sub_line{
                margin-bottom: 5px;
            }
            .sub_span{
                margin-top: 3px;
                height: 24px;
                font-size: 15px;
                font-weight: 400;
                color: #999999;
                /* float: inline-end; */
            }
            .box_2 {
                background-color: rgba(206, 206, 206, 1);
                width: 1px;
                height: 39px;
                position: absolute;
            }
            .sunburst_protein_line1 {
                height: 190px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 23px;
                margin-top: 65px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            .sunburst_protein_line2 {
                height: 110px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 40px;
                margin-top: 105px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185);
            }
            .sunburst_protein_line3 {
                height: 30px;
                /* background: darkgray; */
                background-size: 2px 413px;
                margin-left: 58px;
                margin-top: 145px;
                /* width: 1px; */
                z-index: 1000;
                position: absolute;
                border-left:1px dotted rgb(186, 185, 185); 
            }
            /* 230608 质控列表样式 */
            .alerts_canvas{
                margin-top: 10px;
                background: #F9FBFC;
                border-radius: 8px;
                display: grid;
               }
               .alerts_content_div{
                   border: 1px solid #EEEEEE;
                   position: relative;
                   width: 1136px;
                   /* height: 54px; */
                   margin-left: -1px;
                   border-top: 0px;
                   border-left: 0px;
                   border-right: 0px;
                   margin-left: auto;
                   margin-right: auto;
               }
               .alerts_title_div{
                   border: 2px solid #5F0185;
                   position: relative;
                   width: 1136px;
                   text-align: left;
                   /* height: 80px; */
                   margin-left: -1px;
                   /* border-top: 0px; */
                   border-left: 0px;
                   border-right: 0px;
                   margin-left: auto;
                   margin-right: auto;
               }
               .alerts_content_value{
                   font-size: 12px;
                   /* margin-top: 16px; */
                   color: #333333;
                   float: left;
                   text-align: left;
                   width: 154px;
                   margin-left: 14px;
                   /* font-size: 16px; */
                   font-weight: 400;
                   line-height: 22px;
               }
               .alerts_content_title{
                   font-size: 14px;
                   font-weight: 500;
                   color: #5F0185;
                   float: left;
                   text-align: left;
                   width: 154px;
                   margin-left: 14px;
                   height: 22px;
                   line-height: 22px;
               }
               .alerts_title{
                   /* height: 110px; */
                   background: #FFFFFF;
                   margin-left: auto;
                   margin-right: auto;
               }