/*************************************************************************************************************************NOTIFICATIES BTN*/
#boventekst .notificatie_container{
   order:6;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   justify-content: center;
   align-items: center;
   -ms-flex-pack: flex-start;
}
#boventekst .notificatie_container a.btn_notificatie{
   background-image: url(../images/icons/notificatie_wit.svg);
   background-repeat:no-repeat;
   background-position: center center;
   background-size: 90% auto;
   width: 25px;
   height: 25px;
   display: inline-block;
   flex: 0 0 25px;
   position:relative;
   cursor:pointer;
}

#boventekst .notificatie_container a.btn_notificatie.nul_notificaties{
   /*-webkit-filter: grayscale(100%); 
   filter: grayscale(100%);*/
   /*filter: brightness(0) invert(.5);*/
   opacity:.5;
}
#boventekst .notificatie_container a.btn_notificatie > span{
   display: none;
   position: absolute;
   right:30px;
   white-space: nowrap;
   line-height: 25px;
   padding: 0 .5em;
   color:#FFF;
}
/*#boventekst .notificatie_container a.btn_notificatie:not(.alert-active):hover > span{display:block;}*/
#boventekst .notificatie_container a.btn_notificatie:not(.nul_notificaties):after,
#boventekst a.icon-header.icon-mail.numbers-mail span{
   position:absolute;
   content:attr(data-aantal);
/*   font-family:Arial, sans-serif;*/
   background-color: rgba(204,0,0,1);
   color:#fff;
   font-size:9px;
   text-align:center;
   line-height:16px;height:16px;width:16px;
   border-radius:50%;
   margin:-8px;
   padding:0;
   text-indent: -1px;
   
   box-shadow: 0 0 0 rgba(204,0,0,.8);
  
   border: none;
   outline: 0;
   cursor: pointer;
   z-index: 20;
   padding: 0;

   transition: background-color .2s ease;
   will-change: background-color;
}
#boventekst .notificatie_container a.btn_notificatie:not(.alert-active):after{
  /* animation: pulse_btn 2s infinite;  */
}
#boventekst a.icon-header.icon-mail.numbers-mail span{
   right: 2px;
   top: 9px;
}
@keyframes pulse_btn{
   0%{box-shadow:0 0 0 0 rgba(204,0,0,.8)}
   70%{box-shadow:0 0 0 25px rgba(204,0,0,0)}to{box-shadow:0 0 0 0 rgba(204,0,0,0)}
}


/*************************************************************************************************************************NOTIFICATIES LIJSTJE*/
#boventekst .notificatie_container:hover #notificatie_box{
   /*display:block;*/
}
#notificatie_box{
   display: none;
   position: absolute;
   width: 350px;
   max-width: 100%;
   background-color: #fff;   
   box-shadow: 0 3px 4px 1px rgba(0,0,0,.3);
   margin-left: 0;
   top: 0;
   padding: .5em;
   right: 0;
   top: 100%;
   margin-left: -100px;
   z-index:10000;

}

#notificatie_box button.sluit_notificatie{margin:0;padding:0;position:relative;float:right;width:25px;height:25px;border:none; background-color:transparent;cursor:pointer}
#notificatie_box button.sluit_notificatie .cross{top:0;left:0;}
#notificatie_box h3{margin:0;padding:0;color:rgba(2,130,194,1);font-weight:normal;}
#notificatie_box ul, #notificatie_box li{list-style:none;}
#notificatie_box ul{
   margin:0; 
   padding:0;   
   overflow: auto;
   max-height:250px;
   width:100%;
}

#notificatie_box ul li{border-bottom:1px solid rgba(2,130,194,.2);}
#notificatie_box ul > li:nth-of-type(1){border-top:1px solid rgba(2,130,194,.2);}
#notificatie_box ul > li:nth-of-type(even){background-color:rgba(2,130,194,.05);}
#notificatie_box ul > li:hover{background-color:rgba(2,130,194,.1);}


#notificatie_box ul li.notificatie span{line-height:1.5em;}
#notificatie_box ul li.notificatie span.waarin{display:none;}
#notificatie_box ul li.notificatie span.datum_tijd{
   font-weight:normal;
   font-size:.9em;
   color:#666;
   flex: 0 0 auto;
   text-align: right;
   white-space: nowrap;
}
#notificatie_box ul li.notificatie span.notificatie_naam{
   flex: 0 1 100%;
}

#notificatie_box ul li.notificatie a{
   font-size:11px;
   line-height:16px;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   justify-content: space-between;
   align-items: center;
   -ms-flex-pack: flex-start;
}
#notificatie_box ul li.notificatie a:hover{text-decoration:none;}
#notificatie_box ul li.notificatie a:before{
   content: '';
   flex:0 0 18px;
   height: 1.5em;
   display: block;
   position: relative;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin-right: .5em;
   margin-top: 2px;
}
#notificatie_box ul li.notificatie_chat a:before {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.5' height='12.89' viewBox='0 0 16.5 12.89'%3E%3Ctitle%3Echat_rood%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M15,3.61H7.73A1.52,1.52,0,0,0,6.19,5.16V9.28a1.55,1.55,0,0,0,1.54,1.55h5.16L15,12.89V10.83A1.55,1.55,0,0,0,16.5,9.28V5.16A1.52,1.52,0,0,0,15,3.61Z' style='fill:%23c00'/%3E%3Cpath d='M8.77,0H1.55A1.52,1.52,0,0,0,0,1.55V5.67A1.55,1.55,0,0,0,1.55,7.22V9.28L3.61,7.22H5.16V5.16A2.55,2.55,0,0,1,7.73,2.58h2.58v-1A1.52,1.52,0,0,0,8.77,0Z' style='fill:%23c00'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#notificatie_box ul li.notificatie.unread a{font-weight:bold;}
#notificatie_box ul li.notificatie.read a{font-weight:normal;}
#notificatie_box ul li.notificatie_chat.read a:before {   
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
   opacity:.5;
}