@charset "UTF-8";

.div-header {
  position: fixed;
  left: 250px;
  display: none;
  align-items: center;
  width: calc(100% - 250px);
  height: 40px;
  border-bottom: 1px solid #e3e3e3;
}

.div-header.active {
  display: flex;
  background-color: #3386bc;
}

.div-header > div {
  display: flex;
  align-items: center;
}
.div-header > div.left-nav-btn {
  display: none;
  width: 50px;
  height: 100%;
  border-right: 1px solid #e3e3e3;
}
.div-header > div.left-nav-btn span {
  display: block;
  width: 24px;
  height: 24px;
  background: url("/image/icon/menu-burger.png");
  background-size: 24px;
}
.div-header > div.bread-crumbs {
  flex-grow: 1;
  color: white;
  margin-left: 20px;
}
.div-header > div.bread-crumbs .minimize-icon {
  display: block;
  width: 15px;
  height: 15px;
  background: url("/image/icon/free-icon-minimize.png") no-repeat;
  background-size: 15px;
  margin-right: 10px;
}
.div-header > div.user-info {
  justify-content: flex-end;
  width: 200px;
  margin-right: 20px;
}
.div-header > div.user-info .drop-down-btn {
  display: block;
  width: 15px;
  height: 15px;
  background: url("/image/icon/black-angle-down-free-icon-font.png") no-repeat;
  background-size: 15px;
  margin-left: 10px;
}

.background-cover {
  display: none;
}

.background-cover.show {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: block;
  background: rgba(0, 0, 0, 0.5);
}

.change-pass {
  display: none;
}

.user-status.active .change-pass {
  display: flex;
  margin: 5px 8px;
}

.user-status.active .logout {
  display: flex;
  margin: 5px 8px;
}

.change-pass-popup {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 400px;
  max-width: 600px;
  background-color: white;
  border-radius: 8px;
  z-index: 51;
}

.change-pass-popup.show {
  display: block !important;
}

.change-pass-popup .pass-header {
  background-color: rgba(0, 104, 171, 0.8);
  padding: 1% 3%;
  color: white;
  border-radius: 7px 7px 0px 0px;
}

.change-pass-popup .pass-boddy {
  text-align: center;
}

.change-pass-popup .pass-boddy div {
  margin: 0px auto;
}

.pass-form {
  width: 60%;
  margin: 14px auto !important;
  text-align: left;
}

.pass-form input {
  width: 100%;
  height: 30px;
  padding: 3px 7px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  font-size: 0.8rem;
  color: #555;
  outline: none;
}

.pass-footer {
  text-align: center;
}

.pass-footer button {
  width: 33%;
  max-width: 115px;
  height: 35px;
  font-size: 1.2em;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  min-width: 76px;
  min-height: 24px;
}

.new-pass-msg,
.new-pass-check-msg {
  font-size: 12px;
}

.change-pass-btn {
  background-color: #7ab2e1;
  color: #ffffff;
}

.change-pass-exit {
  background-color: #f5bf7f;
  color: #ffffff;
}

.icon-user {
  background-image: url("/image/icon/user-icon.png");
  display: block;
  width: 27px;
  height: 27px;
  background-size: 27px 27px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 3px;
}

.icon-pass {
  background-image: url(/image/icon/pass.png);
  display: block;
  width: 27px;
  height: 27px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 3px;
}

.icon-logout {
  background-image: url(/image/icon/logout.png);
  display: block;
  width: 27px;
  height: 27px;
  background-size: 22px 22px;
  margin-left: 4px;
  margin-top: 4px;
  background-repeat: no-repeat;
  margin-right: 3px;
}

@media (max-width: 765px) {
  .div-header {
    left: 0;
    width: 100%;
  }
  .div-header > div.left-nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .div-header > div.bread-crumbs {
    justify-content: center;
    font-weight: bold;
    margin-left: 0;
  }
  .div-header > div.bread-crumbs .minimize-icon {
    display: none;
  }
  .div-header > div.user-info {
    justify-content: center;
    width: 50px;
    height: 100%;
    border-left: 1px solid #e3e3e3;
    margin-right: 0;
  }
  .div-header > div.user-info .user-name {
    display: none;
  }

  .div-header > div.user-info .user-status.active .user-name {
    display: block;
  }

  .div-header > div.user-info .drop-down-btn {
    width: 24px;
    height: 24px;
    background: url("/image/icon/menu-dots-vertical.png");
    background-size: 24px;
    margin-left: 0;
  }

  .pass-form {
    width: 85%;
  }
}