/* FPC Wire v2.3.1e1 — Notification Layout Hotfix */

/* Only applies when notification cards are present. */
body.wire-notifications-layout-fix .content-column{
  overflow:visible;
}

body.wire-notifications-layout-fix .notification-header,
body.wire-notifications-layout-fix .notifications-header,
body.wire-notifications-layout-fix [data-notification-header]{
  position:static!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:18px 20px!important;
  margin:0 0 14px!important;
  border:1px solid rgba(111,139,171,.24)!important;
  border-radius:12px!important;
  background:#0a1521!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body.wire-notifications-layout-fix [data-notification-filters]{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  overflow:visible!important;
  padding:0 0 14px!important;
  margin:0!important;
}

body.wire-notifications-layout-fix [data-notification-filter]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}

body.wire-notifications-layout-fix [data-notification-card]{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:0!important;
  padding:14px 16px!important;
  margin:0 0 10px!important;
  border:1px solid rgba(111,139,171,.24)!important;
  border-radius:12px!important;
  background:#0a1521!important;
  box-shadow:none!important;
}

body.wire-notifications-layout-fix [data-notification-card]:hover{
  transform:none!important;
}

body.wire-notifications-layout-fix [data-notification-card].is-unread,
body.wire-notifications-layout-fix [data-notification-card][data-notification-unread="1"]{
  background:#0d1a29!important;
  border-color:rgba(239,47,67,.34)!important;
}

body.wire-notifications-layout-fix [data-notification-card]::before{
  top:10px!important;
  bottom:10px!important;
}

body.wire-notifications-layout-fix [data-notification-card] > *{
  min-width:0;
}

body.wire-notifications-layout-fix [data-notification-card] > :first-child{
  flex:0 0 auto!important;
}

body.wire-notifications-layout-fix [data-notification-card] > :nth-child(2){
  flex:1 1 auto!important;
}

body.wire-notifications-layout-fix [data-notification-card] > :last-child{
  flex:0 0 auto!important;
  margin-left:auto!important;
}

body.wire-notifications-layout-fix [data-notification-card] img{
  flex:0 0 auto;
}

body.wire-notifications-layout-fix [data-notification-card] time,
body.wire-notifications-layout-fix .notification-time{
  display:block!important;
  margin-top:2px!important;
}

body.wire-notifications-layout-fix .notification-read-form{
  margin:0!important;
}

body.wire-notifications-layout-fix .notification-read-form button{
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
}

body.wire-notifications-layout-fix [data-notification-filter-empty]{
  margin:12px 0!important;
  padding:22px!important;
  border:1px solid rgba(111,139,171,.2)!important;
  border-radius:12px!important;
  background:#0a1521!important;
  text-align:center!important;
}

@media(max-width:799px){
  body.wire-notifications-layout-fix .notification-header,
  body.wire-notifications-layout-fix .notifications-header,
  body.wire-notifications-layout-fix [data-notification-header]{
    display:block!important;
    padding:14px 14px!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }

  body.wire-notifications-layout-fix [data-notification-filters]{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    margin-inline:-14px!important;
    padding:0 14px 12px!important;
    scrollbar-width:none!important;
  }

  body.wire-notifications-layout-fix [data-notification-filters]::-webkit-scrollbar{
    display:none!important;
  }

  body.wire-notifications-layout-fix [data-notification-card]{
    align-items:flex-start!important;
    gap:10px!important;
    padding:13px 14px!important;
    margin-bottom:8px!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }

  body.wire-notifications-layout-fix [data-notification-card] > :last-child{
    align-self:center!important;
  }
}