html,
body {
  --sidebar-width: 250px;
  --sidebar-width-narrow: 50px;
  --header-height: 96px;
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #000000;
  /*   box-shadow: 5px 0 5px rgba(240, 240, 240, .9); */
  overflow-y: scroll;
  transition: width ease-in 300ms;
  z-index: 12;
}

.sidebar .top {
  position: sticky;
  top: 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: calc(var(--header-height));
  box-sizing: border-box;
  background: #000000;
  margin-bottom: 50px;

  /*   border-bottom: 1px solid #ccc; */
  /*   border-right: 1px solid #fff; */
}
.sidebar .web-logo {
  height: 44px;
  width: 172px;
}
.sidebar .web-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.sidebar .brand {
  white-space: nowrap;
  width: 100%;
}

.sidebar .brand span {
  padding-left: 0.5rem;
  transition: opacity ease-in 200ms;
  transition-delay: 150ms;
}

.sidebar .controls {
  margin-left: auto;
  margin-bottom: auto;
}

.sidebar .controls button {
  background: none;
  border: none;
  font-size: 1.05rem;
  cursor: pointer;
  color: #fff;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  transition: opacity ease-in 200ms;
  transition-delay: 150ms;
  margin-bottom: 36px;
}

.sidebar li {
  padding: 0;
  margin: 0;
  padding-left: 20px;
}
.sidebar li .sidebar-item {
  font-size: 12px;
  color: #bfbfbf;
}
.sidebar li:last-child .sidebar-link {
  border-bottom: 0;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar li .sidebar-link {
  display: inline-block;
  width: 100%;
  padding: 10px 0rem;
  text-decoration: none;
  color: #8a8a8a;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #404040;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  visibility: visible;
}
.sidebar li .sidebar-link.active {
  color: #fff !important;
}
.sidebar li .sidebar-link .icon {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

/* pin for medium viewport */
.wrapper {
  background-color: #000;
  padding: 5px;
  min-height: 100vh;
}
.wrapper.sidebar-open .sidebar {
  /* width: 100%; */
  width: 68%;
}

.wrapper.sidebar-open .sidebar .brand {
  text-align: left;
}

.wrapper.sidebar-open .sidebar .brand span {
  display: inline;
}

.wrapper.sidebar-open .sidebar .close {
  display: inline-block;
}

.wrapper .sidebar .pin,
.wrapper .sidebar .close,
.wrapper.sidebar-open .sidebar .pin {
  display: none;
}

.sidebar li .sidebar-link:hover {
  background: #ffffff29;
  transition: 0.3s all ease-in-out;
}

/* header & content */

body > .wrapper > header.dash-header {
  display: flex;
  align-items: center;
  height: var(--header-height);
  /* padding: 1rem; */
  box-sizing: border-box;
  border-radius: 14px 0 0 0;
}

body > .wrapper > header.dash-header button {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  /* margin-bottom: auto; */

  cursor: pointer;
  color: #fff;
}
body > .wrapper > header.dash-header .bars{
    margin: 0 6px;
    margin-right: 10px;
}
main.dashboard-main {
  padding: 20px;
  /* min-height: calc(100vh - var(--header-height)); */
  min-height: calc(100vh - 106px);

  background-color: #fff;
  border-radius: 0 0 14px 14px;
}
.dash-header .navbar {
  background: #fff;
  border-radius: 14px 14px 0 0;
  margin-top: 5px;
  border-bottom: 1px solid #cccccc;
  padding: 14px 0;
  padding-left: 20px;
}
.dash-header .navbar-brand {
  font-size: 32px;
  font-weight: 700;
}
.dash-header .navbar-brand span {
  color: #8a8a8a;
  font-size: 14px;
  display: block;
  font-weight: 400;
}
.header-search-input {
  border: 1px solid #cccccc;
  border-radius: 50px;
  width: 336px;
  overflow: hidden;
  padding: 6px 15px;
}
.header-search-input .input-group-text {
  border: none;
  background-color: transparent;
  padding-left: 0px;
}
.header-search-input .form-control {
  background-color: transparent;
  border: none;
  font-size: 14px;
  padding-left: 0;
}
.notify-btn {
  height: 49px;
  width: 49px;
  border: 1px solid #cccccc;
  padding: 10px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.notify-btn img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.user-dropdown .dropdown-toggle {
  background-color: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 50px;
  font-size: 14px;
  padding: 5px;

}
.user-dropdown .dropdown-menu {
  font-size: 14px;
  min-width: 97px;
  border-radius: 10px;
}
.user-dropdown .dropdown-item.active,
.user-dropdown .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #ddad67;
}
.navbar-nav .user-dropdown .dropdown-toggle {
  padding: 5px;
}
.user-dropdown .user-img {
  height: 38px;
  width: 38px;
  border-radius: 50px;
  overflow: hidden;
}
.user-dropdown .user-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.user-dropdown .dropdown-toggle::after {
  border: none;
  background-image: url("../images/icons/dropdown-white.svg");
  width: 12px;
  height: 9px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0;
  margin-right: 5px;
}

/* small */
@media (min-width: 567px) {
  .wrapper.sidebar-open .sidebar {
    width: var(--sidebar-width);
  }
}

/* medium */
@media (min-width: 768px) {
  .sidebar {
    width: calc(var(--sidebar-width-narrow));
    overflow-x: hidden;
  }

  .sidebar .brand {
    text-align: center;
  }

  /* .sidebar .brand span,
    .sidebar ul {
      visibility: hidden;
      opacity: 0;
    } */

  .sidebar .top {
    margin-bottom: 0px;
  }

  .sidebar ul {
    margin-bottom: 20px;
  }

  .sidebar .web-logo {
    height: 44px;
    width: 134px;
  }
  .wrapper > :not(:first-child) {
    /* everything but the sidebar */
    margin-left: var(--sidebar-width-narrow);
  }

  .wrapper.sidebar-open .sidebar {
    background: transparent;
  }

  .wrapper.sidebar-open > :not(:first-child) {
    /* everything but the sidebar */
    margin-left: var(--sidebar-width);
  }

  body > .wrapper > header button {
    display: none;
  }

  /* hover for medium viewport */

  .sidebar:hover {
    width: var(--sidebar-width);
  }

  .sidebar:hover .brand {
    text-align: left;
  }

  .sidebar .brand > div:first-child {
    position: relative;
  }

  .sidebar .brand > div:first-child span {
    /* remove from flow to make positioning the icon easier */
    position: absolute;
  }

  .wrapper:not(.sidebar-open) .sidebar:hover .pin {
    display: inline-block;
  }

  .wrapper.sidebar-open .sidebar .brand span,
  .sidebar:hover .brand span,
  .sidebar:hover ul,
  .wrapper.sidebar-open .sidebar ul {
    visibility: visible;
    opacity: 1;
  }
  .sidebar-link {
    visibility: hidden;
  }
}

/* large */
@media (min-width: 992px) {
  .sidebar .brand {
    text-align: left;
  }
  .sidebar .top {
    padding-left: 18px;
  }
  .sidebar .top .controls {
    visibility: hidden;
  }

  .sidebar {
    width: var(--sidebar-width);
  }

  .sidebar .brand span,
  .sidebar ul,
  .wrapper .sidebar ul {
    visibility: visible;
    opacity: 1;
  }

  .wrapper > :not(:first-child) {
    margin-left: var(--sidebar-width);
  }
}

@media (max-width: 1400px) {
  html,
  body {
    --sidebar-width: 212px;
  }
  .dash-header .navbar {
    padding-left: 10px;
  }
}
@media (max-width: 1200px) {
  .header-search-input {
    width: 290px;
  }
  .dash-header .navbar {
    padding: 5px 0;
  }
  html,
  body {
    --sidebar-width: 210px;
  }

}
@media (max-width: 991.5px) {
  .sidebar li .sidebar-link {
    font-size: 0;
  }
  .wrapper.sidebar-open .sidebar .sidebar-link {
    font-size: 14px;
  }
  .sidebar:hover .sidebar-link {
    font-size: 14px;
  }
  .sidebar-item {
    display: none;
  }
  .sidebar li {
    padding-left: 10px;
  }
  html,
  body {
    --header-height: 80px;
  }
  .dash-header .navbar-brand {
    font-size: 22px;
  }
  .sidebar li {
    padding-left: 10px;
  }
  .header-search-input {
    width: 226px;
}
.sidebar li .sidebar-link .icon {

    margin-left: 6px;}
/* .dash-header .navbar-collapse {
    flex-basis: auto;
  }
  .dash-header  .navbar-nav {
    flex-direction: row;
    justify-content: end;
  } */
}
@media (max-width: 767px) {
    html, body {
        --header-height: 78px;
    }
    .nav-innerheader .navbar-collapse{
        position: absolute;
        top: 72px;
        background:#fff;
        width: 100%;
        left: 0px;
        padding: 12px;
        box-shadow: rgb(148 148 148) -1px 3px 5px;
        border-radius: 0px 0px 10px 10px;
        z-index: 2;
    }
   .nav-innerheader .navbar-nav{
        flex-direction: row;
    }
    .user-dropdown .user-img {
        height: 30px;
        width: 30px;
    }
    .navbar-toggler-icon {
        height: 22px;
        width: 22px;
        margin-left: 5px;
    }
        .user-dropdown .dropdown-toggle::after {
            width: 10px;
            height: 7px;
            margin-right: 2px;}
            .dash-header .navbar {
                padding-left: 0px;
            }
            .user-dropdown .dropdown-toggle {
              
                gap: 5px}
                .dash-header .navbar-brand {
                    font-size: 20px;
                    margin-right: 8px;
                }
                .notify-btn {
                    height: 40px;
                    width: 40px;
                    border: 1px solid #cccccc;
                    padding: 8px;
                    border-radius: 50px;
                    display: flex;
                 
                }
                .wrapper.sidebar-open .sidebar {
               
                    width: 219px;
                }
                .sidebar ul {
                    
                    margin-bottom: 18px;
                }
                .sidebar .top {
                    margin-bottom: 10px;
                }
                .sidebar .web-logo {
                    height: 40px;
                    width: 150px;
                }
}