/* 模态框覆盖层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    z-index: 999; /* 确保在最上层 */
}

/* 模态框内容 */
.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* 确保在覆盖层之上 */
    width: 90%; /* 适应屏幕宽度 */
    max-width: 1200px; /* 最大宽度 */
    max-height: 80vh; /* 设置最大高度为视口高度的80% */
    overflow-y: auto; /* 允许垂直滚动 */
}

.close {
    cursor: pointer;
    float: right;
    font-size: 20px;
}

h2 {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.form-group {
    flex: 1; /* 每个输入框占据相同的空间 */
    margin-right: 10px; /* 右侧间距 */
}

.form-group:last-child {
    margin-right: 0; /* 最后一个不需要右侧间距 */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 包含内边距和边框 */
}

textarea {
    height: 100px; /* 设置文本区域高度 */
}

.submit-button {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%; /* 按钮宽度 */
}

.submit-button:hover {
    background-color: #45a049; /* 悬停时变深 */
}

/* 按钮样式 */
.styled-button {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    padding: 10px 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    text-decoration: none; /* 无下划线 */
    display: inline-block; /* 使按钮在行内显示 */
    font-size: 16px; /* 字体大小 */
    margin: 4px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
}

/* 悬停效果 */
.styled-button:hover {
    background-color: #45a049; /* 悬停时变为更深的绿色 */
    transform: scale(1.05); /* 悬停时稍微放大 */
}

/* 禁用状态 */
.styled-button:disabled {
    background-color: #ccc; /* 灰色背景 */
    cursor: not-allowed; /* 禁用状态鼠标样式 */
}