/* @import this file */

#notification-icon {
  position:relative;

  .numberCircle {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 3px;
    background: #db4437;
    border: 2px solid #fff;
    text-align: center;
    color: #fff;
    font: 10px Arial, sans-serif;
    position: absolute;
    top: 3px;
    left: 20px;
    font-weight: bold;
  }

}

.notification-container{
  border:1px solid #ccc;
  width:250px;
  height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fff;

  position:absolute;
  z-index:100;
  right:0;

  display:none;

  &.open{
    display:block;
  }

  top: 51px;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
  border-top: none;


  ul.notification-list{
    margin:0;
    padding:0;

    li{
      list-style:none;
      border-bottom:1px solid #e0e0e0;
      padding:8px 5px;

      h4{
        font-size:14px;
      }

      span {
        font-size: 12px;
      }
    }
  }

  li.notification-list-link {
    font-size: 14px;
    text-align: center;
    padding: 8px 5px;
  }

}

.new-notification {
  font-weight: bold;
  border-left: #4f99ed solid 2px;

  h4 {
    font-weight: bold;
  }
}
