/*---------------------------------
----- 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
------------------------------- */
@keyframes background-shift {
  0% {
    background-position: -400px;
  }
  100% {
    background-position: 400px;
  }
}
.uxn-notification-settings .skeleton td::before {
  animation: background-shift 1000ms linear infinite forwards;
  background: #ddd;
  background-image: linear-gradient(to left, #ddd 0%, #f5f5f5 20%, #e5e5e5 40%, #ddd 100%);
  background-repeat: no-repeat;
  background-size: 400px;
  position: relative;
}
.uxn-notification-settings .skeleton {
  height: 54px;
}
.uxn-notification-settings .skeleton td {
  position: relative;
}
.uxn-notification-settings .skeleton td::before {
  content: "";
  position: absolute;
  inset: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  pointer-events: none;
}
.uxn-notification-settings .skeleton td.no-animation::before {
  background: #ddd;
  animation: none;
}
.uxn-notification-settings th .ux-icon,
.uxn-notification-settings td .ux-icon {
  margin-left: 5px;
  vertical-align: text-top;
}
.uxn-notification-settings th .ux-tooltip,
.uxn-notification-settings td .ux-tooltip {
  text-transform: none;
}
.uxn-notification-settings .ux-button-group-spacing {
  display: flex;
  gap: 0 10px;
  align-items: center;
}
.uxn-notification-settings .asset-table-container {
  height: auto;
  max-height: 50vh;
  overflow-y: auto;
  /* hacky solution to center ux-checkbox inside the first table column (conventional centering fails because the ui.lib does not correctly remove empty labels on ux-checkbox) */
  /* hacky solution to move ux-icon closer to it's parent ux-checkbox (default distance to big because the ui.lib does not correctly remove empty labels on ux-checkbox) */
}
.uxn-notification-settings .asset-table-container table th:first-child > *:first-child,
.uxn-notification-settings .asset-table-container table td:first-child > *:first-child {
  margin-left: calc((100% - 20px) / 2); /* 20px is width of checkbox */
}
.uxn-notification-settings .asset-table-container table th ux-checkbox ux-icon {
  margin-left: -4px;
}