.notify {
  position: relative;
  z-index: 15;
}

@media (min-width: 992px) {
  .notify {
    margin-bottom: -1rem;
  }
}

.notify-icon {
  position: relative;
}

.notify-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='33' viewBox='0 0 34 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.2562 29.0781H21.7731C21.5332 29.0781 21.4561 29.1293 21.3961 29.3853C21.257 30.2359 20.8625 31.0245 20.2646 31.6475C19.6666 32.2704 18.8933 32.6984 18.0463 32.875C17.4613 33.0172 16.8532 33.0383 16.2596 32.9371C15.666 32.8359 15.0996 32.6145 14.5953 32.2867C14.091 31.9588 13.6596 31.5314 13.3278 31.0309C12.996 30.5304 12.7708 29.9674 12.6661 29.3767C12.6232 29.1549 12.5461 29.0781 12.3062 29.0781C8.66515 29.0781 5.02406 29.0781 1.39153 29.0781C1.207 29.0866 1.02274 29.0567 0.850483 28.9902C0.678229 28.9238 0.521784 28.8223 0.391163 28.6922C0.260541 28.5621 0.158605 28.4063 0.0918778 28.2347C0.0251508 28.0632 -0.00490251 27.8796 0.00363751 27.6959C0.00363751 27.2266 0.00363751 26.7573 0.00363751 26.2795C-0.0178102 26.0097 0.0560699 25.741 0.212512 25.5197C0.368954 25.2985 0.598121 25.1387 0.860366 25.0679C1.53543 24.8484 2.18688 24.5626 2.80513 24.2146C3.91023 23.4451 4.71749 22.322 5.09261 21.0321C5.44781 19.9545 5.66373 18.8363 5.73515 17.7044C5.82083 16.6379 5.79511 15.5713 5.82938 14.5133C5.83283 12.1661 6.24145 9.83694 7.03737 7.62763C7.46531 6.51794 8.10869 5.50314 8.93073 4.64128C10.0027 3.5649 11.3874 2.8515 12.8888 2.60204C13.4244 2.49421 13.9703 2.44556 14.5166 2.45699C14.7137 2.45699 14.7736 2.40579 14.7736 2.20101C14.7727 1.76857 14.8817 1.34293 15.0906 0.963818C15.2693 0.670961 15.521 0.42908 15.8212 0.261641C16.1214 0.0942028 16.46 0.00689661 16.8041 0.00819226C17.1332 -0.0174565 17.4642 0.0172435 17.7808 0.110577C18.1836 0.233532 18.5367 0.480784 18.7893 0.816647C19.0418 1.15251 19.1807 1.55961 19.1858 1.97918C19.2286 2.44846 19.1858 2.43139 19.6741 2.45699C20.6458 2.49014 21.601 2.71629 22.4838 3.12215C23.3665 3.52802 24.1589 4.10542 24.8145 4.82047C25.9784 6.12979 26.8357 7.68019 27.3247 9.35971C27.7207 10.6346 27.982 11.9472 28.1043 13.2761C28.2071 14.2658 28.2414 15.2556 28.25 16.2454C28.2446 17.7655 28.4522 19.279 28.8668 20.7419C29.0998 21.7209 29.5862 22.6221 30.2777 23.3556C30.9691 24.0891 31.8414 24.6295 32.8078 24.9228C32.962 24.974 33.1162 25.0508 33.279 25.1105C33.4977 25.183 33.6865 25.3249 33.8164 25.5145C33.9464 25.704 34.0104 25.9308 33.9986 26.16C33.9986 26.7317 33.9986 27.3034 33.9986 27.8665C33.9998 28.0255 33.969 28.1832 33.9082 28.3302C33.8474 28.4773 33.7577 28.6108 33.6443 28.7228C33.531 28.8349 33.3964 28.9233 33.2483 28.9828C33.1003 29.0424 32.9417 29.0719 32.7821 29.0696H27.2562' fill='%231E95D3'/%3E%3C/svg%3E%0A");
  content: "";
  cursor: pointer;
  display: block;
  height: 33px;
  width: 34px;
}

.notify-number {
  align-items: center;
  background-color: var(--danger);
  border-radius: 100%;
  border: 1px solid var(--light-blue);
  color: var(--white);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 300;
  height: 24px;
  justify-content: center;
  position: absolute;
  right: -10px;
  top: -2px;
  width: 23px;
}

.notify-wrap {
  display: none;
  left: -1rem;
  padding-top: 0.5rem;
  position: absolute;
  top: 100%;
  width: 100vw;
  z-index: 1;
}

@media (min-width: 992px) {
  .notify-wrap {
    left: 0;
    width: 360px;
  }
}

.notify.active .notify-wrap {
  display: block;
}

.notify-content {
  background-color: var(--white);
  box-shadow: 0px 0px 10px rgba(var(--black-rgb), 0.15);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 300;
  gap: 5px;
  max-height: calc(100vh - 133px);
  overflow: auto;
  padding: 0.65rem;
}

@media (min-width: 992px) {
  .notify-content {
    height: auto;
  }
}

.notify-item {
  background-color: var(--gray);
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: 0px 0px 10px rgba(var(--black-rgb), 0.15);
  display: flex;
  font-size: 12px;
  padding: 0.5rem 0.65rem;
  text-decoration: none;
}

.notify-item.active {
  background-color: var(--cyan);
}

.notify-item:hover {
  border-color: var(--lavender-100);
}

.notify-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.notify-header-active {
  color: var(--light-blue);
}

.notify-shadow {
  background-color: rgba(var(--black-rgb), 0.7);
  display: none;
  height: calc(100% - 150px);
  left: 0;
  position: fixed;
  top: 150px;
  width: 100%;
  z-index: 14;
}

.notify-shadow.active {
  display: block;
}

@media (min-width: 992px) {
  .notify-shadow.active {
    display: none;
  }
}