/* body{
    background:rgb(35, 53, 92);
    color: white;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
/*} */


@import "base.css";

/* 按钮菜单 */
/*固定菜单*/
.menu_bar {
/* transform: translate(-50%); */
padding: 0;
text-align: center;
}

.menu_ul {
    padding: 0;
    margin: 0; 
}

.menu_bar ul{
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 8px 16px 0px var(--shadow-color);
}
.menu_bar ul li{
    color: var(--light-color);
    background-attachment: var(--light-bg-color);
    text-decoration: none;
    display:inline-block;
    vertical-align: middle;
    padding: 4px 0px 4px 0px;
    /* border-radius:3px; */
    /* border-bottom: 5px; */
    /* margin-bottom: 5px; */
}
.menu_bar ul li:hover {background-color: var(--foucs-bg-color);color:var(--foucs-color);}
.menu_bar ul li a{width: 150px; text-decoration:none;color: var(--light-color);display:inline-block; } /*padding: 5px;*/
.menu_bar ul li a:hover{width: 150px; text-decoration:none; color: var(--foucs-color);}

/* 下拉菜单 */
.menu_root{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.dropbtn {
    background-color: var(--light-bg-color);
    color: var(--light-color);
    padding: 6px 0px 6px 0px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    min-width: 160px;
    /* border-radius:5px; */
}

.dropbtn:hover, .dropbtn:focus {
    background-color: var(--dark-bg-color);
    color: var(--dark-color);
}

.dropdown-content {
    /* display:flex; */
    overflow: auto;
    padding: 1px 0px 1px 0px;
    margin-top: 4px;
    flex-direction: column;
}

.is-root {
    display: none;
    position: absolute;
    min-width: 160px;
    background-color: var(--light-bg-color);
    border-radius:10px;
    box-shadow: 0px 8px 16px 0px var(--shadow-color);
    z-index: 1;
}

.dropdown-content .collapsed{
    display: none;
}
/* .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1} */


.dropdown-content li{
    color: var(--light-color);
    background-color: var(--light-bg-color);
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}
.dropdown-content  li:hover {background-color: var(--foucs-bg-color);color:var(--foucs-color)}

.dropdown-content li ul li{
    background-color: var(--light-bg-color);
    color: var(--light-color);
    padding: 4px 8px;
    text-decoration: none;
    display: block;
}
.dropdown-content  li ul li:hover {background-color: var(--dark-bg-color);color: var(--dark-color);}

.special{
    background: pink;
    color: azure;
}

.show {display:flex;}
/* block */

/* 汉堡按钮（仅移动端显示） */
.nav-toggle {
	display: none;
	background: var(--dark-bg-color);
	color: var(--dark-color);
	border: none;
	font-size: 22px;
	line-height: 1;
	padding: 6px 14px;
	cursor: pointer;
	border-radius: 4px;
}

/* 移动端菜单 */
@media only screen and (max-width: 768px) {
	.nav-toggle {
		display: inline-block;
	}
	.menu_ul {
		display: none;
		flex-direction: column;
		width: 100%;
	}
	.menu_ul.open {
		display: flex;
	}
	.menu_bar ul li {
		display: block;
		width: 100%;
		text-align: center;
	}
	.menu_bar ul li a {
		width: 100%;
	}
	.dropbtn {
		min-width: 0;
		width: 100%;
	}
	.is-root {
		position: static;
		min-width: 0;
		box-shadow: none;
	}
}