/* 定义三级导航容器的样式，设置圆角为 5px，超出部分隐藏 */
.level {
    border-radius: 5px;  /* 设置圆角为 5px */
    overflow: hidden;   /* 超出部分隐藏 */


    width: 100%; /* 设置侧边栏容器宽度为 100% */
    background: #f8f9fa; /* 设置侧边栏容器的背景颜色 */
    box-shadow: 2px 2px 3px rgba(173, 181, 189, 0.25); /* 设置侧边栏容器的阴影效果 */
}

/* 定义三级导航内链接的样式，设置文字颜色、字体大小，去除轮廓和下划线 */
.level a {
    color: #333;         /* 设置文字颜色为深灰色 */
    font-size: 15px;     /* 设置字体大小为 15px */
    outline: 0;          /* 去除轮廓 */
    text-decoration: none; /* 去除下划线 */
}

/* 定义一级标题的样式，设置字体粗细为 600，字体大小为 16px */
.level-title {
    font-weight: 600;    /* 设置字体粗细为 600 */
    font-size: 16px;     /* 设置字体大小为 16px */
}

/* 定义各级标题的公共样式，设置鼠标指针为手型，添加内边距，使用弹性布局垂直居中，设置文字颜色 */
.level-title,
.level1-title,
.level2-title {
    cursor: pointer;     /* 设置鼠标指针为手型 */
    padding: 5px 10px;   /* 添加内边距 */
    display: flex;       /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    color: #333;         /* 设置文字颜色为深灰色 */
}

/* 定义各级标题的悬停样式，设置悬停时文字颜色为橙色 */
.level-title:hover,
.level1-title:hover,
.level2-title:hover {
    color: #ffa200;      /* 悬停时文字颜色为橙色 */
}

/* 定义各级内容区域的公共样式，设置顶部边框为 0，添加左右内边距 */
.level-body,
.level1-body,
.level2-body {
    border-top: 0;       /* 设置顶部边框为 0 */
    padding: 0 10px;     /* 添加左右内边距 */
}

/* 定义各级论坛列表的公共样式，去除列表默认样式和内外边距 */
.level-forum,
.level1-forum,
.level2-forum {
    list-style: none;    /* 去除列表默认样式 */
    padding: 0;          /* 去除内边距 */
    margin: 0;           /* 去除外边距 */
}

/* 二级论坛列表样式，当前为空，可后续添加样式 */
.level1-forum {
}

/* 定义各级论坛列表项的公共样式，设置内边距，使列表项水平排列 */
.level-forum li,
.level1-forum li,
.level2-forum li {
    padding: 8px;        /* 设置内边距为 8px */
    display: inline-block; /* 使列表项水平排列 */
}

/* 定义各级论坛列表项的悬停样式，当前为空，可后续添加悬停效果 */
.level-forum li:hover,
.level1-forum li:hover,
.level2-forum li:hover {
}

/* 定义切换图标的样式，设置字体大小为 1.2em，添加左边距，设置字体粗细为 400 */
.toggle-icon {
    font-size: 1.2em;    /* 设置字体大小为 1.2em */
    margin-left: 10px;   /* 添加左边距为 10px */
    font-weight: 400;    /* 设置字体粗细为 400 */
}

/* 定义各级内容容器的公共样式，设置背景颜色为白色 */
.level-content,
.level1-content,
.level2-content {
    background-color: #fff; /* 设置背景颜色为白色 */
}

/* 定义论坛列表中名称的样式，设置字体粗细为 600 */
.bbslist .name {
    font-weight: 600;    /* 设置字体粗细为 600 */
}

/* 定义论坛列表中简介的样式，设置字体大小为 12px，颜色为灰色，添加顶部外边距 */
.bbslist .brief {
    font-size: 12px;     /* 设置字体大小为 12px */
    color: #9c9c9c;      /* 设置颜色为灰色 */
    margin-top: 2px;     /* 添加顶部外边距为 2px */
}

/* 定义论坛列表中 Logo 的样式，设置圆角为 5px */
.bbslist .logo-3 {
    border-radius: 5px;  /* 设置圆角为 5px */
}

/* 定义论坛列表中各级内容容器的样式，设置底部外边距，添加边框和圆角 */
.bbslist .level-content,
.bbslist .level1-content,
.bbslist .level2-content {
    margin-bottom: 15px; /* 设置底部外边距为 15px */
    border: 1px solid rgba(0, 0, 0, 0.125); /* 添加边框 */
    border-radius: 3px;  /* 设置圆角为 3px */
}

/* 定义论坛列表中各级标题的样式，设置字体大小、粗细，使用相对定位，添加左边距和顶部内边距 */
.bbslist .level-title,
.bbslist .level1-title,
.bbslist .level2-title {
    font-size: 16px;     /* 设置字体大小为 16px */
    font-weight: 600;    /* 设置字体粗细为 600 */
    position: relative;  /* 使用相对定位 */
    margin-left: 10px;   /* 添加左边距为 10px */
    padding-top: 10px;   /* 添加顶部内边距为 10px */
}

/* 定义论坛列表中各级标题的伪元素样式，在标题左侧添加一个蓝色的竖线 */
.bbslist .level-title:before,
.bbslist .level1-title:before,
.bbslist .level2-title:before {
    content: '';         /* 伪元素内容为空 */
    height: 14px;        /* 设置高度为 14px */
    width: 3px;          /* 设置宽度为 3px */
    background-color: #0489d7; /* 设置背景颜色为蓝色 */
    position: absolute;  /* 使用绝对定位 */
    border-radius: 3px;  /* 设置圆角为 3px */
    top: 16px;           /* 距离顶部 16px */
    left: 0px;           /* 距离左侧 0px */
}