.SinonJZH-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
border-color: #e7e7e7;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 11px 2px rgba(42, 42, 42, 0.1);
border-top: 4px solid #00ffff;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 0;
margin-top: 0;
position: sticky;
top: 5px;
}
.SinonJZH-nav .SinonJZH-nav-item {
display: block;
margin-bottom: 5px;
margin-right: 1rem;
}
.SinonJZH-nav .SinonJZH-nav-item p {
margin: 0;
position: relative;
}
.SinonJZH-nav .SinonJZH-nav-item p:first-child {
display: flex;
align-items: center;
}
.SinonJZH-nav .SinonJZH-nav-item a {
color: #737373;
text-decoration: none;
font-size: larger;
font-weight: 500;
}
.SinonJZH-nav .SinonJZH-nav-item a:nth-child(2) {
color: black;
}
.SinonJZH-nav .SinonJZH-nav-item .selflink {
color: black;
font-weight: bold;
}
.SinonJZH-nav .SinonJZH-nav-item .selflink ~ .SinonJZH-nav-select {
position: absolute;
top: 38px;
left: 0;
height: 5px;
width: 100%;
background: #F57D38;
}
.SinonJZH-nav .SinonJZH-nav-item:first-child .selflink ~ .SinonJZH-nav-select {
top: 51px;
}
.SinonJZH-nav .SinonJZH-nav-item a:hover {
color: black;
}
.SinonJZH-nav .SinonJZH-nav-status {
flex: 1;
display: flex;
align-items: center;
justify-content: end;
}
.SinonJZH-nav .SinonJZH-nav-status > p > span {
margin-bottom: 5px;
font-size: larger;
}
.SinonJZH-userbox {
display: flex;
flex-wrap: wrap;
}
.SinonJZH-userbox > div {
float: none !important;
}
.SinonJZH-userbox > hr {
width: 100%;
margin: 5px 0 5px 0;
}
@media screen and (max-width: 600px) {
.SinonJZH-nav {
position: static;
}
.SinonJZH-nav .SinonJZH-nav-item,
.SinonJZH-nav .SinonJZH-nav-status {
margin: initial;
width: 100%;
}
.SinonJZH-nav .SinonJZH-nav-item .SinonJZH-nav-select {
display: none;
}
.SinonJZH-nav .SinonJZH-nav-item p:first-child,
.SinonJZH-nav .SinonJZH-nav-status {
justify-content: center;
}
}