.all-topbar {
    background: #3b2f22;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
    width: 100%;
    position: relative;
    display: inline-flex;
    color: #fff;
    padding: 10px 15px;
  }

    .navbar-collapse.collapsing {
        left: -75%;
        transition: width 0s ease;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 300ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 500ms ease-in-out;
    }


/* account-bar */
/* Dropdown Button */
.accbar-dropbtn {
  background-color: #fff;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15.499' height='15.499' viewBox='0 0 15.499 15.499'%3E%3Cpath id='solid_user-circle' data-name='solid user-circle' d='M7.75,8a7.75,7.75,0,1,0,7.75,7.75A7.748,7.748,0,0,0,7.75,8Zm0,3A2.75,2.75,0,1,1,5,13.75,2.75,2.75,0,0,1,7.75,11Zm0,10.749a5.988,5.988,0,0,1-4.578-2.131A3.484,3.484,0,0,1,6.25,17.75a.765.765,0,0,1,.222.034A4.137,4.137,0,0,0,7.75,18a4.122,4.122,0,0,0,1.278-.216.765.765,0,0,1,.222-.034,3.484,3.484,0,0,1,3.078,1.869A5.988,5.988,0,0,1,7.75,21.749Z' transform='translate(0 -8)'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position-x: calc(0% + 16px);
  background-position-y: 50%;
  color: #3b2f22;
  padding: 8px 18px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  /* position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0%, -50%);
  z-index: 99999; */
  transition:  all .2ms;
}

/* Dropdown button on hover & focus */
.accbar-dropbtn:hover, .accbar-dropbtn:focus {
  background-color: #f1f1f1;
}

/* The container <div> - needed to position the dropdown content */
.accbar {
  position: relative;
  top: 0;
  right: 0;
}

.accbar-menu-row {
    display: inline-flex;
    margin: 0px 25px 0px 25px;
    width: 100%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 20px;
  top:50px;
  border-radius: 4px;
  padding: 12px 0px;
  overflow: hidden;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  padding: 8px 0px;
  font-weight: 400;
  color: #212529;
  text-align: left;
  font-size: 1rem;
}

.dropdown-content a.log-out {
  color: black;
  text-decoration: none;
  display: block;
  padding: 8px 0px;
  font-weight: 400;
  color: #212529;
  text-align: left;
  font-size: 1rem;
  margin-top: 20px;
}

.dropdown-content p {
  color: black;
  text-decoration: none;
  display: block;
  font-size: 0.875rem;
  color: #6c757d;
  padding: .5rem 0rem .8rem 0rem;
  text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd
  }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
/* .show {display:contents;} */
/* end */



@media (max-width: 700px) {
  .accbar {
      width: 100%;
      text-align: right;
  }

  .accbar-dropbtn {
      font-size: 0;
      width: 30px;
      height: 30px;
      background-position-x: 50%;
      position: relative;
      top: 0;
      right: 0;
      transform: none;
      margin: 10px 15px;
      background-color: #3b2f22;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath id='solid_user-circle' data-name='solid user-circle' d='M12.5,8A12.5,12.5,0,1,0,25,20.5,12.5,12.5,0,0,0,12.5,8Zm0,4.839a4.435,4.435,0,1,1-4.435,4.435A4.436,4.436,0,0,1,12.5,12.839Zm0,17.339A9.659,9.659,0,0,1,5.116,26.74a5.62,5.62,0,0,1,4.965-3.014,1.233,1.233,0,0,1,.358.055,6.674,6.674,0,0,0,2.061.348,6.648,6.648,0,0,0,2.061-.348,1.233,1.233,0,0,1,.358-.055,5.62,5.62,0,0,1,4.965,3.014A9.659,9.659,0,0,1,12.5,30.177Z' transform='translate(0 -8)' fill='%23fff'/%3E%3C/svg%3E ");
      background-repeat: no-repeat;
      border-radius: 4px;
      padding: 0px;
  }

  .accbar-dropbtn:hover, .accbar-dropbtn:focus {
    background-color: #000;
  }

  .dropdown-content {
      top: 60;
      width: 98%;
      right:1%
  }

  .dropdown-content p.username {
      padding: .5rem 0rem 0rem 0rem;
    }

  .dropdown-content p {
      padding: 0rem 0rem .8rem 0rem;
  }
  .all-topbar-1 {
    width: 0%;
  }
  .all-topbar-2 {
    width: 50%;
    text-align: left;
  }
  .all-topbar-3 {
    width: 50%;
  }
  .all-topbar-cominfo{
    display: none;
  }
  .all-topbar-title {
    padding: 10px 0px 10px 15px;
  }
}

.btn-notification {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.124' height='14.998' viewBox='0 0 13.124 14.998'%3E%3Cpath id='solid_bell' data-name='solid bell' d='M6.561,15a1.874,1.874,0,0,0,1.874-1.875H4.687A1.874,1.874,0,0,0,6.561,15Zm6.31-4.386C12.3,10,11.246,9.09,11.246,6.093A4.626,4.626,0,0,0,7.5,1.548V.937a.937.937,0,1,0-1.874,0v.61A4.626,4.626,0,0,0,1.876,6.093c0,3-1.059,3.912-1.625,4.52A.915.915,0,0,0,0,11.249a.938.938,0,0,0,.94.937H12.183a.938.938,0,0,0,.94-.937A.915.915,0,0,0,12.871,10.613Z' transform='translate(0.001)' fill='%233b2f22'/%3E%3C/svg%3E%0A");
  background-position-x: 50%;
  background-position-y: 50%;
  background-repeat: no-repeat;
}