
.img_toolbar{
    background-color:#efefef;
    min-width: 40px; border-bottom:#e2e8f0 solid 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    cursor: pointer;
    /* z-index: 100; */
}

.con_tools_bar{
    background-color:#efefef;
    min-height: 30px; border-bottom:#e2e8f0 solid 1px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.con_tools_bar_mouse{
    width: 260px;
    /* background-color: aqua; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#header_cur_rgb{
    min-width: 200px;
}

.header_cur_colrs{
    padding-left: 20px;
    margin-right: 10px;

}

.header_cur_colrshow{
    padding-left: 20px;
    margin-right: 10px;
}

#header_cur_rgb{
    margin-right: 10px;
}

.zoomWindow{
    border-radius: 100px;
    border: black 2px solid;
}

.zoomWindow_lines{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /*90度直线，100灰度，0.1透明度，5%宽度，0透明度背景*/
    background: linear-gradient(90deg, rgba(100, 100, 100, 0.3) 5%, transparent 0), 
    /*0度直线，100灰度，0.1透明度，5%宽度，0透明度背景*/
                 linear-gradient(rgba(100, 100, 100, 0.3) 5%, transparent 0);
    /*横纵向宽距*/
    background-size: 10px 10px;
    /* background-color: black; */
    z-index: 101;
}

#part_box {
    /* display: none; */
    position:absolute;
    border: 1px dashed white;
    margin: 0px;
    padding: 0px;
    animation: fade 1000ms infinite;
    -webkit-animation: fade 1000ms infinite;
    pointer-events: none;

    background: linear-gradient(90deg, rgba(100, 100, 100, 0.3) 5%, transparent 0), 
    /*0度直线，100灰度，0.1透明度，5%宽度，0透明度背景*/
                 linear-gradient(rgba(100, 100, 100, 0.3) 5%, transparent 0);
    /*横纵向宽距*/
    background-size: 10px 10px;

    /* z-index: 10000; */
    /* width: 100px;
    height: 100px; */
    /* background-color: aqua; */
    /* float: left; */
}
.findcolor_marks{
    position: absolute;
    pointer-events: none;
    font-size: x-small;
    display: flex;
    flex-direction: column;
}

.markpoint{
    position: absolute;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.marknumber{
    /* background-color: #efefef; */
    /* border: #db3e44 1px solid; */
    border-radius: 90px;
    padding: 0px;
    padding: 1px;
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 5px;
    color: #db3e44;
    background-color: #f7cb5a;
}

#container_img{
    background: linear-gradient(90deg, rgba(100, 100, 100, 0.1) 5%, transparent 0), 
    /*0度直线，100灰度，0.1透明度，5%宽度，0透明度背景*/
                 linear-gradient(rgba(100, 100, 100, 0.1) 5%, transparent 0);
    /*横纵向宽距*/
    background-size: 10px 10px;
}



.imglist_item{
    margin-right: 10px;
    image-rendering:pixelated; height: 100%; width: auto;
    border: 2px solid transparent;
}

.imglist_item_active{
    margin-right: 10px;
    image-rendering:pixelated; height: 100%; width: auto;
    border: 2px solid #1AC988;
}

.imglist_item:hover{
    margin-right: 10px;
    image-rendering:pixelated; height: 100%; width: auto;
    border: 2px solid salmon;
    
}

.colors_con{
    display: flex;
    flex-direction: column;
    /* background-color: beige; */
    padding-left: 7px;
    padding-top: 5px;
}

.color_control_board{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.color_control_board_title{
    min-width: 50px;
    height: 100%;
    size: 20px;
}

.zoom_btn{
    -moz-user-select:none;
}

.ocr_item_dom_text {
    word-wrap:break-word;
    white-space:normal;
    line-height: 40px;
}

.findimg_item_dom_text{
    word-wrap:break-word;
    white-space:normal;
    line-height: 40px;
}

.ocr_marks{
    /* border: #db3e44 1px dashed; */
    background:
        linear-gradient(90deg, #db3e44 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #db3e44 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #db3e44 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #db3e44 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    position: absolute;
    font-size: x-small;
    display: flex;
    flex-direction: column;
    padding: 0px;
    cursor: pointer;
}

.ocr_markshover{
    background:
        linear-gradient(90deg, #34fa41 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #34fa41 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #34fa41 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #34fa41 50%, transparent 0) repeat-y;
    background-size: 4px 2px, 4px 2px, 2px 4px, 2px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: linearGradientMove .2s infinite linear;
    padding: 5px;
    position: absolute;
    font-size: x-small;
    display: flex;
    flex-direction: column;
    
    cursor: pointer;
}

.ocr_res_hover{
    background-color: #efefef;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}


#findimg_partimg{
    /* border: 1px solid #1AC988; */
    background-color: antiquewhite; height: 90px; width: 100%; display: flex; flex-direction: row;
}

.findimg_preview{
    background: linear-gradient(90deg, rgba(100, 100, 100, 0.1) 5%, transparent 0), 
    /*0度直线，100灰度，0.1透明度，5%宽度，0透明度背景*/
                 linear-gradient(rgba(100, 100, 100, 0.1) 5%, transparent 0);
    /*横纵向宽距*/
    background-size: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}




