/*------------notification css start------------*/

.header__notification .bell-icon {
  position: relative;
  cursor: pointer;
}
.header__notification .bell-icon:hover {
  color: #eee;
}
.header__notification .bell-icon .notification-number {
  font-size: 9px;
  border-radius: 50%;
  background-color: #437dda;
  border: 5px solid #437dda;
  color: #FFFFFF;
      /*width: 18px;
      height: 18px;*/
         /* padding: 1px;*/
}
    .header__notification .bell-icon .bell-number {
        position: absolute;
        left: 60%;
        width: 21px;
        height: 21px;
        font-weight: 600;
        font-family: 'Graphik-Regular';
        font-size: 10px;
        line-height: 15px;
        letter-spacing: 0.5px;
        text-align: center;
    }
.header__notification .bell-icon .notification__list {
  position: absolute;
  background: #e1ebfd;
  width: 440px;
  list-style-type: none;
  text-align: center;
  left: -304px;
  top: 50px;
      
  border-radius: 0px;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;

  box-shadow: -1px 1px 19px -6px rgba(45,117,255,0.55);
-webkit-box-shadow: -1px 1px 19px -6px rgba(45,117,255,0.55);
-moz-box-shadow: -1px 1px 19px -6px rgba(45,117,255,0.55);
cursor: default;
}
.header__notification .bell-icon .notification__list:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  left: 73%;
  top: -20px;
  transform: translate(-50%);
}
.header__notification .bell-icon .notification__list__name {
      background: #fff;
    color: #466295;
    padding: 15px 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 0px;
    border-bottom: 1px solid #9BB7C5;
    transition: all 1s ease-in-out;
    font-size: 1rem;
    font-family: 'Graphik-Regular';
    letter-spacing: .51px;
        display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__notification .bell-icon .notification__list .large-number {
         font-size: 9px;
    border-radius: 50%;
    background-color: #437dda;
    border: 5px solid #437dda;
    color: #FFFFFF;
    height: 20px;
    width: 22px;
    line-height: 12px;
}
.header__notification .bell-icon .list__item {
  border-bottom: 1px solid #9BB7C5;
  background-color: #ffffffc4;
      color: white;
}

.header__notification .bell-icon .list__item:hover {
      background-color: #e1ebfd;
}
    .header__notification .bell-icon .list__item .user-image {
        width: 29px;
        height: 29px;
        border-radius: 50px;
        /*background-color: #14439f;*/
        font-size: 14px;
        font-family: 'Graphik-Regular';
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 9px;
        flex: 1;
    }

.tab-content {
      min-height: 700px;
}

.header__notification .bell-icon .list__item .messages {
    padding-left: 10px;
    color: #4a556a;
    font-size: 0.8rem;
    line-height: 20px;
    font-family: 'Graphik-Regular';
    letter-spacing: .51px;
    /* width: 80%; */
    flex: 12;
}


.header__notification .bell-icon .list__item .messages b {
  color: #4a556a;
}
.header__notification .bell-icon .list__item--link {
  display: flex;
  padding: 15px 10px;
  text-decoration: none;
  text-align: left;
  font-size: 0.7em;
  opacity: 0.8;
  /*align-items: end;*/
}
.header__notification .bell-icon .list__item--link {
  opacity: 1;
}
.header__profile {
  width: 120px;
  align-self: stretch;
  background: #9BB7C5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header__profile .profile__photo {
  background: url(https://cdn.tutsplus.com/net/uploads/legacy/213_chris/ChrisThumbnail.jpg);
  width: 30px;
  height: 30px;
  background-size: cover;
  border-radius: 50%;
}
.header__profile .fa-arrow-circle-o-down {
  font-size: 1.6em;
  color: #fff;
}

.small-icon {
  font-size: 1.2em;
  color: #D0DADF;
}

.messages p {
      color: #b4b4b4;
}
.header__notification .bell-icon .list__item:hover .messages,
.header__notification .bell-icon .list__item:hover .messages b {
      color: #000000;
}

.hide {
  display: none;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.checklist {
  max-width: 400px;
  margin: 10px auto;
}
.checklist li {
  padding: 5px 10px;
  list-style-type: disc;
}

.fa-bell-o:before {
    content: "\f0a2";
    font-size: 1.7rem;
}

.notifi {
    max-height: 274px;
    height: auto;
    overflow-y: auto;
    min-height: 80px;
    background-color: white;
}

.header__notification .fa-bell-o:before {
    content: "\f0a2";
    color: #595959;
}

.clear-3 {
      font-size: 0.8rem;
      cursor:pointer;
}

.notifi .list__item a {
      opacity: 1 !important;
      cursor: pointer;
}

/* ------- scrollbar start-------*/ 

.notifi::-webkit-scrollbar {
  width: 10px;
  overflow-y: auto;
}

/* Track */
.notifi::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
  overflow-y: auto;
}
 
/* Handle */
.notifi::-webkit-scrollbar-thumb {
  background: #8497b0; 
  border-radius: 10px;
  overflow-y: auto;
}

/* Handle on hover */
.notifi::-webkit-scrollbar-thumb:hover {
  background: #437dda; 
  overflow-y: auto;
}

.notifi .list__item .list__item--link i {
    font-size: 16px;
    color: #8b8b8b;
    margin-left: 10px;
    margin-top: 9px;
    flex: 1;
    text-align: center;
}
/* ------- scrollbar end-------*/

/*------------notification css end------------*/