.centered-dropdown{
    left: 50% !important;
    transform: translateX(-70%);
    max-height: 700px;
    overflow-y: auto;
    overflow-x: hidden;
}

#notification-list{
    background-color: #ffffff;
    width: 400px;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}
.notificationheader{
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: 600;
}
#notification-list li .notificationitem span{
    color:black;
    font-size: 12px;
    word-wrap: break-word;
    margin: 0;
    word-break: break-word;
    white-space: normal;
}
#notification-list li .notificationitem div p{
    word-wrap: break-word;
    margin: 0;
    word-break: break-word;
    white-space: normal;
    font-size: 1rem;
}
.notificationitems{
    margin: 10px;
}
.notificationitems a { 
    display: block;
    padding: 10px;
    margin-top: 5px; 
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    border: solid 2px #e9ecef;
    background-color: #ffffff;
    transition: background-color 0.3s, border-color 0.3s;
    color: black !important;
    word-wrap: break-word;
    margin: 0;
    word-break: break-word;
    white-space: normal !important;
  } 
  .notificationitems a:hover { 
    background-color: #e9ecef !important;
  }
  .notificationContent{
    display:flex;
    padding:5px;
  }

  .notificationitem{
    padding:3px 10px !important;
  }
  .notificationIcon{
    text-align: left;
    min-height: 60px;
  }
  .notificationIcon i{
    border: solid 1px #e9ecef;
    background-color: #e9ecef;
    border-radius: 50%;
    padding: 10px; 
    font-size: 15px;
  }

 
  .notificationbody{ 
    width: 70%;
    padding: 0px 10px;

  }
  .notificationfrom{
    font-size: 13px !important;
    color: #65686c!important;
    font-weight: 500;
  }
  .notificationtime{
     color: #65686c!important;
     font-size:13px;
     text-align: right;
     width: 30%;
  }

  .highimportance-pill{
   display: inline-block;
  background-color: #ffe5e5;
  color: #b00020;
  font-size: 12px !important;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
  margin-bottom: 4px;
  }
  .text-danger {
  color: rgb(220, 53, 69);
}

.highimportance-separator{
  margin:0px 10px;
      border: none;
    border-top: 3px solid #808080c2;
}
#noNotifications span .fa.fa-bell{
  font-size:40px;
   color: #65686c;

}
.notificationitems  .message-bubble-unread{
  background-color: unset;
  border-radius: unset;
  border: unset;
  padding:unset;
  box-shadow: unset;
  word-break: unset;
  transition: unset;

}
@media only screen and (min-width: 1200px){
 #notification-bell-container{
    list-style: none;
    font-size:20px; 
 }
}

@media only screen and (max-width: 1023px) {
  #notification-bell-container{
    max-width: 100%;
  }
  h1.siteTitle.custom-sitetitle{
    font-size: 21px !important;
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait)
{ 
  .badge.notificationbadge{
    right: unset;
        left: 20px !important;
  }
  #notification-bell-container{
    max-width: 100%;
  }
  #notification-list{
   margin-left: -100px;
   width: 550px;
  }
}

@media only screen and (max-width: 933px) and (orientation: landscape)
{ 
  .badge.notificationbadge{
    right: unset;
        left: 20px !important;
  }
  #notification-bell-container{
    max-width: 100%;
  }
  #notification-list{
    margin-left: 290px;
  }
  #deflectionKBResultsLabel,#deflectionKBResultsPagination, #deflectionResultsLabel{
    padding-left: 1rem;
  }
  #deflectionKBResults{
    max-width: 660px;
  }
 
}
@media only screen and (min-width: 932px) and (orientation: landscape)
{ 
 #notificationContainer{
    transform:unset !important;
  }
}
@media only screen and (max-width: 740px) { 
 #deflectionKBResultsLabel, #deflectionKBResultsPagination, #deflectionResultsLabel{
    padding-left: unset;
  }
}
@media only screen and (max-width: 600px) { 
  #notification-list{
    width: 350px;
    margin-left: 270px !important;
}

  .badge.notificationbadge{
  right: 372px !important;
  }
/* .nav-link.dropdown-toggle.show .notificationbadge{
  right: 586px !important; 
} */
 }
 @media only screen and (max-width: 391px) { 
  #notification-bell-container > #notification-list{
    width: 350px;
    /* margin-left: 250px !important; */
}

  .badge.notificationbadge{
  right: 333px !important;
  } 
 }
 @media only screen and (max-width: 376px) {
   h1.siteTitle.custom-sitetitle{
    font-size: 20px !important;
  }
   /* #notification-bell-container > #notification-list{
    margin-left: 245px !important;
  } */
      .badge.notificationbadge {
        right: 320px !important;
    }
 }
