/* 消除背景色 */
.content-wrap {
    background: transparent !important;
}

.main {
    background: transparent !important;
    box-shadow: none !important;
    /* 移除阴影 */
}

/* 按钮样式 */
.btn-primary {
    background-color: #99c2ff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-right: 10px;
}

.btn-primary.active {
    background-color: #4CAF50;
}

.btn-primary:hover {
    background-color: #1a252f;
}

/* 图表容器样式 */
.chart-container {
    height: 500px;
    /* 增加高度 */
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    /* 为下拉菜单定位做准备 */
}

.chart-container h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #2c3e50;
}

/* 下拉菜单样式 */
.dropdown {
    position: absolute;
    /* 绝对定位 */
    top: 20px;
    /* 距离顶部 */
    right: 20px;
    /* 距离右侧 */
    z-index: 10;
    /* 确保在下拉菜单在最上层 */
}

.dropdown select {
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    width: 200px;
}

/* 布局样式 */
.chart-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.chart-col {
    flex: 1;
}

/* 调整折线图和饼状图宽度 */
.chart-col.line-chart {
    flex: 6;
    /* 折线图占70% */
}

.chart-col.pie-chart {
    flex: 4;
    /* 饼状图占30% */
}

/* 页面标题样式 */
.page-title h1 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
}

/* 下载按钮样式 */
.btn2 {
    border: 1px solid #ecd1d1;
    width: 50px;
    height: 28px;
    margin: 10px 15px 0 0;
    background: #ffd1d1;
    color: rgb(142, 65, 65);
    font-size: 14px;
    float: right;
    cursor: pointer;
}

.btn2:hover {
    background: #ffb3b3;
}

/* 表格样式 */
#customers1,
#customers2,
#customers3 {
    width: 88% !important;
    border-collapse: collapse;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#customers1 td,
#customers1 th,
#customers2 td,
#customers2 th,
#customers3 td,
#customers3 th {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

#customers1 th,
#customers2 th,
#customers3 th {
    background-color: #2c3e50;
    color: #ffffff;
    font-weight: 600;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#customers1 tr:nth-child(even),
#customers2 tr:nth-child(even),
#customers3 tr:nth-child(even) {
    background-color: #f8f9fa;
}

#customers1 td,
#customers2 td,
#customers3 td {
    color: #333;
    font-weight: 400;
}

#customers1 .color1,
#customers2 .color1,
#customers3 .color1 {
    background-color: #2c3e50;
    color: #ffffff;
}

#customers1 .color2,
#customers2 .color2,
#customers3 .color2 {
    background-color: #0077b6;
    color: #ffffff;
}

#customers1 .color3,
#customers2 .color3,
#customers3 .color3 {
    background-color: #e6f2ff;
    color: #333;
}

#customers1 .color4,
#customers2 .color4,
#customers3 .color4 {
    background-color: #f8f9fa;
    color: #333;
}

#customers1 .foot,
#customers2 .foot,
#customers3 .foot {
    font-size: 12px;
    color: #666;
}

#customers1 .fr,
#customers2 .fr,
#customers3 .fr {
    float: right;
}

#customers1 .pd2,
#customers2 .pd2,
#customers3 .pd2 {
    padding-right: 20px;
}

#customers1 .cc,
#customers2 .cc,
#customers3 .cc {
    background-color: #f8f9fa;
}
/* 查看详情按钮样式 */
.btn3 {
    background-color: #99c2ff; /* 与数据按钮相同的颜色 */
    color: #ffffff; /* 白色文字 */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 4px; /* 圆角 */
    font-size: 14px; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

.btn3:hover {
    background-color: #2c3e50; /* 悬停时背景色变深 */
    color: #ffffff; /* 悬停时文字颜色保持白色 */
}