/*---------------------------------
----- dimension variables --------
----------------------------------*/
/*------ standard elements padding & margin -------*/
/**
* mobile first breakpoints based on design specification 
* designs are delivered in 3 sizes mobile(375px -> default), tablet(768px -> tablet), desktop(1440px -> desktop-l)
*/
/**
** Official Font sizes
------------------------------- */
.uxn-notification-center {
  position: relative;
}
.uxn-notification-center__error-message {
  color: red;
}

.uxn-notification-center__notification-container,
.uxn-notification-center__error {
  padding-top: 50px;
}

.uxn-notification-center__error {
  text-align: center;
}

.uxn-notification-center__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 0;
  position: fixed;
  background: white;
  z-index: 50;
  width: 80%;
  pointer-events: none;
}
.uic-theme-responsive .uxn-notification-center__header {
  margin-bottom: 0;
  width: 280px;
}
@media only screen and (min-width: 1920px) {
  .uic-theme-responsive .uxn-notification-center__header {
    width: 340px;
  }
}
.uxn-notification-center__header > * {
  pointer-events: all;
}
@media only screen and (min-width: 1200px) {
  .uxn-notification-center__header {
    justify-content: flex-end;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) {
  .uxn-notification-center__header {
    width: 80%;
    justify-content: flex-end;
  }
}
.uxn-notification-center__header .uxn-notification-center__headline {
  margin: 0;
}
.uxn-notification-center__header .button-close {
  top: 0 !important;
  right: 0 !important;
}
@media only screen and (min-width: 768px) {
  .uxn-notification-center__header .button-close {
    display: none;
  }
}
.uxn-notification-center__header .ux-icon {
  font-size: 20px;
}

.uxn-notification-center__loading-ct {
  min-height: 150px;
}
.uxn-notification-center__loading-ct .ux-spinner-overlay__backdrop {
  background: none;
}

.uxn-notification-center__notification-cluster-item {
  padding: 30px 0;
  border-bottom: 1px solid #c4c4c4;
}
.uxn-notification-center__notification-cluster-item .uxn-notification-center__cluster-headline {
  margin-bottom: 20px;
  display: none;
}
.uxn-notification-center__notification-cluster-item:first-of-type .uxn-notification-center__cluster-headline {
  display: block;
}

.uxn-notification-center__cluster-container:first-of-type .uxn-notification-center__notification-cluster-item:first-of-type {
  padding-top: 0;
}

.uxn-notification-center__empty {
  text-align: center;
  padding-top: 40px;
}
.uxn-notification-center__empty .uxn-notification-center__empty-icon {
  font-size: 75px;
  opacity: 30%;
}
.uxn-notification-center__empty .uxn-notification-center__empty-info {
  margin-bottom: 0;
}

.uxn-notification-center__logged-out-container {
  display: flex;
  justify-content: center;
}

.uxn-notification-center__cta {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}