#container {
  background-color: unset;
}

#page_bg {
  /*background-color: #243e4b;*/
  background: url("/content/images/bg.jpeg") no-repeat;
  background-size: cover;
  background-position: 50%;
  /*transform:scale(2);*/
  position: absolute;
  top: 0;
  left: -50%;
  bottom: 0;
  right: 0;
}
#page_bg > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #2b3844;
  opacity: 0.95;
}

#content {
  position: absolute;
  bottom: 0;
  left: 340px;
  right: 0;
  top: 50px;
}

.htt {
  position: absolute;
  padding: 7px 8px;
  z-index: 9999;
  background-color: #80bcc8;
  color: #fff;
  border-radius: 3px;
}
.htt .arrow,
.htt .arrow::before {
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: -1;
  left: -3px;
  top: 7px;
}
.htt .arrow::before {
  content: "";
  transform: rotate(45deg);
  background: #80bcc8;
}

#nav {
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
  bottom: 0;
}
#nav nav {
  width: 100%;
  height: 100%;
}
#nav #logo {
  margin: 10px auto;
  width: 48px;
  height: 48px;
}
#nav #logo img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
#nav .mn {
  position: absolute;
  width: 90px;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
#nav .mn .mn-ni {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 70px;
  font-size: 12px;
  /*border-top: 1px solid #1b313c;*/
  text-decoration: none;
  transition: ease-in all 0.2s;
  /*&:last-child {
      border-bottom: 1px solid #1b313c;
  }*/
  /*  &:hover .tt {
      display: inline;
  }*/
}
#nav .mn .mn-ni span {
  color: #fff;
}
#nav .mn .mn-ni span:first-child {
  font-size: 18px;
  margin-bottom: 3px;
}
#nav .mn .mn-ni:hover {
  /*background-color: #16303d;*/
  /*background-color: #16303e;*/
  background-color: #007882;
  opacity: 0.8;
}
#nav .mn .mn-ni.active {
  background-color: #fff;
}
#nav .mn .mn-ni.active span {
  color: #3e6275;
}
#nav .mni {
  position: absolute;
  top: 0;
  left: 90px;
  bottom: 0;
  width: 250px;
}
#nav .mni #navDrag {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  width: 5px;
  cursor: pointer;
}
#nav .mni #navDrag:hover {
  background-color: #6890ac;
}
#nav .mni .ni {
  display: none;
  height: 100%;
  /*&.cola {
      width: 10px;
  }*/
}
#nav .mni .ni > div {
  height: 50px;
}
#nav .mni .ni h2 {
  height: 50px;
  padding-left: 10px;
  color: #fff;
  font-size: 1.5em;
  line-height: 45px;
}
#nav .mni .ni ul {
  height: 100%;
  overflow: auto;
  background-color: #fff;
  border-radius: 10px 0 0 0;
  border-right: 1px solid #ddd;
  box-shadow: rgba(36, 62, 75, 0.2) -8px 0px 10px;
  padding-top: 7px;
}
#nav .mni .ni ul li {
  padding: 3px 0px 3px 10px;
  color: #657580;
  display: flex;
  align-items: center;
}
#nav .mni .ni ul li.act {
  font-size: 10px;
  color: #666;
  margin-top: 10px;
}
#nav .mni .ni ul li.active {
  background-color: #17edff;
  border-radius: 0 10px 10px 0;
  margin-right: 5px;
}
#nav .mni .ni ul li.active a {
  color: #004262;
}
#nav .mni .ni ul li span {
  margin-right: 10px;
  width: 25px;
  text-align: center;
  font-size: 15px;
}
#nav .mni .ni ul li a {
  color: #535353;
  flex: 1 1 auto;
  text-decoration: none;
}
#nav .mni .ni ul li:not(.act):not(.active):hover {
  background-color: #ebf3ff;
  border-radius: 0 10px 10px 0;
  margin-right: 5px;
}
#nav .htt {
  display: none;
}
#nav .tt {
  /* position: absolute;
  left: 45px;
  display: none;*/
  padding: 3px 8px;
  z-index: 9999;
  /*    background-color: #6890ac;
  color: #fff;*/
  border-radius: 3px;
}
#nav .tt .arrow,
#nav .tt .arrow::before {
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: -1;
  left: -3px;
  top: 7px;
  display: none;
}
#nav .tt .arrow::before {
  content: "";
  transform: rotate(45deg);
  background: #6890ac;
}

body.cola #content {
  left: 142px;
}
body.cola #nav .mni {
  width: 52px;
}
body.cola #nav .mni .na {
  display: none;
}
body.cola #nav .mni .act {
  padding-left: 4px;
}
body.cola #nav .mni li {
  padding-left: 0;
  text-align: center;
}
body.cola #nav .mni li .ico {
  margin-right: 0;
}
body.cola #nav .mni a:hover .tt {
  display: block;
}