/* 导入图标字体 */
@font-face {
    font-family: 'icons';
    src: url('css/iconfont.ttf');
}

/* 重置和体积设置 */
html,
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}

body {
    font-family: Arial, sans-serif;
}

p {
    text-align: center;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background-color: #f7f7f7;
    padding: 20px 10px;
}

form {
    border: 1px solid #dddddd;
    background: #ffffff;
    padding: 40px 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #0000001a;
}

input[type=text],
input[type=password] {
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;
}


/* Bootstrap 已经有了基本的重置样式和网格系统，所以大部分的宽度，间距等样式可以去掉或用Bootstrap的类替代 */

/* 利用Bootstrap的网格系统和响应式辅助类来进行布局 */
.calendar-container,
.schedule-table {
    width: 100%;
}

/* 使用Bootstrap的按钮样式 */
.btn {
    margin: 0 5px;
}

/* 自适应表格 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 调整表格样式 */
.table {
    width: 100%;
}



/* 自定义样式，不影响Bootstrap的栅格系统 */
.calendar {
    margin-top: 20px;
}

/* 标题栏的样式 */
.weekdays .col {
    background-color: #007bff;
    color: white;
    margin-bottom: 5px;
}

/* 日期单元格的样式 */
.date-row .col {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-bottom: 5px;
}

/* 本周的样式 */
.toWeek {
    background-color: pink !important;
    color: #000 !important;
}

/* 当天日期的样式 */
.today {
    background-color: pink !important;
    color: white !important;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid #000 !important;
    padding: -1px;
}

/* 有课程安排的日期 */
.has-class {
    background-color: greenyellow !important;
    color: #000 !important;
}

/* 担保不换行的关键是使用flex布局并给每个日期元素固定宽度 */
.calendar .row {
    display: flex;
    flex-wrap: nowrap;
}

.calendar .row .col,
/* 修改为row>col以适用于所有子col */
.weekdays .col,
.date-row .col {
    flex: 0 0 14.286%;
    /* flex-grow, flex-shrink, flex-basis */
    max-width: 14.286%;
    /* 最大宽度也设置为14.286% */
    border: 1px solid #dee2e6;
    margin-bottom: 5px;
    min-height: 60px;
    /* 或者您需要的高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 因为Bootstrap是基于12列的，所以我们需要使用自定义宽度 */
.tr {
    display: flex;
    margin: 0 -0.5rem;
    /* 添加负边距来抵消列之间的间隙 */
    background: #ddd;
    border: 1px solid #000;
}

.th {
    font-weight: bolder;
}

.th,
.td {
    flex: 0 0 12.5%;
    /* 设置flex-basis为12.5%，这样每个元素都会占据1/8的宽度 */
    max-width: 12.5%;
    /* 设置最大宽度为12.5%，以保持响应式布局 */
    box-sizing: border-box;
    /* 包括padding和border在内的总宽度 */
    padding: 0.5rem;
    /* 添加一些内边距 */
    text-align: center;
    /* 文本居中 */
}

.class-info {
    display: flex;
    flex-wrap: wrap;

}

.class-info>div {
    width: 100%;
    text-align: center;
}

.classroom {
    background: skyblue;
    font-weight: bold;
    color: #fff;
}

.endtime {
    font-size: 10px;
    color: #aaa;
}

.teacher {
    font-weight: bold;
}

.content {
    font-style: italic;
    color: skyblue;
}

.students {
    font-size: 10px;
}

h6 {
    text-align: center;
}

.btn {
    font-family: 'icons' !important;
    margin: 6px 3px;
}

/* 自适应屏幕，小于768px时调整内边距和字体大小 */
@media (max-width: 768px) {

    .weekdays .col,
    .date-row .col {
        padding: 0;
        /* 移除内边距 */
        min-height: 18px;
        /* 根据需要调整 */
        font-size: .775rem;
    }

    .th,
    .td {
        padding: 0.25rem;
        /* 减少内边距 */
        font-size: 0.8rem;
        /* 减小字体大小 */
    }
}

/* 适应小屏幕 */
@media (max-width: 768px) {
    /* 使用Bootstrap的类来进行布局调整 */
}

@media (max-width: 600px) {
    /* 使用Bootstrap的类来进行布局调整 */
}

@media (max-width: 400px) {
    /* 使用Bootstrap的类来进行布局调整 */
}