* {
  margin: 0;
  padding: 0;
  /*box-sizing: border-box;*/
  /*background-size: 100% 100%;*/
}
/* 外部容器，用于居中显示checkbox组 */  
.checkbox-center-container {  
    display: flex; /* 使用Flexbox布局 */  
    justify-content: left; /* 水平居中子元素 */  
/*            align-items: center; /* 垂直居中子元素（如果需要的话） */  */
    height: 100vh; /* 假设你想让checkbox组在视口中垂直居中 */  
    margin: 0; /* 移除默认边距 */  
    padding: 0px; /* 添加一些内边距（可选） */  
}  

/* checkbox组容器 */  
.checkbox-group {  
    display: flex; /* 让多个checkbox横排 */  
}  

/* checkbox和label的容器 */  
.checkbox-container {  
    margin-right: 16px; /* 为每个checkbox容器添加右边距 */  
    
}  

/* 最后一个checkbox容器不需要右边距 */  
.checkbox-container:last-child {  
    margin-right: 0;  
}  

/* checkbox和label的样式 */  
.checkbox-container input[type="checkbox"] {  
    margin-right: 0px; /* checkbox和label之间的间距 */  
}  

.checkbox-container label {  
    font-family: 'Arial', sans-serif; /* 使用一个常见的字体 */ 
    color:black; 
}  

/*表格table*/
table {
    border-collapse: collapse;
}

.sticky-table {
    overflow: auto;
    height: calc(100%-30px); /* 设置固定高度100% calc(100%-320px)*/
    width: 100%;
    position: absolute;
    /*overflow-y:auto;
    overflow-x:auto;
    
    bottom:100px;*/
    display:block;
    max-height:100% - 30px;
    max-width:100%;
    overflow-y:auto;
}

.sticky-table td, .sticky-table th {
    /* 设置td,th宽度高度 */
    border: 1px solid #c7d8ee;
    width: 130px;/*150px*/
    min-width: 100px;
    height: 24px;
    padding: 3px;
    color:black;
    font-size:13px;
}

.sticky-table th {
    position: sticky;
    top: 0; /* 首行永远固定在头部  */
    background-color: #60ACFC; /*设置表头背景色*/
}

.sticky-table td:first-child, .sticky-table th:first-child {
    position: sticky;
    left: 0; /* 首列永远固定在左侧 */
    z-index: 1;
    background-color: #eaf4ff;
    font-size:13px;
    color:green;
    width:130px;
    hover:red;
}

.sticky-table th:first-child {
    z-index: 2; /*表头的首列要在上面*/
}

.sticky-table th > div {
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}
.table-body tbody tr:nth-child(2n+1){
	background-color:#f2f2f2;
}



.table-body tbody tr:hover {
	background-color:red;
}

/*.sticky-table table {
    table-layout: fixed;
}*/

/*main-body*/
.main-body {  
    margin: 0;  
    padding: 0;  
    display: flex;
}  

.sidebar {  
    width: 185px;  
    overflow-y: scroll;  
    height: 100vh;  
    position: sticky;  
    top: 0; 
    background:lightgray; 
    bottom：60px;
}  

.main-content {  
    flex-grow: 1;  
    display: flex;  
    flex-direction: column;

}  

.top-part, .bottom-part {  
    padding: 0px;  
    background-color: #fff;  
}  

.top-part {  
/*        flex: 1;  */
    border-bottom: 0px solid #ccc;  
    height: 170px;
}  

.bottom-part {  
/*        flex: 2;  */
    height: calc(100% - 170px);
}

.blue-line {
	width:100%;
	height:2px;
	background-color:#0000ff;
	margin:1px 0;
}