.main {
    width: 100%;
            overflow: auto;
            font-size: 14px;
            overflow-y: auto;
            max-height: 100vh;
            /* 设置固定高度 */
            color: black
        }
@media (max-width: 600px) {

}
    table {
        width: 100%;
        /* border-collapse: collapse; */
       
    }

    .sticky-table tr:hover {
     background-color: #ebebeb;
    }
    .sticky-table th {
        border: 0.25px solid rgb(155, 155, 155);
        padding: 8px;
        text-align: left;
        width: 150px;
        min-width: 80px;
        width: 100%;
        text-align: center;
        position: relative;
        background-color: rgb(247,247,247);  
        top: 0;
        position: sticky;
        font-weight: 500;
        
      
    }
    .sticky-table thead tr th{background-color: #3c5c9b; color: white;}
    .sticky-table td{
        border: 0.25px solid rgb(155, 155, 155);
        padding: 8px;
        text-align: left;
        width: 150px;
        min-width: 80px;
        width: 100%;
        text-align: center;

    }
    
    .sticky-table th,
.sticky-table td {
border: none; /* 先移除默认边框 */
border-bottom: 1px solid rgba(229,229,229,0.8);
} 
.sticky-table thead tr th,
.sticky-table thead tr td {
border: 1px;
border: 1px solid #5e79b1;
}
/* 图片和型号的样式，确保在垂直滚动时吸顶 */
.sticky-table tr:nth-of-type(2) th:first-child,
.sticky-table tr:nth-of-type(2) th:nth-child(2) {
position: sticky;
top: 0; /* 吸顶效果 */
left: 0; /* 固定左侧 */
z-index: 3; /* 确保不被覆盖 */
}

/* 型号的样式，在右边滚动时固定到左侧 */
.sticky-table tr:nth-of-type(2) th:nth-child(2) {
position: sticky;
top: 0;
left: 95px; /* 左侧偏移，适应第一列宽度 */
z-index: 3;
/* background-color: rgb(247, 247, 247); */
}

/* 为第二行其他 th 设置吸顶效果 */
.sticky-table tr:nth-of-type(2) th {
position: sticky;
top: 0;
z-index: 1;
}

/* 表格的第一列内容 (图片) 和第二列内容 (型号) 在滚动时固定 */
.sticky-table td:first-child,
.sticky-table td:nth-child(2) {
position: sticky;
left: 0;
z-index: 2;
background-color: white;
}

.sticky-table td:nth-child(2) {
left: 96px;
}
.sticky-th-top{
    
    position: sticky;
    left: -3px;
    z-index: 2;

}

.sticky-th-small{
     position: sticky;
    left: 0px;
    z-index: 2;
}
    
  
    .filter {
        opacity: 0; /* Make select invisible */
        position: absolute; /* Position it absolutely */
        left: 0; /* Align to left */
        top: 0; /* Align to top */
        width: 100%;
        height: 100%;
        cursor: pointer; /* Change cursor to indicate it is clickable */
    }

    .filter-button {
        display: block;
        width: 100%;
        height: 100%;
        background: transparent;
        border: none;
      color: inherit;
        cursor: pointer;
        position: relative;
    }
/* Ensure the text in the dropdown is right-aligned */
.filter {
text-align: center;
}
/* Add a green checkmark to the selected option */


.filter option {
color: black;
}
/* Style for disabled options */
.filter option.disabled {
color: #d1d1d1;
background-color: #ffffff;
}


    .select-header:after{
        content: "";
        position: absolute;
        bottom: 0; 
        right: 0;
        width: 0;
        height: 0;
        border-top: 10px solid transparent; 
        border-right: 10px solid #9eb2d9; 
 
    }
  
 
    .selected-header:after{
        content: "";
        position: absolute;
        bottom: 0; 
        right: 0;
        width: 0;
        height: 0;
        border-top: 10px solid transparent; 
        border-right: 10px solid #ffffff; /* 改变三角形的颜色为蓝色 */
 
    }
    th.select-header.selected-header{background-color: #0086da!important;}
    .select-header:hover {
        background-color: #0086da!important;
        color: white!important;
    }
    .clear-btn{
       
       background-color:#3c5c9b;
       border-radius: 20px;
      
       position: sticky; 
       bottom: 60px;
       margin: auto;
       color: white;
       padding: 8px 12px;
       width: 120px;
height: 48px;
border-radius: 100px;
border-radius: 100px;
font-size: 14px;
border: 0px solid #D8D8D8;

box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
   }
   .cleardiv {
       position: fixed; /* 固定位置 */
       bottom: 60px;    /* 距离屏幕底部 60px */
       left: 50%;       /* 水平居中 */
       transform: translateX(-50%); /* 使按钮居中对齐 */
       z-index: 9999;   /* 确保按钮位于其他内容之上 */
    cursor: pointer
   }
   .clear-btn:hover {
       background-color: #0086da;
       border: 0px solid #3840b9;
       cursor: pointer;

   }
   #bigger {
        position: relative; /* 确保放大图片相对于父容器定位 */
        display: inline-block; /* 保证和其他元素并排 */
    }

    /* 放大的图片默认隐藏 */
    .zoomed-img {
        display: none; /* 默认不显示 */
        position: absolute; /* 相对父容器定位 */
        top: -10px; /* 根据需要调整位置 */
        left: 130px; /* 使放大图片显示在原图右边 */
        width: 300px; /* 放大图片的宽度 */
        height: auto; /* 保持图片比例 */
        z-index: 10; /* 确保放大图片在所有内容上 */
        border: 1px solid #ccc;
        background-color: white;
    }

    /* 悬停时显示放大图片 */
    #bigger:hover .zoomed-img {
        display: block; /* 悬停时显示放大图片 */
    }
   
    
    th.sm-header{
   text-align: left;
   padding: 4px;
   
   font-weight: bold;
   color: #3C5C9B;
   font-size: 16px;
    }

    .correct{
       
        width: 10px;
    height: 10px;
    display: inline-block;
    background-image: url(https://www.waveshare.net/img/correct.png);
    background-size: contain;
    }
   .sticky-table a {
text-decoration: underline;
}
    @media (max-width: 600px) {
    table th {
        min-width: 90px!important;
    }
        .sticky-table td:nth-child(2) {
left: 106px;
}
        .sticky-table tr:nth-of-type(2) th:nth-child(2) {
position: sticky;
top: 0;
left: 106px; /* 左侧偏移，适应第一列宽度 */
z-index: 3;
/* background-color: rgb(247, 247, 247); */
}
}