@media only screen and (max-width: 360px) {
   #notification-bell-container > #notification-list{
      width: 330px;
      /* margin-left: 235px !important; */
} 
   .badge.notificationbadge{
    right: unset;
        left: 15px !important;
  }
   h1.siteTitle.custom-sitetitle{
    font-size: 19px !important;
  }
}
.navbar-brand.navbar-header > div > div > a:hover{
  text-decoration: none;
}
ul.breadcrumb {
  font-family: 'Roboto';
  font-size: 14px;
}

.breadcrump-item.active {
  font-family: 'Roboto';
  font-size: 14px;
}

div.navbar-brand.navbar-header > div > div > a:hover{
  text-decoration: none !important;
}
/* Tablet Header and Notification Bell*/
@media only screen and (max-width: 1200px){
   .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
  } 
   .navbar-dark .navbar-toggler:hover,.navbar-toggler,.navbar-dark .navbar-toggler:focus{
    background-color: unset;
    border-color: unset;
    border: unset !important;
  } 
   button.navbar-toggler.collapsed.custom-navbar-toggler {
    background-color: unset;
    border-color: unset;
    border: unset !important;
}
.navbar-dark .navbar-toggler:hover{
  background-color:unset;
}
.navbar-toggler{
  background-color:unset !important;
}
}
@media only screen and (max-width: 1180px) {
  #notification-bell-container{
    list-style: none;
    position: absolute;
    right: 195px;
    top: 15px;
    font-size: 2rem; 
  }
  .badge.notificationbadge{
    right: -10px;
  }
  .navbar-dark .navbar-toggler:hover,.navbar-toggler,.navbar-dark .navbar-toggler:focus{
    background-color: unset;
    border-color: unset;
    border: unset !important;
  } 
  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
  } 
}
@media only screen and (max-width: 1024px) {
  #notification-bell-container{
    list-style: none;
    position: absolute;
    right: 115px;
    top: 15px;
    font-size: 2rem; 
  } 
  .navbar-dark .navbar-toggler:hover,.navbar-toggler,.navbar-dark .navbar-toggler:focus{
    background-color: unset;
    border-color: unset;
    border: unset !important;
  } 
  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
  } 
}
 
/* Mobile Header and Notification Bell*/  
@media only screen and (max-width: 932px) and (orientation: landscape){
  .navbar-dark .navbar-toggler:hover,.navbar-toggler,.navbar-dark .navbar-toggler:focus{
    background-color: unset;
    border-color: unset;
    border: unset !important;
  } 
   .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
  } 
  #notification-bell-container{
    right: 190px;
  }
  #notification-list {
      margin-left: -90px;
  }
  button.navbar-toggler.collapsed.custom-navbar-toggler {
    background-color: unset;
    border-color: unset;
    border: unset !important;
}
.navbar-dark .navbar-toggler:hover{
  background-color:unset !important;
}
}

@media only screen and (max-width: 820px) {
  .navbar-dark .navbar-toggler:hover,.navbar-toggler,.navbar-dark .navbar-toggler:focus{
    background-color: unset;
    border-color: unset;
    border: unset !important;
  } 
  button.navbar-toggler.collapsed.custom-navbar-toggler {
    background-color: unset;
    border-color: unset;
    border: unset !important;
}
  #notification-bell-container{
    right: 130px;
  }
  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
  } 
}
@media only screen and (max-width: 768px) {
  #notification-bell-container{
    list-style: none;
    position: absolute;
    right: 60px;
    top: 20px;
    font-size: 1.5rem;
  } 
  .navbar > .custom-container, .navbar-header { 
    padding: unset;
  }
  #navbar > nav {
    padding: 0px 10px;
  }
  button.navbar-toggler.custom-navbar-toggler{
    margin: 10px 0px 0px 0px; 
  }
  .navbar-dark .navbar-toggler:hover,.navbar-toggler,.navbar-dark .navbar-toggler:focus{
    background-color: unset !important;
    border-color: unset;
    border: unset !important;
  } 
  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
  } 
  #notification-list{
    margin-left: -50px !important;
  }
  .badge.notificationbadge {
    right: -12px !important;
  }
  .footer{
    z-index: -1;
  }
}
@media only screen and (max-width: 768px)and (orientation: landscape){ 
#notification-bell-container{
  right: 80px;
}
}
@media only screen and (max-width: 740px) and (orientation: landscape){
  #notification-bell-container {
    right: 160px;
  }
  .badge.notificationbadge{
    left: 15px !important;
  }
  #notification-list{
    margin-left: -75px;
  }
}