.left-notification-container {
  height: 20vmin;
  width: 40vmin;
  background: #fff;
  box-shadow: rgba(54, 48, 48, 0.308) 0px 1px 3px 0px, rgba(255, 255, 255, 0.795) 0px 0px 0px 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2.5vmin;
  font-weight: 600;

}

.left-notification-container p {
  width: 70%;
  line-height: 4vmin;
  /* background: red; */
}

.left-notification-container p a:not(:hover) {
  text-decoration: none;
  color: #1D72C7;
}

.left-notification-container p a .side-footer-notification {
  width: 44vmin;
  /* background-color: #fff; */
  height: 150vmin;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}


.main-hero-notification-container {
  width: 90vmin;
  /* height: 100vh; */
  /* background: red; */

}

.filter-notifications-container {
  width: 100%;
  height: 10vmin;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: rgba(54, 48, 48, 0.308) 0px 1px 3px 0px, rgba(255, 255, 255, 0.795) 0px 0px 0px 1px;
}


.filter-buttons {
  height: 100%;
  width: 50%;
  /* background: blue; */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.filter-buttons :nth-child(1) {
  background: #004C33;
  color: #fff;
}

.filter-buttons button {
  background: #fff;
  border: 1px solid #868080;
  color: #8d8080;
  padding: 1vmin 2vmin;
  border-radius: 16px;
  font-size: 2.5vmin;
  font-weight: 600;
  cursor: pointer;
}

.js-background{
  background:#004C33;
  color: #fff;
}
.all-notifications-container {
  width: 100%;
  /* height: 50vh; */
  margin-top: 2vmin;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: rgba(54, 48, 48, 0.308) 0px 1px 3px 0px, rgba(255, 255, 255, 0.795) 0px 0px 0px 1px;
  background: #fff;
  margin-bottom: 2vmin;
}


.notification-box {
  width: 100%;
  height: 16vmin;
  /* background: palevioletred; */
  display: flex;
  align-items: center;
}

.page-logo {
  height: 100%;
  width: 14vmin;
  /* background: lightsalmon; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-logo span {
  width: 50%;
  height: 50%;
  overflow: hidden;
}

.notification-content {
  height: 100%;
  width: 68vmin;
  /* background: blue; */
  display: flex;
  align-items: center;
  justify-content: center;

}

.notification-content .texts-contents {
  width: 100%;
  height: 90%;
  /* background: powderblue; */
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow:hidden;

  /* word-wrap: break-word; */
}

.time-delete-notification {
  width: calc(100% - 68vmin - 14vmin);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* background: red; */
}
.time-delete-notification i{
  padding: 1vmin;
  border-radius: 50%;
  cursor: pointer;
}








/* for my posts  */

.demo-notifi-contenter{
  height: 70vmin;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
justify-content: space-evenly;
}

.demo-image-container{
  width: 60%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: red; */
  overflow: hidden;
}
.demo-notifi-contenter .status-text{
  font-size: 4vmin;
  font-weight: 500;
  color: #3f3939;
}


.delete-pop-up-container{
  height: 10vmin;
  width: 40vmin;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: rgba(54, 48, 48, 0.308) 0px 1px 3px 0px, rgba(255, 255, 255, 0.795) 0px 0px 0px 1px;
  position: fixed;
  top: 40vmin;
  right: 80vmin;
  display: none;
}
.js-delete-pop-up{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.noti-del-btn{
  width:98%;
  height: 50%;
  /* background: #fff; */
  display: flex;
  align-items: center;
  gap: 2vmin;
  padding-left: 2vmin;
  font-size: 2.5vmin;

}