/**
 * Notification Module with dropdown  * 
 * @author PM PK
 * @since 14.10.2020 
 * @link https://trello.com/c/i3TweOjL/
 */
.mod_pm_notifications{
  position: relative;
    text-align: right;
    margin-top: 9px;
}
.mod_pm_notifications img:hover{
    -webkit-animation: ring 4s .1s ease-in-out ;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .1s ease-in-out ;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .1s ease-in-out ;
    transform-origin: 50% 4px;
}
.mod_pm_notifications .notification_count{
    width: 20px;
    height:20px;
    text-align: center;
    position: absolute;
    line-height: 20px;
    top: -5px;
    right: -9px;
}
.mod_pm_notifications .notification_dropdown{
    width: 320px;
    position: absolute;
    right: -20px;
    text-align: left;
    display: none;
    top: 50px;
}
#notification_dropdown{
    border: 1px solid #d2d2d2;
}
p.no_notifications {
    padding-left: 20px;
    padding-top: 17px;
}
#notification_dropdown::before{
    content:"";
    width: 15px;
    height: 15px;
    background:rgb(248, 248, 248);
    border-left: 1px solid #d2d2d2;
    border-top: 1px solid #d2d2d2;
    position: absolute;
    right: 23px;
    top: -8px;
    transform: rotate(45deg);
}
.mod_pm_notifications .notification_dropdown h4{
    margin: 0px;
    padding: 10px 20px;
}
.mod_pm_notifications .notification_dropdown .notification_row.user_new_level{
    pointer-events: none;
    cursor: pointer; 
}
.mod_pm_notifications .notification_dropdown .notification_row{
    padding: 10px 10px;
    margin: 0px; 
    display: block;
    margin: 0 10px;
}
#notification_dropdown .notification_elements{
    overflow-y: auto;
    max-height: 300px;
}
    #notification_dropdown .notification_elements .notification_row{
        padding: 20px 10px;
        border-bottom: 1px solid #d2d2d2;
        text-decoration: none;
    }
    #notification_dropdown .notification_elements .notification_row:last-child{
        border-bottom: none;
    }
    #notification_dropdown .notification_elements .notification_row:hover{
        background: #c6c6c6;
    }
    .mod_pm_notifications .notification_dropdown .status_0{
        font-weight: bold; 
        color: #005680;
    }
    .mod_pm_notifications .notification_dropdown .status_1{
        color: #7d7d7d;
    }



/*function for bell ring in notifications img*/
@-webkit-keyframes ring {
    0% { -webkit-transform: rotateZ(0); }
    1% { -webkit-transform: rotateZ(30deg); }
    3% { -webkit-transform: rotateZ(-28deg); }
    5% { -webkit-transform: rotateZ(34deg); }
    7% { -webkit-transform: rotateZ(-32deg); }
    9% { -webkit-transform: rotateZ(30deg); }
    11% { -webkit-transform: rotateZ(-28deg); }
    13% { -webkit-transform: rotateZ(26deg); }
    15% { -webkit-transform: rotateZ(-24deg); }
    17% { -webkit-transform: rotateZ(22deg); }
    19% { -webkit-transform: rotateZ(-20deg); }
    21% { -webkit-transform: rotateZ(18deg); }
    23% { -webkit-transform: rotateZ(-16deg); }
    25% { -webkit-transform: rotateZ(14deg); }
    27% { -webkit-transform: rotateZ(-12deg); }
    29% { -webkit-transform: rotateZ(10deg); }
    31% { -webkit-transform: rotateZ(-8deg); }
    33% { -webkit-transform: rotateZ(6deg); }
    35% { -webkit-transform: rotateZ(-4deg); }
    37% { -webkit-transform: rotateZ(2deg); }
    39% { -webkit-transform: rotateZ(-1deg); }
    41% { -webkit-transform: rotateZ(1deg); }
  
    43% { -webkit-transform: rotateZ(0); }
    100% { -webkit-transform: rotateZ(0); }
  }
  
  @-moz-keyframes ring {
    0% { -moz-transform: rotate(0); }
    1% { -moz-transform: rotate(30deg); }
    3% { -moz-transform: rotate(-28deg); }
    5% { -moz-transform: rotate(34deg); }
    7% { -moz-transform: rotate(-32deg); }
    9% { -moz-transform: rotate(30deg); }
    11% { -moz-transform: rotate(-28deg); }
    13% { -moz-transform: rotate(26deg); }
    15% { -moz-transform: rotate(-24deg); }
    17% { -moz-transform: rotate(22deg); }
    19% { -moz-transform: rotate(-20deg); }
    21% { -moz-transform: rotate(18deg); }
    23% { -moz-transform: rotate(-16deg); }
    25% { -moz-transform: rotate(14deg); }
    27% { -moz-transform: rotate(-12deg); }
    29% { -moz-transform: rotate(10deg); }
    31% { -moz-transform: rotate(-8deg); }
    33% { -moz-transform: rotate(6deg); }
    35% { -moz-transform: rotate(-4deg); }
    37% { -moz-transform: rotate(2deg); }
    39% { -moz-transform: rotate(-1deg); }
    41% { -moz-transform: rotate(1deg); }
  
    43% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
  }
  
  @keyframes ring {
    0% { transform: rotate(0); }
    1% { transform: rotate(30deg); }
    3% { transform: rotate(-28deg); }
    5% { transform: rotate(34deg); }
    7% { transform: rotate(-32deg); }
    9% { transform: rotate(30deg); }
    11% { transform: rotate(-28deg); }
    13% { transform: rotate(26deg); }
    15% { transform: rotate(-24deg); }
    17% { transform: rotate(22deg); }
    19% { transform: rotate(-20deg); }
    21% { transform: rotate(18deg); }
    23% { transform: rotate(-16deg); }
    25% { transform: rotate(14deg); }
    27% { transform: rotate(-12deg); }
    29% { transform: rotate(10deg); }
    31% { transform: rotate(-8deg); }
    33% { transform: rotate(6deg); }
    35% { transform: rotate(-4deg); }
    37% { transform: rotate(2deg); }
    39% { transform: rotate(-1deg); }
    41% { transform: rotate(1deg); }
  
    43% { transform: rotate(0); }
    100% { transform: rotate(0); }
  }