/*______________ message notification css start here_____________*/
/*-----------------*********************------------------*/

.phancy-scrollbar { width:6px; border-radius: 4px; top: 0; right:3px!important; position: absolute; background: #fff; -moz-transition: opacity .2s; -webkit-transition: opacity .2s; -o-transition: opacity .2s; -ms-transition: opacity .2s; transition: opacity .2s; -webkit-transition-delay: 1s; opacity: 0; z-index:99999; }
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar { opacity: 1; -webkit-transition-delay: 0s; }
.phancy-scrollbarbutton { width: 100%; border-radius: 4px; top: 0; position: absolute; background-color: #ffac29; }
.header-notifications .dropdown-menu li{ display:block; padding:0!important; margin:0;}
.header-notifications .dropdown .dropdown-menu{ padding:0; margin:0; border:none; box-shadow:none; display:block; visibility:hidden; left:-140px;}
.header-notifications .dropdown.open .dropdown-menu{ visibility:visible;}
.message-box{ width:340px; height:340px;}
.message-notification{ box-shadow:0px 4px 9px 0px rgba(0,0,0,0.35); margin:0; width:340px; height:377px; border-radius:5px;}
.message-notification:after {top:-19px; left:47.7%; border:solid transparent; content: " "; height:0; width:0; position:absolute; pointer-events:none; border-color: rgba(255, 172, 41, 0); border-bottom-color:#4560B1; border-width:10px; margin-left:-10px;}
.message-notification h3{ background:#4560B1; color:#fff; border-radius:4px 4px 0 0; padding:10px 15px; margin:0; font-size:14px; text-transform:uppercase; font-weight:900; font-family: 'Roboto', sans-serif;}
.message-notification .notification-row a{ display:block; text-decoration:none; padding:10px 12px 5px; border-bottom:solid 1px #ccc; border-left: 20px solid #f0f0f0;}
.message-notification .notification-row[seen="0"] a{ border-left: 20px solid #3abb45;}
.message-notification .notification-row a:hover{ display:block; text-decoration:none; background:#f4f4f4;}
.message-notification .notification-row img{ border-radius:5px; float:left; margin-right:10px; margin-bottom:5px;height: 45px;width: 45px}
.message-notification .notification-row a > span{ float:left; width:220px; padding:2px 0 0;}
.message-notification .notification-row a > span span{ float:none; font-size:14px; font-weight:600; color:#111; padding:0 4px 0 0;}
.message-notification .notification-row .time-and-new{ float:right;}
.message-notification .notification-row time{ float:none; display:inline-block; background: #6c7fd7; border-radius:4px; padding:3px 6px; font-size:11px; font-weight:500; color:#fff;}
.message-notification .notification-row b{ float:none; display:inline-block; background:#ffb028; border-radius:4px; padding:2px 12px; margin-right:4px; font-size:12px; font-weight:600; color:#482e00;}
.message-notification .notification-row p{ font-size:12px; font-weight:400; color:#757575; line-height:18px; clear:both; padding:5px 0 0; margin:0;}
.message-notification .notification-row a > .notifications-sms{ width:100%; float:none; display:block;}
.message-notification .notification-row a > .notifications-sms{ padding:0 0 6px; font-size:13px;}
.message-notification .notification-row a > .notifications-sms strong{ color:#252525;}

/*______________ message notification css start here_____________*/
/*-----------------*********************------------------*/

.notification-job{ box-shadow:0px 4px 9px 0px rgba(0,0,0,0.35); margin:0; width:340px; height:377px; border-radius:5px;}
.notification-job:after {top:-19px; left:47.7%; border:solid transparent; content: " "; height:0; width:0; position:absolute; pointer-events:none; border-color: rgba(255, 172, 41, 0); border-bottom-color:#ffb028; border-width:10px; margin-left:-10px;}
.notification-job h3{  background:#ffb028; color:#482e00; border-radius:4px 4px 0 0; padding:10px 15px; margin:0; font-size:14px; text-transform:uppercase; font-weight:900; font-family: 'Roboto', sans-serif;}
.notification-job .notification-row a{ display:block; text-decoration:none; padding:10px 12px 5px; border-bottom:solid 1px #ccc; border-left: 20px solid #f0f0f0;}
.notification-job .notification-row[seen="0"] a{ border-left: 20px solid #3abb45;}
.notification-job .notification-row a:hover{ display:block; text-decoration:none; background:#f4f4f4;}
.notification-job .notification-row img{ border-radius:5px; float:left; margin-right:10px; margin-bottom:5px;}
.notification-job .notification-row a > span{ float:left; width:220px; padding:2px 0 0;}
.notification-job .notification-row a > span span{ float:none; font-size:14px; font-weight:600; color:#111; padding:0 4px 0 0;}
.notification-job .notification-row .time-and-new{ float:right;}
.notification-job .notification-row time{ float:none; display:inline-block; background:#6c7fd7; border-radius:4px; padding:3px 6px; font-size:11px; font-weight:500; color:#fff;}
.notification-job .notification-row b{ float:none; display:inline-block; background:#ffb028; border-radius:4px; padding:2px 12px; margin-right:4px; font-size:12px; font-weight:600; color:#482e00;}
.notification-job .notification-row p{ font-size:12px; font-weight:400; color:#757575; line-height:18px; clear:both; padding:5px 0 0; margin:0;}
.notification-job .notification-row a > .notifications-sms{ width:100%; float:none; display:block;}
.notification-job .notification-row a > .notifications-sms{ padding:0 0 6px; font-size:13px;}
.notification-job .notification-row a > .notifications-sms strong{ color:#252525;}

/*_____ message notification, Mobile Responsive css start here_____*/
/*-----------------*********************------------------*/

@media(min-width:300px) and (max-width:767px) {
    .header-notifications .dropdown .dropdown-menu{ left:-52px; top:50px;}
    .header-notifications .dropdown .dropdown-menu.job-notification-dropdown{ left:-107px; top:50px;}
    .header-notifications-wrapper.interiol-page-header .header-notifications .dropdown .dropdown-menu{ left:-113px; top:50px;}
    .header-notifications-wrapper.interiol-page-header .header-notifications .dropdown .dropdown-menu.job-notification-dropdown{ left:-168px; top:50px;}
    .message-notification, .notification-job{ max-width:310px;}
    .phancy-scroller, .phancy-scroller div{ max-width:100%;}
    .phancy-scroller{ overflow-x:hidden;}
    .message-notification .notification-row a > span{ width:195px;}
    .message-notification::after{ left:25%;}
    .notification-job .notification-row a > span{ width:195px;}
    .notification-job::after{ left:25%;}
    .job-notification-dropdown .message-notification::after{ left:43%;}
    .header-notifications-wrapper.interiol-page-header .message-notification::after{ left:45%;}
    .header-notifications-wrapper.interiol-page-header .job-notification-dropdown .message-notification::after{ left:62%;}
    .message-notification .notification-row b{ margin-right:0; padding-left:7px; padding-right:7px;}

}

@media(min-width:768px) and (max-width:991px) {

    .header-notifications .dropdown .dropdown-menu{ left:-192px}
    .message-notification::after{ left:63%;}
    .notification-job::after{ left:63%;}

}