.notification-link{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #dce7e0;
  border-radius:13px;
  background:#f1f7f3;
  color:#0f6842;
  text-decoration:none;
}
.notification-link svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.notification-link>span{
  position:absolute;
  top:-6px;
  left:-6px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:99px;
  background:#e83030;
  color:#fff;
  border:2px solid #fff;
  font-size:10px;
  font-weight:900;
}
.notifications-page{
  min-height:70vh;
  background:#f6f8f7;
  padding:38px 16px 75px;
}
.notifications-container{
  max-width:920px;
  margin:auto;
}
.notifications-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.notifications-head span{
  color:#1ca42b;
  font-size:13px;
  font-weight:900;
}
.notifications-head h1{
  margin:7px 0;
  font-size:35px;
}
.notifications-head p{
  margin:0;
  color:#718078;
}
.read-all-button{
  border:0;
  border-radius:12px;
  background:#0f4a35;
  color:#fff;
  padding:12px 16px;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
}
.notification-success{
  margin-bottom:15px;
  border-radius:13px;
  background:#e8f8ec;
  color:#17662c;
  padding:12px 15px;
}
.notifications-list{
  display:grid;
  gap:12px;
}
.notification-card{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:15px;
  border:1px solid #e0e8e3;
  border-radius:19px;
  background:#fff;
  padding:17px;
  transition:.2s ease;
}
.notification-card.unread{
  border-color:#bee3c8;
  background:linear-gradient(135deg,#fff,#f4fbf6);
  box-shadow:0 12px 30px rgba(14,76,48,.08);
}
.notification-icon{
  position:relative;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#eaf6ee;
  color:#0f6842;
}
.notification-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.notification-icon>span{
  position:absolute;
  top:5px;
  left:5px;
  width:9px;
  height:9px;
  border:2px solid #fff;
  border-radius:50%;
  background:#25d719;
}
.notification-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.notification-title-row h2{
  margin:0;
  font-size:17px;
}
.notification-title-row time{
  white-space:nowrap;
  color:#829087;
  font-size:11px;
}
.notification-content>p{
  color:#59685f;
  line-height:1.9;
  margin:9px 0 12px;
}
.notification-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.notification-actions form{
  margin:0;
}
.notification-actions a,
.notification-actions button{
  border:0;
  border-radius:10px;
  background:#eaf6ee;
  color:#17642d;
  padding:8px 11px;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.notification-actions .delete-notification{
  background:#fff0f0;
  color:#b42318;
}
.notifications-empty{
  border:1px dashed #c9d7cf;
  border-radius:22px;
  background:#fff;
  padding:65px 20px;
  text-align:center;
}
.notifications-empty svg{
  width:52px;
  height:52px;
  fill:none;
  stroke:#759083;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.notifications-empty h2{
  margin:15px 0 6px;
}
.notifications-empty p{
  margin:0;
  color:#748078;
}
.mobile-notification-menu{
  display:flex!important;
  justify-content:space-between;
}
.mobile-notification-menu b{
  min-width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:99px;
  background:#e83030;
  color:#fff;
  font-size:10px;
}
.mobile-nav-icon{
  position:relative;
}
.mobile-notification-dot{
  position:absolute;
  top:-2px;
  left:-3px;
  width:9px;
  height:9px;
  border:2px solid #fff;
  border-radius:50%;
  background:#e83030;
}

@media(max-width:768px){
  .notification-link{
    width:42px;
    height:42px;
  }
  .notifications-page{
    padding:24px 11px 110px;
  }
  .notifications-head{
    align-items:flex-start;
  }
  .notifications-head h1{
    font-size:28px;
  }
  .notifications-head p{
    font-size:12px;
  }
  .read-all-button{
    padding:10px 12px;
    font-size:12px!important;
  }
  .notification-card{
    grid-template-columns:44px 1fr;
    gap:11px;
    padding:14px;
    border-radius:17px;
  }
  .notification-icon{
    width:43px;
    height:43px;
    border-radius:13px;
  }
  .notification-title-row{
    display:block;
  }
  .notification-title-row h2{
    font-size:15px;
    margin-bottom:4px;
  }
  .notification-content>p{
    font-size:13px;
  }
}

@media(max-width:420px){
  .notifications-head{
    display:block;
  }
  .notifications-head form{
    margin-top:13px;
  }
}