/****************************
notifications
****************************/
.notifications-btn{
    position: relative;
}
.notifications-btn .nav-pills .nav-link.active,
.notifications-btn .nav-pills .show > .nav-link{
  background-color: #17A2B8;
}
.notifications-btn .dropdown-menu{
  top: 35px;
  right: -13px;
  left: unset;
  width: 390px;
  box-shadow: 0px 5px 7px -1px #c1c1c1;
  padding-bottom: 0px;
  padding: 0px;
}
.notifications-btn .dropdown-menu:before{
  content: "";
  position: absolute;
  top: -20px;
  right: 12px;
  border:10px solid #343A40;
  border-color: transparent transparent #343A40 transparent;
}
.notifications-btn .dropdown-menu.rtl{direction: rtl;text-align: right;left: -13px;right: unset;}
.notifications-btn .dropdown-menu.rtl:before{
    right: unset;
    left: 11px;
}
.notifications-btn .notification-head{
  padding:5px 15px;
  border-radius: 3px 3px 0px 0px;
}
.notifications-btn .notification-footer{
  padding:5px 15px;
  border-radius: 0px 0px 3px 3px;
  display: none;
}
.notifications-btn .notification-list{background: #fff;}
.notifications-btn .rtl .notification-list{direction: rtl;text-align: right;}
.notifications-btn .notification-list li:nth-child(even) {
	background-color: #f5f5f5;
	padding: 10px 0px;
}
.notifications-btn .notification-item{
  padding: 10px 0px;
  position: relative;
  cursor: pointer;
  border-radius: 0px 0px 3px 3px;
}
.notifications-btn .notification-item:hover{background-color: #eee !important;}
.notifications-btn .notification-item + .notification-item{
    border-top: 1px #e8e8e8 solid;
}
.notifications-btn .notification-icon{flex: unset;position: relative;min-height: 15px;width: 50px !important;min-width: unset;padding: 0;height: 100%;}
.notifications-btn .notification-icon i{position: absolute;font-size: 30px;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #000;}
.notifications-btn .notification-icon i:before{
}
.notifications-btn .notification-icon + * {
    width: unset;
    max-width: unset;
    flex: unset;
    flex-grow: 1;
    padding: 0 3px;
    padding-right: 30px;
}
.notifications-btn .rtl .notification-icon + * {padding: 0 3px; padding-left:30px;}
.notifications-btn .rtl .notification-icon{
    float: right;
}
.notifications-btn .rtl .notification-icon i{
    /* left: unset; */
}
.notifications-btn .notification-type{color: #de0101 !important;}
.notifications-btn .notification-time{color: #d99000 !important;padding: 0 5px;}
.notifications-btn .notification-text{
}
.notifications-btn .notification-counter{position: absolute !important;right: 10px;top: 50% !important;background: #de0101;/* padding: 1px 5px; */border-radius: 40px;font-size: 11px;font-family: tahoma;font-weight: bold;color: #fff;text-align: center;min-width: 20px;min-height: 20px;line-height: 19px !important;transform: translateY(-50%);}
.rtl .notification-counter{
    right: unset;
    left: 10px;
}
.text-light {
    color: #f8f9fa!important;
}
.bg-dark {
    background-color: #343a40!important;
}
@media (max-width: 640px) {
    .notifications-btn .dropdown-menu{
      top: 32px;
      /* left: -16px; */
      width: 332px;
    } 
    .notifications-btn .nav{
      display: block;
    }
    .notifications-btn .nav .nav-item,.nav .nav-item a{
      padding-left: 0px;
    }
    .notifications-btn .message{
      font-size: 13px;
    }
}

@media (max-width:768px){
  .notifications-btn .notification-head .close-notifications{
      position: absolute;
      width: 26px;
      height: 26px;
      background: #ff000038;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
  }
  .notifications-btn .notification-head .close-notifications:before,
  .notifications-btn .notification-head .close-notifications:after{
    content:"";
    width: 60%;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .notifications-btn .notification-head .close-notifications:before{
      transform: translate(-50%,-50%) rotate(-45deg);
  }
  .notifications-btn .notification-head .close-notifications:after{}
  .notifications-btn .rtl .notification-head .close-notifications{
    right: unset;
    left: 0;
}

}