/* -------------------------- userBar  ---------------------- */
.nav_userBar {
  position: relative;
  color: #FFF;
  display: flex;
  align-items: center;
  padding: 4px 30px;
  font-size: 14px;
}

.nav_userBar p {
  margin: 0;
  padding:0;
}
.nav_userBar button {
  font-size: 14px;
  overflow: hidden;
  position: relative;
}

.nav_userBar button .progress {
	position: absolute;
	left: 0;
	background: rgba(255,255,255,0.4);
  top: 0;
	width: 0%;
	opacity: 0;
	height: 100%;
	z-index: 0;
	-webkit-transition: width 0s 0.3s, opacity 0.3s;
	transition: width 0s 0.3s, opacity 0.3s;
}

.nav_userBar button.go {
  transform: translate(2px, 2px);
}

.nav_userBar button.go .progress {
	opacity: 1;
	width: 100%;
	-webkit-transition: width 0.8s;
	transition: width 0.8s;
}
.nav_userBar div:not(:last-child){
  margin-right: 20px;
}
.nav_userBar .nav_fileName {
  flex: 1;
}
#nav_chapterBar .hbIcon {
  display: none;
  width: 30px;
  height: 30px;
  background-color: #FEFEFE;
  position: absolute;
  left: 20px;
  top: 16px;
  margin-top: 0px;
  cursor: pointer;
  background-image: url(../image/hbmenu.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#fixed_userBar {
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index:100;
}
@media print {
  #fixed_userBar {
    position: absolute;
  }
}
/* -------------------------- chapterBar ---------------------- */
header #nav_chapterBar {
  text-transform: uppercase;
  position: relative;
  border: 0px dotted #ccc;
  display: flex;
  align-items: center;
  padding: 4px 30px;
  /* we need height less than min height to fix an IE flexbox issue. */
  /* https://github.com/philipwalton/flexbugs/issues/231 */
  height: 1px;
  min-height: 70px;
    border-bottom: 1px solid #DDD;
}
header .nav_pathTitle {
  display: none;
  min-width: 150px;
}
header .nav_logoBox {
  min-width: 180px;
}

body .blck {
  background-color: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: none;
}

@media only screen and (max-width: 1340px) {
  header .nav_logoBox {
    display: none;
  }
  header .nav_pathTitle {
    width: 180px;
    flex-shrink: 0;
  }
  header #nav_chapterBar .nav_chapterBox {
    font-size: 14px;
  }
}


@media only screen and (max-width: 1050px) {
  header #nav_chapterBar {
    height: auto;
    z-index:6;
    display: block;
    min-height: 54px;
    flex-wrap: wrap;
  }
  header #nav_chapterBar .hbIcon {
    display: block;
  }
  header #nav_chapterBar .nav_chapterBox {
    margin: 10px 20px 5px !important;
  }
  header .nav_chapterBox:not(.active) {
      display: none;
  }
  body.collapsedOpen .nav_chapterBox {
    display: block;
    position: relative;
  }

  body.collapsedOpen .blck {
    display: block;
  }

}


header #nav_chapterBar div:not(:last-child){
  margin-right: 20px;
}
header #nav_chapterBar .nav_logoBox {
  background-image: url("../image/MI.png");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  width: 178px;
  height: 50px;
  border-right: 1px solid;

}
header #nav_chapterBar .nav_chapterBox {
  margin: 20px;
  /*max-width: 150px;*/
  flex-grow: 0;
  flex-shrink: 0;
}
header #nav_chapterBar .nav_chapterBox.active  .utext{
  border-bottom: 1px solid;
}
header #nav_chapterBar .nav_chapterBox p {
  margin: 0px;
  padding: 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.documentsPage header #nav_chapterBar {
  display: none;
}
header .bar_shadow {
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

.nav_pathTitle h2,
.nav_pathTitle p {
  margin-top: 0px;
}

.navBarIcon {
  /*width: 30px;
  //height: 30px;*/
  background-repeat: no-repeat;
  display: inline-block;
  margin: 0;
  /* position: absolute; */
  /* top: 10px; */
  position: relative;
  vertical-align: middle;
  top: 0px;
  width: 30px;
  height: 30px;
  background-size: contain;
}
.navBarIcon.nav1 {   background-image: url(../image/landscape_blue.svg) }
.navBarIcon.nav2 {   background-image: url(../image/target_guest_blue.svg) }
.navBarIcon.nav3 {   background-image: url(../image/concept_blue.svg) }
.navBarIcon.nav4 {   background-image: url(../image/story_blue.svg) }
.navBarIcon.nav5 {   background-image: url(../image/NS_blue.svg) }
.path2.navBarIcon.nav1 {   background-image: url(../image/landscape_green.svg) }
.path2.navBarIcon.nav2 {   background-image: url(../image/target_guest_green.svg) }
.path2.navBarIcon.nav3 {   background-image: url(../image/concept_green.svg) }
.path2.navBarIcon.nav4 {   background-image: url(../image/story_green.svg) }
.path2.navBarIcon.nav5 {   background-image: url(../image/NS_green.svg) }

@media only screen and (max-width: 1040px) {
  span.navBarIcon {
    display: block;
  }
  .nav_chapterText {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (max-width: 840px) {
  span.utext {
    /* display: none; */
  }
  .nav_chapterText:hover span.utext {
    display: inline-block;
  }
}


@media only screen and (max-width: 600px) {
  #fixed_userBar {
    position: absolute;
  }
  .nav_userBar {
    flex-wrap: wrap;
  }
  .nav_hello,
  .nav_fileName {
    display: none;
  }
  .nav_fileName {
    order: 10;
  }
  .nav_fileName {
    flex-basis: 100%;
  }
}