.luo-pan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 定义 4 列 */
    grid-template-rows: repeat(4, 1fr);     /* 定义 3 行 */
    grid-gap: 3px;
    margin-top: 20px;
}

.hour-box {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    padding: 0px;
    text-align: center;
    border: 1px solid #000;
    background-color: #f0f0f0;
    height: 40px; /* 可以根据需要调整高度 */
}


.hour-box.gray {
    background-color: #ccc; /* 禁忌时辰灰色背景 */
}

.navigation {
    display: flex;               /* 使用 flexbox 布局 */
    justify-content: space-between; /* 让按钮之间保持均匀的间隔 */
    margin-top: 20px;
    width: 100%;                 /* 确保导航栏占据父元素的全部宽度 */
}

.button {
    flex-grow: 1;                /* 让每个按钮尽可能地扩大 */
    padding: 10px;               /* 增大按钮的内边距，使按钮看起来更大 */
    background-color: #0073aa;
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
    margin: 0 2px;               /* 在按钮之间添加一些左右间距 */
    max-width: 20%;              /* 确保按钮的宽度不会超过可用空间的20% */
}

.button:hover {
    background-color: #005177;
}


#forbidden-reason {
    white-space: normal;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);  /* 7列 */
    grid-gap: 0px;
    margin-bottom: 8px;
    margin-top: 10px;
}

.week-day-label {
    font-weight: bold;  /* 加粗显示星期几 */
    margin-bottom: 2px;  /* 和日期之间留一点空间 */
}

.day-text {
    font-size: 14px;
}


.week-day-box {
    display: flex;
    flex-direction: column;  /* 垂直排列 */
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    border: 1px solid #000;
    background-color: #f0f0f0;
}

.week-day-box.gray {
    background-color: #ccc; /* 不适合开盘的日子灰色背景 */
}

/* 为选中的日期元素添加红色底线 */
.selected-day {
    border-bottom: 2px solid red;
}

.gray {
    background-color: lightgray;
    color: gray;
}