/**
* Custom colors
* Name That Color
**/
@media (max-width: 768px) {
  .account-main-content.notification .no-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
  }
}
.account-main-content.notification .notification-empty {
  gap: 12px;
  padding: 24px;
}
@media (max-width: 768px) {
  .account-main-content.notification .notification-empty {
    padding: 16px;
  }
}
@media (max-width: 768px) {
  .account-main-content.notification .notification-button {
    width: 100%;
  }
  .account-main-content.notification .notification-button span {
    font-size: 0.875rem !important;
  }
}
.account-main-content.notification .notification-item {
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  border-width: 1px 1px 1px 4px !important;
  border-style: solid;
  border-radius: 8px !important;
  cursor: pointer;
}
.account-main-content.notification .notification-item .notification-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 27px;
  min-width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #FFFFFF;
}
.account-main-content.notification .notification-item .notification-image .icon {
  font-size: 16px;
  -ms-flex-item-align: center;
      align-self: center;
}
.account-main-content.notification .notification-item.inprogress {
  border-color: #349A26 !important;
}
.account-main-content.notification .notification-item.inprogress .notification-image {
  background: #349A26;
}
.account-main-content.notification .notification-item.completed {
  border-color: #349A26 !important;
}
.account-main-content.notification .notification-item.completed .notification-image {
  background: #349A26;
}
.account-main-content.notification .notification-item.cancelled {
  border-color: #F63F5D !important;
}
.account-main-content.notification .notification-item.cancelled .notification-image {
  background: #F63F5D;
}
.account-main-content.notification .notification-item.pending {
  border-color: #E7C351 !important;
}
.account-main-content.notification .notification-item.pending .notification-image {
  background: #E7C351;
}
.account-main-content.notification .notification-item + .notification-item {
  margin-top: 16px;
}
.account-main-content.notification .notification-item .notification-content {
  gap: 8px;
}
.account-main-content.notification .notification-item .notification-content .btn-delete {
  height: 18px;
}
.account-main-content.notification .notification-item .notification-arrow a {
  width: 34px;
  height: 34px;
}
.account-main-content.notification .notification-item .notification-arrow a:hover,
.account-main-content.notification .notification-item .notification-arrow a:focus {
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.0901960784);
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.0901960784);
  text-decoration: none !important;
}
.account-main-content.notification .notification-item .notification-arrow .icon {
  color: #6D3B8F;
}