.notification-text-top {
  font-size: 14px;
}
.noti-icon{
  width:28px;
  height:28px;
}
.notification-toggleButton {
  background-color: var(--grey-input-datefiltr);
  border: 2px solid var(--grey-input-datefiltr);
  font: 13px/15px Roboto;
  min-width: 11px;
  /* margin-left: 19px; */
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 4px;
  -webkit-appearance: none;
  outline:none!important;

}
.notification-toggleButton:focus{
  box-shadow: none!important;
}
.addBackground {
  border-color: var(--link-color);
  background-color: var(--link-color);
  outline:none!important;

}
.notification-menu  span.dropdown-item,
.notification-menu > form > span.dropdown-item {
  padding: 10px 15px !important;
  white-space: nowrap;
  line-height: 20px !important;
  font-size: 14px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.notification-menu {
  /* overflow-y: auto; */
  max-height: 382px;
  z-index: 999999;
  left: auto;
  right: -69px;
  min-width: 374px;
  min-height: 382px;
  margin-top:4px;
}
.notification-menu:before {
    content: "";
    border-bottom: 10px solid white;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 92px;
    /* left: auto!important; */
    margin: auto !important;
    z-index: 10;
}
.notification-menu:after {
    content: "";
    border-bottom: 12px solid var(--header-shadow-color);
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    position: absolute;
    top: -12px;
    right: 90px;
    /* left: auto!important; */
    margin: auto !important;
    z-index: 9;
}
.notification-menu span.inside-dropdown {
  padding: 0px !important;
  font-size: 24px !important;
  color: var(--breadcrumb-text-color);
  cursor:pointer
}
.notification-menu .menu-header {
  padding: 8px 15px;
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  min-width: 180px;
  align-self: baseline;
  color:var(--tile-title-color);
}
.inside-menu {
  position: absolute;
  background: white;
  box-shadow: 1px 2px 2px var(--category-secondary-color);
  right: 10px;
  z-index: 9;
}

.font-size-paras {
  font-size: 14px;
}

.active-text {
  font-weight: bold !important;
}

.normal-text {
  font-weight: normal;
}
.active-noti {
  background-color: var(--notification-bg) !important;
  
}
.notification-menu > form > span.dropdown-item:focus,
.notification-menu > form > span.dropdown-item:hover {
  color: var(--tile-title-color)!important;
  text-decoration: none;
  background-color: var(--notification-bg)!important;
  cursor: pointer;
}
.notification-menu .menu-item-name {
  max-width: 300px;
  min-width: 300px;
  font-weight:normal!important;
  font-size:13px!important;
}
.view-all-noti span {
  font-size: 14px!important;
  text-align: center;
  line-height:25px!important;
  display: block;
    width: 100%;
    padding: 0.3rem 1.8rem 0.3rem 1rem !important;
    white-space: nowrap;
    line-height: 20px !important;
    font-size: 14px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    cursor:pointer;
}

.view-all-noti {
  position: absolute;
  bottom:0;
  width:100%;
  cursor:pointer;
}
.view-all-noti span:hover {
  background-color: var(--light-color-text) !important;
  color:var(--tile-title-color)!important
}
.notification-text-top:hover{
  cursor:pointer;
}
.list-group-item{
  display:inline-block!important;
}
.notification-menu:before{
  right: 68px!important;
}
.notification-menu:after{
  right: 66px!important;
}
.notification-menu.seller-noti:before{
  right: 123px!important;
}
.notification-menu.seller-noti:after{
  right: 121px!important;
}
@media screen and (min-width: 561px) and (max-width: 767px) {
  .notification-menu {
    right: -50px;
    margin-top: 10px;
  }
  .notification-menu:before {
    right: 51px !important;
  }

  .notification-menu:after {
    right: 49px !important;
  }
  .notification-menu.seller-noti:before{
    right: 32px!important;
  }
  .notification-menu.seller-noti:after{
    right: 30px!important;
  }
}
@media screen and (min-width: 321px) and (max-width: 560px) {
  .notification-menu {
    max-width: 340px !important;
    min-width: 340px !important;
    right: -50px!important;
    margin-top: 12px;
  }
  .notification-menu .menu-item-name {
    max-width: 270px;
    min-width: 270px;
  }
  .notification-menu:before {
    right: 52px!important;
  }
  .with-arrow .dropdown-menu {
    border: 1px solid var(--header-shadow-color);
  }

  .notification-menu:after {
    right: 50px !important;
  }
  .notification-menu.seller-noti:before{
    right: 42px!important;
  }
  .notification-menu.seller-noti:after{
    right: 40px!important;
  }
}
@media screen and (max-width: 320px) {
  .notification-menu {
    max-width: 260px !important;
    min-width: 260px !important;
    right: 0;
  }
  .notification-menu:before {
    right: 16% !important;
  }
  .notification-menu:after {
    right: 15% !important;
  }
  .menu-item-name {
    max-width: 140px !important;
    min-width: 140px !important;
  }
  .notification-menu.seller-noti:before{
    right: 32px!important;
  }
  .notification-menu.seller-noti:after{
    right: 30px!important;
  }
}
@media screen and (min-width:768px) and (max-width:992px){
  .notification-menu:before {
    right: 68px !important;
  }
  .notification-menu:after {
    right: 66px !important;
  }
  .notification-menu.seller-noti:before{
    right: 119px!important;
  }
  .notification-menu.seller-noti:after{
    right: 117px!important;
  }
}