/* your-stylesheet.css */

/* 为<nav>中的所有链接和<button>提供统一的扁平风格 */
 /* 修改导航栏背景为半透明深灰色 */

nav .navbar-nav .nav-link, 
button {
    display: inline-block;
    padding: .5rem 1rem !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    cursor: pointer;
    border: none !important; /* 移除边框 */
    border-radius: 0 !important; /* 移除圆角 */
    color: #ffffff !important; /* 白色文字 */
    background-color: #5B32F0 !important; /* 蓝色背景 */
    transition: background-color .15s ease-in-out;
}

/* 鼠标悬停时的样式 */
nav .navbar-nav .nav-link:hover, 
button:hover {
    background-color: #8A5FF5 !important; /* 深蓝色背景 */
}

/* 下拉菜单的样式 */
nav .dropdown-menu {
    border: none !important; /* 移除边框 */
}

nav .dropdown-item {
    color: #ffffff !important; /* 白色文字 */
    background-color: #5B32F0 !important; /* 蓝色背景 */
}

nav .dropdown-item:hover {
    background-color: #8A5FF5 !important; /* 深蓝色背景 */
}
/* 为navbar-brand提供扁平风格 */
.navbar-brand {
    color: #ffffff !important; /* 白色文字 */
    background-color: #5B32F0 !important; /* 蓝色背景 */
    padding: .5rem 1rem !important;
    border: none !important; /* 移除边框 */
    transition: background-color .15s ease-in-out;
}

/* 鼠标悬停时的样式 */
.navbar-brand:hover {
    background-color: #8A5FF5 !important; /* 深蓝色背景 */
}

.navbar-toggler {
    background-color: #5B32F0 !important; /* 蓝色背景 */
    border: none !important; /* 移除边框 */
    transition: background-color .15s ease-in-out;
}

.navbar-toggler:focus {
    outline: none !important; /* 移除焦点时的轮廓 */
}

/* 为navbar-toggler-icon提供扁平风格 */
.navbar-toggler-icon {
    background-color: #000 !important; /* 白色背景 */
}

/* 鼠标悬停时的样式 */
.navbar-toggler:hover {
    background-color: #ffed26 !important; /* 深蓝色背景 */
}

.navbar.bg-dark {
    /*background-color: #5B32F0 !important;  蓝色背景 */
	border-top:#fff solid 1px;
	border-bottom:#fff solid 1px;
	 
}

/* 修改导航栏标题的颜色和鼠标悬停颜色 */
.navbar-brand {
    color: #ffffff !important; /* 白色文字 */
    transition: color .15s ease-in-out;
}

.navbar-brand:hover {
    color: #e6e6e6 !important; /* 鼠标悬停时的浅灰色 */
}

/* 为navbar-toggler提供扁平风格 */
.navbar-toggler {
    background-color: #5B32F0 !important; /* 蓝色背景 */
    border: none !important; /* 移除边框 */
    transition: background-color .15s ease-in-out;
}

.navbar-toggler:focus {
    outline: none !important; /* 移除焦点时的轮廓 */
}

/* 为navbar-toggler-icon提供扁平风格 */
.navbar-toggler-icon {
    background-color: #000 !important; /* 白色背景 */
}

/* 鼠标悬停时的样式 */
.navbar-toggler:hover {
    background-color: #ffed26 !important; /* 深蓝色背景 */
}
/* 修复子菜单的竖排对齐问题 */
.dropdown-menu {
    text-align: left;
}

/* 为navbar-toggler-icon提供一个汉堡式菜单图标 */
.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    height: 24px;
    width: 24px;
}

.navbar-toggler-icon::before, .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #000;
    top: 9px;
}

.navbar-toggler-icon::before {
    top: 4px;
}

.navbar-toggler-icon::after {
    bottom: 4px;
}
/* 修复子菜单的竖排对齐问题 */
.dropdown-menu {
    text-align: left;
    padding-left: 0; /* 移除左边的内边距 */
}

/* 修复下拉子菜单没有铺满整个下拉区的问题 */
.dropdown-menu .dropdown-item {
    width: 100%; /* 设置宽度为100% */
    padding-left: 1rem; /* 添加左边的内边距 */
}

/* 修复button点击时的边框线问题 */
button:focus, 
button:active, 
.nav-link:focus, 
.nav-link:active {
    outline: none !important; /* 移除焦点时的轮廓 */
    box-shadow: none !important; /* 移除点击时的阴影 */
    border: none !important; /* 移除边框 */
}

/* 为navbar-toggler-icon提供一个汉堡式菜单图标 */
.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    height: 24px;
    width: 24px;
}

.navbar-toggler-icon::before, .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ffffff;
    top: 9px;
}

.navbar-toggler-icon::before {
    top: 4px;
}

.navbar-toggler-icon::after {
    bottom: 4px;
}

/* 修复下拉菜单的背景颜色问题 */
.dropdown-menu {
    background-color: #5B32F0 !important; /* 蓝色背景 */
}

/* 修复下拉菜单项鼠标悬停时的背景颜色问题 */
.dropdown-item:hover {
    background-color: #8A5FF5 !important; /* 深蓝色背景 */
}
/* 使子菜单中的<button>元素垂直排列 */
.dropdown-menu button {
    display: block; /* 设置为块级元素 */
    width: 100%; /* 设置宽度为100% */
    text-align: left; /* 文本左对齐 */
    margin-bottom: 0.5rem; /* 添加底部外边距，使按钮之间有一定的间距 */
}

/* 最后一个按钮移除底部外边距 */
.dropdown-menu button:last-child {
    margin-bottom: 0;
}
/* 为navbar-toggler-icon提供一个汉堡式菜单图标 */
.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    height: 24px;
    width: 24px;
}

.navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ffffff;
}

.navbar-toggler-icon::before {
    top: 4px;
}

.navbar-toggler-icon span {
    top: 11px;
}

.navbar-toggler-icon::after {
    bottom: 4px;
}

/* 修改navbar-toggler的背景颜色和边框 */
.navbar-toggler {
    background-color: transparent !important;
    border: none !important;
}

/* 为navbar-toggler-icon创建汉堡式图标 */
.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    width: 24px;
    height: 2px; /* 这是中间的线 */
    background-color: #000;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: all 0.3s;
}

.navbar-toggler-icon::before {
    top: -8px; /* 调整上面的线的位置 */
}

.navbar-toggler-icon::after {
    bottom: -8px; /* 调整下面的线的位置 */
}