.xieniao-chaip {
  height: auto;
  margin: 50px auto 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  background-color: #fff;
  border-radius: 8px;
}

@media screen and (max-width: 768px) { /* 假设768px是移动端的宽度上限 */
    .layui-table th, .layui-table td {
        max-width: 20vw; /* 设置最大宽度为视口宽度的15% */
        overflow-x: auto; /* 当内容超出时，允许水平滚动 */
        white-space: nowrap; /* 防止内容换行 */
    }
    .layui-table td {
    overflow: hidden; /* 隐藏超出部分的内容 */
    max-width: 100%; /* 确保td不会超过其容器的宽度 */
    white-space: nowrap; /* 防止文本换行 */
    text-overflow: ellipsis; /* 当文本被截断时显示省略号 */
}

/* 为包含表格的容器添加滚动条 */
.layui-table {
    display: block;
    overflow-x: auto; /* 当表格宽度超过视口宽度时，显示水平滚动条 */
    white-space: nowrap; /* 确保表格内的内容不会换行 */
}

/* 为表格的每个单元格添加滑动效果 */
.layui-table td {
    overflow-x: auto; /* 允许单元格内的内容水平滚动 */
}
}



        /* 默认样式，适用于电脑端 */
.layui-form-item .layui-input-inline {
    width: 60%!important;
}

 .layui-form-label {
 box-sizing: content-box;
}

 .benji-ip {
 display: block;
  width: 100%;
  padding-left: 10px;
  height: 38px;
  line-height: 38px; 
  text-align: center;
}

/* 移动端样式，适用于屏幕宽度小于768px的设备 */
@media (max-width: 768px) {
    .layui-form-item .layui-input-inline {
        width: 40%; /* 在移动端全宽显示 */
    }
    .layui-form-select {
    width: 95%!important;
}
.layui-btn {
    width: 95%!important;
}
}

/* 平板设备样式，适用于屏幕宽度在768px到992px之间的设备 */
@media (min-width: 768px) and (max-width: 992px) {
    .layui-form-item .layui-input-inline {
        width: 50%; /* 在平板设备上更宽一些 */
    }
}
.layui-btn {
    padding: 0 22px;}
        .layui-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fafafa;
            color: #aaa;
            text-align: center;
            padding: 10px 0;
        }

        .layui-input-block {
            margin-left: 0px;
        }

        /* 切换按钮样式 */
        .toggle-btn {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        /* 添加到你的 <style> 标签中 */
        .center-btn-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;
        }

        .layui-select {
            display: inline-block;
            width: auto;
            margin-right: 10px;
        }
        
        .layui-form-select {
    border: 1px solid #dcdfe6; /* 边框颜色 */
    border-radius: 4px; /* 边框圆角 */
    background-color: #fff; /* 背景颜色 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 盒子阴影 */
    cursor: pointer; /* 鼠标悬停时的光标样式 */
    transition: border-color 0.3s, box-shadow 0.3s; /* 过渡效果 */
    margin: 5px 0 0 0;   
    width: 100px;
}

.layui-form-select:hover {
    border-color: #409eff; /* 鼠标悬停时的边框颜色 */
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 鼠标悬停时的阴影 */
}

.layui-select-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px; /* 选择框的高度 */
}

.layui-select-title .layui-input {
    flex-grow: 1;
    border: none; /* 去掉输入框的边框 */
    outline: none; /* 去掉聚焦时的轮廓 */
    background-color: transparent; /* 背景透明 */
    font-size: 14px; /* 字体大小 */
    color: #606266; /* 字体颜色 */
}

.layui-edge {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 5px solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    transition: transform 0.3s; /* 下拉箭头的过渡效果 */
}

.layui-form-select .layui-edge {
    border-top-color: #c0c4cc; /* 箭头颜色 */
}

.layui-form-select:hover .layui-edge {
    border-top-color: #409eff; /* 鼠标悬停时的箭头颜色 */
}

.layui-anim-upbit {
    background-color: #fbfdff; /* 下拉菜单的背景颜色 */
    border: 1px solid #dcdfe6; /* 下拉菜单的边框颜色 */
    border-radius: 4px; /* 下拉菜单的边框圆角 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 下拉菜单的盒子阴影 */
    margin-top: 5px; /* 下拉菜单与选择框的间距 */
}

.layui-anim-upbit dd {
    padding: 0 10px;
    line-height: 40px; /* 下拉菜单项的高度 */
    cursor: pointer; /* 下拉菜单项的光标样式 */
    transition: background-color 0.3s; /* 过渡效果 */
}

.layui-anim-upbit dd:hover {
    background-color: #ecf5ff; /* 鼠标悬停时的背景颜色 */
}

.layui-anim-upbit dd.layui-this {
    color: #409eff; /* 选中项的颜色 */
    font-weight: bold; /* 选中项的字体加粗 */
}