@font-face {
    font-family: 'icons';
    src: url('../../images/bookstore_rewamp/2018/font/icons.otf') format('opentype'),
         url('../../images/bookstore_rewamp/2018/font/icons.woff2') format('woff2'),
         url('../../images/bookstore_rewamp/2018/font/icons.woff') format('woff'),
         url('../../images/bookstore_rewamp/2018/font/icons.ttf') format('truetype'),
         url('../../images/bookstore_rewamp/2018/font/icons.svg#icons') format('svg');
}
.temp_notify .fa-bell{font-size: 20px;}
.nfdropdown .hid, .nfall.hid{ display: none !important;}
.notification_dropdown .closeWrap{display: inline-flex;}
li.nfdropdown ul.notification_dropdown li div.nfmeta, .notification .nflist li div.nfmeta{width: 76.5% !important;display: inline-block !important;}

/* Home page */
.notification-block{display: inline-block; line-height: 13px;}
.nav-btn .sm-c-static{position: relative;}
.rinotification{margin-bottom:0;}
p.no_notification{margin: 20px 10px;font-size: 14px;text-align: center;}
.rinotification .no_notification {display: block;padding: 10px;text-align: center;font-size: 14px;}
span.byline{ margin-left: 5px;font-size: 10px; display: inline !important;}
.nfall, li.nfdropdown ul.notification_dropdown li{background: #fff;display: block;}
.dropdownM .notification_dropdown{position: absolute; z-index: 2; top: 62px; width: 350px; right: -18px;}
li.dropdownM.nfdropdown span.nftotal.hid {display: none; }
.nfall.hid,.nfdropdown .hid{display:none!important}
p.loading{padding: 22px 10px; margin-bottom: 0;}

.dropdownM .notification_dropdown li .nfmeta span * {display: inline-block; padding: 0; line-height: 15px; border-left: 0;display: inline;}
.nfdropdown{cursor: pointer;display: inline-block; list-style: none; vertical-align: top; margin-top: 0px; position: relative;; width: 35px; right: 0; text-align: left;}
.nfdropdown i{font-size: 20px;}
.ng-scope li.dropdownM.nfdropdown span.nftotal{right:21%; top: -28%; line-height: 7px;  padding: 5px 4px 5px; }
li.dropdownM.nfdropdown span.nftotal{right: 19%; top: 28%;font-size: 10px !important; padding: 5px 4px 3px; border-radius: 4px; position: absolute;text-align: center; line-height: 7px; background-color: #fd4147; border: 1px solid #d43439; color: #fff;}
nav.navbar-expand-lg .profilesection ul li.readinstanf.nfdropdown ul.notification_dropdown:before,  .readinsta_topnav .nav_style_res .ricollectionnotification .notification_dropdown.notification_dropdown:before, .notification_dropdown:before{position: absolute; content: ''; top: -7px; right: 44px; width: 20px; height: 25px; transform: rotate(45deg); background-color: #ff5a5f;}
.readinsta_topnav .nav_style_res li.nfdropdown ul.notification_dropdown li div.nfmeta span, .readinsta_topnav .nav_style_res li.nfdropdown ul.notification_dropdown li div.nfmeta, .notification .nflist li div.nfmeta, #mainNav li.nfdropdown ul.notification_dropdown li div.nfmeta span, #mainNav .notification .nflist li div.nfmeta span, .profilesection li.nfdropdown ul.notification_dropdown li div.nfmeta span, .profilesection li.nfdropdown ul.notification_dropdown li div.nfmeta{display: block; width: 100%; font-family: 'Heebo', sans-serif; line-height: 22px; font-size: 12px; color: #333333; margin-bottom: 0;font-weight: 300 !important;}
.notification_dropdown .closeWrap, .readinsta_topnav .nav_style_res .notification_dropdown a{width: 100%;}
#mainNav li.nfdropdown ul.notification_dropdown li div.nfmeta > span{width: 100%;}
#mainNav li.nfdropdown ul.notification_dropdown li div.nfmeta > span a, #mainNav li.nfdropdown ul.notification_dropdown li a{font-size: 12px;}
li.nfdropdown ul.notification_dropdown li span.dpimage i, .notification .nflist li span.dpimage i{font-size: 55px;color: #e1e1e1;margin-right: 10px;}
li.nfdropdown ul.notification_dropdown li span.dpimage img, .notification .nflist li span.dpimage img{    width: 55px; border-radius: 50%; height: 55px;}
li.nfdropdown ul.notification_dropdown li div.nfmeta p span.byline time, .notification .nflist li div.nfmeta p span.byline time{font-size: 10px !important; line-height: 17px; color: #959595 !important;font-family: 'Heebo', sans-serif !important;    font-weight: 400;}
li.nfdropdown ul.notification_dropdown li div.nfmeta p, .notification .nflist li div.nfmeta p{margin-bottom: 0;}
li.nfdropdown ul.notification_dropdown.notification_dropdown div.nflist{max-height: 400px;overflow-y: auto;height: auto;border: 1px solid #eee;border-top: none;background-color: #fff;}
li.nfdropdown ul.notification_dropdown p.nfall a:hover{text-decoration: underline !important;}
/*.nfdropdown:hover>.notification_dropdown{display: block;}*/
li.nfdropdown ul.notification_dropdown h5{background-color: #ff5a5f; margin: 0; padding: 10px; font-size: 14px; font-family: 'heebo', sans-serif; color: #fff; border-top-right-radius: 5px; border-top-left-radius: 5px;font-weight: 700;line-height: 16px;}
li.nfdropdown ul.notification_dropdown li div.nfmeta p i, .notification .nflist li div.nfmeta p i{color: #fff; background-color: #ff5a5f; font-size: 10px; padding: 4px 5px; border-radius: 50%;}
li.nfdropdown ul.notification_dropdown h5 span{position: relative;float: right; cursor: pointer; padding: 0px 5px;color: #fff !important;}
li.nfdropdown ul.notification_dropdown li, .notification .nflist li{padding: 10px;border-bottom: 1px solid #eee;}
li.nfdropdown ul.notification_dropdown li:hover {background-color: #eee;}
li.nfdropdown ul.notification_dropdown li span.dpimage, .notification .nflist li span.dpimage{display: inline-block; vertical-align: top; margin-right: 10px;}
li.nfdropdown ul.notification_dropdown p.nfall a{color: #ff5a5f !important;font-size: 12px !important;font-weight: 400;}
li.nfdropdown ul.notification_dropdown p.nfall a{    border: none; padding: 0;line-height: 25px;}
li.nfdropdown ul.notification_dropdown p.nfall{margin-bottom: 0; text-align: center; font-family: 'Heebo', sans-serif; font-size: 12px; padding: 5px;  border: 1px solid #eee;border-top: transparent;}
.nfdropdown .fa.fa-bell:before {content: '\e90d'; font-family: 'icons'; font-size: 30px; font-style: initial; margin-top: -5px; display: inline-block; }


/* Dashboard  */
#mainNav .profilesection .dropdownM.justify-content-end{display: inline-block;margin-right: 10px;}
.line2 .profilesection ul.rinotification{margin-right: 10px; position: relative; vertical-align: top; margin: 0; top: 0; right: 0; display: inline-block;}
.profilesection ul.rinotification li.dropdownM.nfdropdown{margin-right: 5px;margin-top: 0;padding-bottom: 0;margin-right: 0;padding: 0 15px;font-weight: 400;}
.profilesection ul.rinotification li.dropdownM.nfdropdown span.nftotal{padding: 8px 4px 5px !important; right: 4px; top: -2px; font-family: 'Heebo', sans-serif !important;}
.profilesection ul.rinotification li.nfdropdown ul.notification_dropdown{top: 40px;right: -1px;padding: 0;}
.profilesection ul.rinotification li i.fa.fa-bell {margin: 5px 0px 0px -3px; }
#mainNav .header-menus .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown li a, #mainNav .header-menus .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown li span a{ padding: 0; font-family: 'Heebo', sans-serif;}
.profilesection ul.notification_dropdown:before{right: 33px; border: none !important; left: auto; top: -7px;}
#mainNav .header-menus .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown li a{display: block;}
#mainNav .header-menus .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown li span a{display: inline-block;}
.profilesection ul.rinotification li.nfdropdown ul.notification_dropdown.notification_dropdown:after{display: none;}
#mainNav .header-menus.line2 .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown span{padding: 0;}
.profilesection ul.rinotification li.nfdropdown ul.notification_dropdown .nfmeta strong{font-weight: bold;}
.profilesection .row.dropdown.justify-content-end.align-items-center{display: inline-block;}
#mainNav .profilesection .notification-block{padding-left: 20px;}
#mainNav .profilesection ul.notification_dropdown:before{    right: 35px;}

/* Readinsta collectionpage */
.ricollectionnotification{display: inline-block; vertical-align: top; margin-bottom: 0;position: relative;}
.ricollectionnotification .nfdropdown{padding-top: 23px !important; right: 0; margin-top: 0;}
.ricollectionnotification li.dropdownM.nfdropdown span.nftotal{    top: 25px; right: -9px; font-weight: 400; line-height: 10px;}
.ricollectionnotification li.nfdropdown ul.notification_dropdown li div.nfmeta strong{font-weight: 700;}
.readinsta_topnav .nav_style_res .ricollectionnotification .notification_dropdown:before{right: 20px !important;    border: none;}
.ricollectionnotification .dropdownM .notification_dropdown{z-index: 4;top: 71px;}
.ricollectionnotification .dropdownM .notification_dropdown li > a{padding: 0; display: block; border-left: 0;}
.readinsta_topnav .nav_style_res .ricollectionnotification .dropdownM .notification_dropdown li span:not(.byline) {color: #333;font-weight: 300;}
.readinsta_topnav .nav_style_res .dropdownM{padding:22px 15px 16px; vertical-align: top; cursor: pointer;width: auto;line-height: 12px;}

/* Readinsta readerpage */
.readinstanf.nfdropdown{margin-left: 20px;right: 7px;margin-top: 1px;padding: 5px 0 15px 0 !important;}
nav.navbar-expand-lg .profilesection .readinstanf.nfdropdown ul{padding: 0;}
li.nfdropdown.readinstanf ul.notification_dropdown .nfmeta p{margin-bottom: 0;}
li.nfdropdown.readinstanf ul.notification_dropdown .nfmeta strong{font-weight: bold;}
nav.navbar-expand-lg .profilesection ul li.readinstanf.nfdropdown ul.notification_dropdown:before{right: 16px;}
li.readinstanf.nfdropdown span.nftotal{right: 3px;    top: 4px;font-family: "Heebo", sans-serif;}
.topnav .profilesection ul.rinotification li.dropdownM.nfdropdown{padding: 0 5px;}
.profilesection .dropdownM .notification_dropdown{top: 40px;}
nav.navbar-expand-lg .profilesection li ul, nav.navbar-expand-lg .profilesection ul.notification_dropdown{padding: 0;}



/* See all */
.notification h4{margin-bottom: 25px;}
.notification .nflist{border: 1px solid #eee;}
.notification .nflist li .nfmeta{width: 30% !important;}
.notification .nflist li{list-style: none;position: relative;}
.notification .nflist li:last-child{border-bottom: none;}
.notification .nflist li:hover{background-color: #eeeeee;}
.notification .nflist li i.fa.fa-ellipsis-h{    cursor: pointer;padding: 1px 15px;position: absolute; right: 0; bottom: 0; top: 0; margin: auto 20px; vertical-align: middle; height: 15px; color: #e1e1e1;}
.notification .nflist li .fa-ellipsis-h span { position: absolute; right: -9px; width: 100px; bottom: -40px; padding: 10px 10px; background-color: #e1e1e1; z-index: 1; transform: scaleY(0); transition: transform .1s; text-align: center; color: #000; border-radius: 2px; font-family: "Heebo",serif; font-size: 12px; font-weight: 400;}
.notification .nflist li i.fal.fa.fa-ellipsis-h:hover span { transform: scaleY(1); }
.notification .nflist li .fa-ellipsis-h span:after { position: absolute; content: ""; border-top: 5px solid transparent; width: 5px; height: 5px; border-bottom: 5px solid #e1e1e1; border-right: 5px solid transparent; border-left: 5px solid transparent; top: -10px; margin: auto; right: 25px; }

@media only screen and (min-width: 992px){
  .nav-btn .sm-c-static #navbarResponsive{display: inline-block !important;}
}
@media only screen and (max-width: 1199px) and (min-width: 992px){
  .nfdropdown{margin-top: 0px;}
}
@media only screen and (max-width: 991px){
  .nav-btn .sm-c-static{position: static;}
  .nfdropdown{margin-top: 0px; right: 0px; position: relative;top:0px;}
  /*li.dropdownM.nfdropdown span.nftotal{padding: 8px 4px 5px !important;}*/
  #mainNav li.nfdropdown ul.notification_dropdown li div.nfmeta > span a, #mainNav li.nfdropdown ul.notification_dropdown li a{display: block;padding: 0;}
  #mainNav li.nfdropdown ul.notification_dropdown li span{padding: 0;}
  .dropdownM .notification_dropdown li .nfmeta span * {display: inline-block !important; padding: 0; line-height: 15px; border-left: 0;}

  /* Dashboard */
  .profilesection ul.rinotification li.dropdownM.nfdropdown{position: relative;right: 0;width: 63px;}
  .nav_style_res ul.ricollectionnotification li:hover, .nav_style_res ul.ricollectionnotification{background: transparent;}
  .nav_style_res ul.ricollectionnotification li{position: relative;}
  .profilesection ul.rinotification li.dropdownM.nfdropdown span.nftotal{right: 15px;}

  .readinstanf.nfdropdown{position: relative;}
  .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown{right: 21px;}


}

@media only screen and (max-width: 720px){
  li.nfdropdown ul.notification_dropdown div.nflist{height: 100% !important;padding-bottom: 75px;max-height: 100% !important;}
  nav.navbar-expand-lg .profilesection ul li.readinstanf.nfdropdown ul.notification_dropdown:before, .readinsta_topnav .nav_style_res .ricollectionnotification .notification_dropdown:before, .notification_dropdown:before{display: none;}
  .dropdownM .notification_dropdown, .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown, .ricollectionnotification .notification_dropdown{z-index: 99991;width: calc(100% - 80px); right: -100% !important; left: auto !important; padding: 0; border-radius: 0; box-shadow: none; position: fixed !important; top: 65px; bottom: 0; height: 100%; margin: 0;border:0;}
  #mainNav .dropdownM .notification_dropdown{top: 107px;}
  body.scrollFixedNavPackage #mainNav .dropdownM .notification_dropdown{top: 69px;}
  .dropdownM .notification_dropdown.dropdown-menushow, .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown.dropdown-menushow, .ricollectionnotification .notification_dropdown.dropdown-menushow{animation: righttoleft .8s;right: 0 !important;}
  @keyframes righttoleft { 0%{ right: -100%; }100%{ right: 0; } }
  .dropdownM .notification_dropdown.dropdown-menu, .profilesection ul.rinotification li.nfdropdown ul.notification_dropdown.dropdown-menu, .ricollectionnotification .notification_dropdown.dropdown-menu{animation: lefttoright .8s;right: -100% !important;}
  @keyframes lefttoright { 0%{ right: 0; }100%{ right: -100%; } }
  li.nfdropdown ul.notification_dropdown p.nfall{position: fixed; bottom: 0; width: 100%; background-color: #fff;}
  li.nfdropdown ul.notification_dropdown h5{border-radius: 0;}
  .ricollectionnotification .nfdropdown .notification_dropdown{top:0 !important;}
  .nfdropdown.readinstanf .notification_dropdown.dropdownM:hover>.notification_dropdown{display: block !important;top:0;}
  nav.navbar-expand-lg .profilesection ul li.dropdownM.readinstanf.nfdropdown ul.notification_dropdown{top:0;}
  body.ng-scope.theme1 .profilesection .dropdownM .notification_dropdown{top: 58px !important;}
}

@media only screen and (max-width: 1024px){
  .ricollectionnotification .nfdropdown{width: 65px;}
  .ricollectionnotification .nfdropdown .notification_dropdown{right: 0;}
  .ricollectionnotification li.dropdownM.nfdropdown span.nftotal{right: 20px;}
  nav.navbar-expand-lg .profilesection ul li.dropdownM.readinstanf.nfdropdown ul.notification_dropdown{left: auto !important}
  .readinsta_topnav .nav_style_res .dropdownM{padding:22px 10px 16px !important;}
  .ricollectionnotification .nfdropdown{padding-top: 0 !important;}
  .ricollectionnotification .dropdownM .notification_dropdown{top: 56px;}
  .readinsta_topnav .nav_style_res .ricollectionnotification .notification_dropdown:before{right: 33px !important;}
  .dropdownM .notification_dropdown{right: -23px;}
}