/* ---------- COLORS  ---------- */
/* ---------- FONTS  ---------- */
.side-notifications-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 7, 38, 0.16);
  z-index: 1011;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: all 400ms;
}
.side-notifications-wrap .side-notifications {
  width: 100%;
  max-width: 400px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(27, 36, 44, 0.1215686275);
  transform: translateX(400px);
  transition: all 400ms;
}
.side-notifications-wrap .side-notifications__header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #DADEE5;
  padding-left: 24px;
}
@media only screen and (max-width: 580px) {
  .side-notifications-wrap .side-notifications__header {
    flex-wrap: wrap;
    padding-left: 0;
  }
}
.side-notifications-wrap .side-notifications__header .heading-h6 {
  margin-right: 20px;
  padding: 14px 0;
}
@media only screen and (max-width: 580px) {
  .side-notifications-wrap .side-notifications__header .heading-h6 {
    margin-right: 0px;
    flex: 1;
    padding-left: 24px;
    order: 1;
    border-bottom: 1px solid #DADEE5;
  }
}
.side-notifications-wrap .side-notifications__header .toggle {
  padding: 14px 0;
}
@media only screen and (max-width: 580px) {
  .side-notifications-wrap .side-notifications__header .toggle {
    order: 3;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}
.side-notifications-wrap .side-notifications__header__close {
  padding: 14px;
  border-left: 1px solid #DADEE5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 52px;
  margin-left: auto;
}
@media only screen and (max-width: 580px) {
  .side-notifications-wrap .side-notifications__header__close {
    order: 2;
    border-bottom: 1px solid #DADEE5;
    padding: 11px 14px;
  }
}
.side-notifications-wrap .side-notifications__header__close img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  object-position: center;
}
.side-notifications-wrap .side-notifications__main-content {
  padding: 12px 16px 24px 24px;
  overflow: auto;
  height: calc(100% - 53px);
}
.side-notifications-wrap .side-notifications__main-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.side-notifications-wrap .side-notifications__main-content__header > span {
  font-size: 10px;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.side-notifications-wrap .side-notifications__main-content__one-notification {
  padding: 4px 7px 7px 12px;
  background: #F8F9FC;
  border-radius: 7px;
  position: relative;
  margin-bottom: 18px;
}
.side-notifications-wrap .side-notifications__main-content__one-notification:last-of-type {
  margin-bottom: 0px;
}
.side-notifications-wrap .side-notifications__main-content__one-notification > span {
  font-size: 12px;
  line-height: 1.33em;
  font-weight: 500;
  display: block;
}
.side-notifications-wrap .side-notifications__main-content__one-notification .heading-h6 {
  margin-bottom: 8px;
}
.side-notifications-wrap .side-notifications__main-content__one-notification.unread-notification:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #1864F2;
  position: absolute;
  top: 8px;
  right: 15px;
}
.side-notifications-wrap.active {
  opacity: 1;
  visibility: visible;
}
.side-notifications-wrap.active .side-notifications {
  transform: translateX(0);
}

/*# sourceMappingURL=side-notifications.css.map */