.navigation-container {
  position: absolute;
  top: 0;
  z-index: 2;
  background-color: #f7f7f7;
}

.nav-search,
.nav-search:active,
.nav-search:focus,
.nav-search:hover {
  background-color: #dfdfdf;
  height: 45.8px;
  width: 250px;
  border: 2px solid #dfdfdf;
  border-radius: 14px;
  border-right: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: none;
}
.nav-search-btn,
.nav-search-btn:active,
.nav-search-btn:focus,
.nav-search-btn:hover {
  height: 45.8px;
  background-color: #dfdfdf;
  border-radius: 14px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.acs-btn-kudos {
  background-color: #ffebeb;
  color: #ff5039;
  border: 2px solid #ffebeb;
}
.acs-btn-kudos:hover,
.acs-btn-kudos:focus {
  background-color: #fff;
  color: #ff5039;
  border: 2px solid #ff5039;
}

.acs-btn-lightbulb {
  background-color: #fffce1;
  color: #ffbb00;
  border: 2px solid #fffce1;
}
.acs-btn-lightbulb:hover,
.acs-btn-lightbulb:focus {
  background-color: #fff;
  color: #ffbb00;
  border: 2px solid #ffbb00;
}

#acs-notification-icon {
  padding: 7.5px;
  background-color: #ff2323;
  position: absolute;
  border-radius: 999px;
  top: 20px;
  right: 35px;
}

.navigation-sidebar {
  position: fixed;
  height: 100vh;
  width: 250px;
  background-color: #ffffff;
  z-index: 4;
  overflow-y: auto;
  overflow-x: hidden;
}
.left-sidebar {
  left: 0;
}
.right-sidebar {
  right: 0;
  padding-top: 10px;
}

.navigation-sidebar > .container-flex > .row {
  color: #000000;
  text-decoration: none;
}

#notifications-handler-empty > .col-12 {
  text-align: center;
}
#notifications-handler-empty > .col-12 > .material-symbols-outlined {
  font-size: 50px;
}

.directory-listing > a {
  color: #000000;
  text-decoration: none;
}

.header_container {
  padding-left: 260px;
}

.navigation-container {
  width: calc(100vw - 260px);
}

#desktop-sidebar-close-directory {
  position: fixed;
  z-index: 5;
  top: 15px;
  left: 550px;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
#desktop-sidebar-close-rightmenu {
  position: fixed;
  z-index: 5;
  top: 15px;
  right: 230px;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.z-index-1 {
  z-index: 1 !important;
}

/* breakpoint md */
@media screen and (min-width: 767px) {
  .content_container {
    padding-left: 395px;
    padding-top: 100px;
    padding-right: 150px;
  }
  #sidebar-directory {
    left: 250px;
    width: 260px;
  }
  #sidebar-navigation {
    z-index: 5;
  }
  .right-sidebar {
    z-index: 4;
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
  }
  #sidebar-directory {
    width: 300px !important;
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
  }
  #content-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.215); /* Adjust the transparency here */
    z-index: 4; /* Ensures it covers everything */
  }
}
@media screen and (max-width: 767px) {
  .navigation-container {
    width: 100vw;
    left: 0;
    z-index: 10;
  }
  .navigation-sidebar {
    width: 100%;
    padding-top: 183px;
  }

  .content_container {
    padding-top: 183px;
  }

  .text-md-center {
    text-align: center;
  }
  .content_container {
    padding-left: 20px !important;
    padding-right: 20px;
  }
}

/* breakpoint xxl */
@media screen and (min-width: 1399px) {
}
@media screen and (max-width: 1399px) {
}

/* breakpoint xxxl */
@media screen and (min-width: 1599px) {
}
@media screen and (max-width: 1599px) {
  .content_container {
    padding-left: 270px;
    padding-right: 20px;
  }
}

.user-image {
  height: 41px;
  border-radius: 999px;
  border: 2px solid #dfdfdf;
}