/* 重置默认字体大小 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

/* 自定义字体大小 */
.custom-font-size {
  font-size: 11px; /* 你可以根据需要调整这个值 */
}

.nav-link:hover {
  color: red; /* 鼠标悬浮时文字颜色变为红色 */
}


.my-table th {
  text-align: center;
  white-space: nowrap;
}

.my-table .fixed-column {
  width: 100px; /* 固定宽度 */
  position: sticky;
  right: 0;
  background-color: #fff; /* 防止滚动条遮挡 */
  z-index: 1;
}
.my-table .fixed-column:last-child {
  right: 0; /* 确保最后一列始终在右侧 */
}


/*表格内容不折行 */
.my-table td {
  text-align: center;
  white-space: nowrap;
}
 
/*表格内容不折行  */
.my-table tr {
  text-align: center;
  white-space: nowrap;
}

th, td {
  text-align: center; /* 设置单元格文本居中对齐 */
  vertical-align: middle; /* 设置单元格垂直居中对齐 */
  padding: 4px; /* 设置单元格内边距 */
}

.custom-td {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}



.mybutton {
  background-color: transparent;
  border: none;
  color: black; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 2px;
  cursor: pointer;
}


.mybutton:hover {
  color: red; /* 鼠标悬浮时文字颜色变为红色 */
}

.button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  padding: 2px;

}


.function-button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 2px;

}

.hidden {
  display: none !important;
}
.myElement {
  color: red; /* 设置字体颜色为红色 */
}


/*图片居中显示*/
.centered-image {
  display: block;
  margin: auto;
}

/* 自定义下拉菜单选项鼠标悬浮颜色 */
.dropdown-item:hover {
  background-color: #fbc522; /* 你可以选择你喜欢的颜色 */
}

/* 确保父元素.dropdown的位置是relative */
.dropdown {
  position: relative;
}

/* 居中下拉菜单 */
.center-dropdown {
  left: 50% !important; /* 覆盖默认的left值 */
  transform: translateX(-50%); /* 根据自身宽度调整位置，使其居中 */
  top: 100% !important; /* 确保菜单出现在按钮下方 */
}

.modal-dialog.custom-large {  
  width: 85%; /* 或者你想要的任何宽度，如 600px */  
  max-width: none; /* 如果需要的话，取消最大宽度的限制 */  
}

.modal-dialog.custom-big {  
  width: 70%; /* 或者你想要的任何宽度，如 600px */  
  max-width: none; /* 如果需要的话，取消最大宽度的限制 */  
}


.modal-dialog.custom-middle {  
  width: 50%; /* 或者你想要的任何宽度，如 600px */  
  max-width: none; /* 如果需要的话，取消最大宽度的限制 */  
}


.custom-shadow {
  box-shadow: 5px 5px 10px rgba(0,0, 0, 0.5); /* 设置阴影的水平偏移、垂直偏移、模糊度和颜色 */
}

.custom-icon {
  color: #fec025;    /* 橙色 */
  font-size: 12px;   /* 图标大小 */
  margin: 10px;      /* 外边距 */
}