@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
.pagination-bar {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  align-items: baseline;
  color: #0a1325;
}
.pagination-bar .paging-status {
  padding: 0 8px 0;
}
.pagination-bar .pagination-button {
  padding: 6px;
  color: var(--gray-darker, #222222);
  border-color: transparent;
  background-color: transparent;
}
.pagination-bar .pagination-button:hover {
  color: var(--brand-primary, #0595DB);
  border-color: transparent;
  background-color: transparent;
}
.pagination-bar .pagination-button:disabled {
  border-color: transparent;
  background-color: transparent;
}
.pagination-bar .pagination-button:focus:not(:focus-visible) {
  outline: none;
}
.pagination-bar .pagination-button:focus-visible {
  outline: 1px solid var(--brand-primary, #0595DB);
}
.pagination-bar .pagination-icon {
  position: relative;
  top: 4px;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.widget-datagrid-export-alert {
  background-color: var(--bg-color-secondary, #F5F8FD);
  border-radius: 4px;
  box-shadow: var(--export-alert-box-shadow, 0px 4px 4px 0px rgba(0, 0, 0, 0.25));
  display: flex;
  flex-direction: column;
  padding: 54px;
  min-width: 200px;
  max-width: 378px;
  width: 100%;
  position: relative;
}
.widget-datagrid-export-alert-cancel {
  position: absolute;
  top: 10px;
  right: 10px;
}
.widget-datagrid-export-alert-cancel.btn {
  display: flex;
  padding: 4px;
}
.widget-datagrid-export-alert-cancel.btn:focus-visible {
  outline: 1px solid var(--brand-primary, #0595DB);
}
.widget-datagrid-export-alert-message {
  color: var(--brand-primary, #0595DB);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.widget-datagrid-export-alert-failed .widget-datagrid-export-progress-indicator {
  background-color: var(--brand-danger, #ED1C24);
}

.widget-datagrid-export-progress {
  align-items: center;
  background-color: var(--color-default-lighter, rgb(250.1, 250.3, 250.6));
  border-radius: 4px;
  display: flex;
  height: 18px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 100%;
}
.widget-datagrid-export-progress-indicator {
  background-color: var(--brand-primary, #0595DB);
  border-radius: 4px;
  height: 17px;
  transition: transform 100ms cubic-bezier(0.65, 0, 0.35, 1);
  width: 100%;
}
.widget-datagrid-export-progress-indicator-indeterminate {
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
  transition: none;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}
.widget-datagrid-modal-overlay {
  animation: fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--shadow-color, rgba(206, 208, 211, 0.66));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
}
.widget-datagrid-modal-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 55;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.table {
  position: relative;
  border-width: 0;
  background-color: var(--bg-color-secondary, #F5F8FD);
  /* Pseudo Row, to target this object please use .tr > .td or .tr > div */
  /* Column Header */
  /* If Column Header has filter */
  /* Column selector for hidable columns */
  /* Column content */
}
.table .tr {
  display: contents;
}
:where(.widget-datagrid-grid .th) {
  display: flex;
  align-items: flex-start;
  background-color: var(--bg-color-secondary, #F5F8FD);
  border-width: 0;
  border-color: var(--grid-border-color, #ced0d3);
  padding: var(--spacing-medium, 16px);
  top: 0;
  min-width: 0;
  position: relative;
}

.table .th {
  /* Clickable column header (Sortable) */
  /* Column resizer when column is resizable */
  /* Content of the column header */
  /* Header text */
  /* Header filter */
}
.table .th.dragging {
  opacity: 0.5;
}
.table .th.dragging.dragging-over-self {
  opacity: 0.8;
}
.table .th.drop-after:after, .table .th.drop-before:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--spacing-smaller, 4px);
  background-color: var(--dragging-color-effect, rgba(10, 19, 37, 0.8));
  z-index: 1;
}
.table .th.drop-before:after {
  left: 0;
}
.table .th.drop-before:not(:first-child):after {
  transform: translateX(-50%);
}
.table .th.drop-after:after {
  right: 0;
}
.table .th.drop-after:not(:last-child):after {
  transform: translateX(50%);
}
.table .th .clickable {
  cursor: pointer;
}
.table .th .column-resizer {
  padding: 0 4px;
  align-self: stretch;
  cursor: col-resize;
  margin-right: -12px;
}
.table .th .column-resizer:hover .column-resizer-bar {
  background-color: var(--brand-primary, #0595DB);
}
.table .th .column-resizer:active .column-resizer-bar {
  background-color: var(--brand-primary, #0595DB);
}
.table .th .column-resizer .column-resizer-bar {
  height: 100%;
  width: 4px;
}
.table .th .column-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: stretch;
  min-width: 0;
}
.table .th .column-container:not(:has(.filter)) .column-header {
  height: 100%;
}
.table .th .column-header {
  margin: 1px 1px calc(-1 * var(--spacing-smaller, 4px) + 2px);
  display: flex;
  align-items: baseline;
  font-weight: 600;
}
.table .th .column-header span {
  min-width: 0;
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
  align-self: center;
}
.table .th .column-header svg {
  margin-left: 8px;
  flex: 0 0 var(--btn-font-size, 14px);
  color: var(--gray-dark, #333333);
  height: var(--btn-font-size, 14px);
  align-self: center;
  z-index: 1;
}
.table .th .column-header:focus:not(:focus-visible) {
  outline: none;
}
.table .th .column-header:focus-visible {
  outline: 1px solid var(--brand-primary, #0595DB);
}
.table .th .filter {
  display: flex;
  margin-top: 4px;
}
.table .th .filter > .form-group {
  margin-bottom: 0;
}
.table:has(.th .column-container .filter:not(:empty)) .th {
  /*adjust filter-selector icon to be mid-bottom aligned */
  /*adjust checkbox toggle to be mid-bottom aligned */
}
.table:has(.th .column-container .filter:not(:empty)) .th.column-selector {
  padding: var(--spacing-medium, 16px) 0;
}
.table:has(.th .column-container .filter:not(:empty)) .th .column-selector-content {
  align-self: flex-end;
  margin-bottom: 3px;
}
.table:has(.th .column-container .filter:not(:empty)) .th.widget-datagrid-col-select {
  align-items: flex-end;
  padding-bottom: calc(var(--spacing-medium, 16px) + 11px);
}
.table .column-selector {
  padding: 0;
  /* Column content */
}
.table .column-selector .column-selector-content {
  align-self: center;
  padding-right: var(--spacing-medium, 16px);
  /* Button containing the eye icon */
  /* List of columns to select */
}
.table .column-selector .column-selector-content .column-selector-button {
  /* 2px as path of icon's path is a bit bigger than outer svg */
  padding: 0;
  margin: 0;
  height: calc(var(--btn-font-size, 14px) + 14px + 2px);
  width: calc(var(--btn-font-size, 14px) + 14px + 2px);
}
.table .column-selector .column-selector-content .column-selector-button svg {
  margin: 7px;
}
.table .column-selector .column-selector-content .column-selectors {
  position: absolute;
  right: 0;
  margin: 8px;
  padding: 0 16px;
  background: var(--bg-color-secondary, #F5F8FD);
  z-index: 102;
  overflow-y: auto;
  width: fit-content;
  max-width: 500px;
  border-radius: 3px;
  border: 1px solid transparent;
  list-style-type: none;
  -webkit-box-shadow: 0 2px 20px 1px rgba(32, 43, 54, 0.08);
  -moz-box-shadow: 0 2px 20px 1px rgba(32, 43, 54, 0.08);
  box-shadow: 0 2px 20px 1px rgba(32, 43, 54, 0.08);
}
.table .column-selector .column-selector-content .column-selectors li {
  display: flex;
  align-items: center;
}
.table .column-selector .column-selector-content .column-selectors li label {
  margin: 8px;
  font-weight: normal;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.table .td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-medium, 16px);
  border-style: solid;
  border-width: 0;
  border-color: var(--grid-border-color, #ced0d3);
  border-bottom-width: 1px;
  min-width: 0;
}
.table .td.td-borders {
  border-top-width: 1px;
  border-top-style: solid;
}
.table .td:focus-visible {
  outline-width: 1px;
  outline-style: solid;
  outline-offset: -1px;
  outline-color: var(--brand-primary, #0595DB);
}
.table .td.clickable {
  cursor: pointer;
}
.table .td > .td-text {
  white-space: nowrap;
  word-break: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}
.table .td > .td-custom-content {
  flex-grow: 1;
  min-width: 0;
}
.table .td > .empty-placeholder {
  width: 100%;
}
.table .td.wrap-text {
  min-height: 0;
  min-width: 0;
}
.table .td.wrap-text > .td-text,
.table .td.wrap-text > .mx-text {
  white-space: normal;
}
.table *:focus {
  outline: 0;
}
.table .align-column-left {
  justify-content: flex-start;
}
.table .align-column-center {
  justify-content: center;
}
.table .align-column-right {
  justify-content: flex-end;
}

:where(.table .th .filter input:not([type=checkbox])) {
  font-weight: normal;
  flex-grow: 1;
  width: 100%;
}

/* Column selector for hidable columns outside DG context */
/* List of columns to select */
.column-selectors {
  position: absolute;
  right: 0;
  margin: 8px 0;
  padding: 0 16px;
  background: var(--bg-color-secondary, #F5F8FD);
  z-index: 102;
  overflow-y: auto;
  width: fit-content;
  max-width: 500px;
  border-radius: 3px;
  border: 1px solid transparent;
  list-style-type: none;
  -webkit-box-shadow: 0 2px 20px 1px rgba(32, 43, 54, 0.08);
  -moz-box-shadow: 0 2px 20px 1px rgba(32, 43, 54, 0.08);
  box-shadow: 0 2px 20px 1px rgba(32, 43, 54, 0.08);
}
.column-selectors li {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.column-selectors li label {
  margin: 8px;
  font-weight: normal;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.widget-datagrid {
  position: relative;
}
.widget-datagrid-grid-head, .widget-datagrid-grid-body {
  display: contents;
}
.widget-datagrid-grid.table {
  display: grid !important;
  grid-template-columns: var(--widgets-grid-template-columns);
  min-width: fit-content;
  margin-bottom: 0;
}
.widget-datagrid-grid.table.infinite-loading {
  min-width: 0;
}
.widget-datagrid-top-bar {
  container: widget-datagrid-header/inline-size;
}
.widget-datagrid-content {
  overflow-x: auto;
}
.widget-datagrid-footer {
  container: widget-datagrid-footer/inline-size;
}
.widget-datagrid.widget-datagrid-selection-method-click .tr.tr-selected .td {
  background-color: var(--grid-selected-row-background, #e6eaff);
}
.widget-datagrid .th.widget-datagrid-col-select,
.widget-datagrid .td.widget-datagrid-col-select {
  align-items: center;
}
.widget-datagrid-exporting .widget-datagrid-top-bar,
.widget-datagrid-exporting .widget-datagrid-header,
.widget-datagrid-exporting .widget-datagrid-content,
.widget-datagrid-exporting .widget-datagrid-footer, .widget-datagrid-selecting-all-pages .widget-datagrid-top-bar,
.widget-datagrid-selecting-all-pages .widget-datagrid-header,
.widget-datagrid-selecting-all-pages .widget-datagrid-content,
.widget-datagrid-selecting-all-pages .widget-datagrid-footer {
  visibility: hidden;
}
.widget-datagrid-exporting .widget-datagrid-top-bar *,
.widget-datagrid-exporting .widget-datagrid-header *,
.widget-datagrid-exporting .widget-datagrid-content *,
.widget-datagrid-exporting .widget-datagrid-footer *, .widget-datagrid-selecting-all-pages .widget-datagrid-top-bar *,
.widget-datagrid-selecting-all-pages .widget-datagrid-header *,
.widget-datagrid-selecting-all-pages .widget-datagrid-content *,
.widget-datagrid-selecting-all-pages .widget-datagrid-footer * {
  transition: unset;
}
.widget-datagrid-col-select input:focus-visible {
  outline-offset: 0;
}
.widget-datagrid-loader-container {
  align-items: center;
  background-color: var(--bg-color-secondary, #F5F8FD);
  display: flex;
  height: 400px;
  justify-content: center;
  grid-column: 1/-1;
}
.widget-datagrid-skeleton, .widget-datagrid-spinner {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}
.widget-datagrid-skeleton {
  padding: 2px var(--dropdown-outer-padding, 0);
  overflow: hidden;
  flex: 1;
}
.widget-datagrid-skeleton-loader {
  animation: skeleton-loading 1s linear infinite alternate;
  background: var(--skeleton-background, linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%));
  background-size: 300% 100%;
  border-radius: 4px;
  height: 16px;
  width: 100%;
  min-width: 32px;
  max-width: 148px;
}
.widget-datagrid-skeleton-loader-small {
  margin-right: 8px;
  width: 16px;
}
.widget-datagrid-spinner {
  justify-content: center;
  width: 100%;
}
.widget-datagrid-spinner-margin {
  margin: 52px 0;
}
.widget-datagrid-spinner-loader {
  --widget-combobox-spinner-loader: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  animation: rotate 1s infinite linear;
  aspect-ratio: 1;
  background: var(--brand-primary, #0595DB);
  border-radius: 50%;
  mask: var(--widget-combobox-spinner-loader);
  mask-composite: subtract;
}
.widget-datagrid-spinner-loader-large {
  height: 48px;
  padding: 7px;
  width: 48px;
}
.widget-datagrid-spinner-loader-medium {
  height: 24px;
  padding: 3.5px;
  width: 24px;
}
.widget-datagrid-spinner-loader-small {
  height: 16px;
  padding: 2.3px;
  width: 16px;
}

.widget-datagrid .widget-datagrid-load-more {
  display: block !important;
  margin: var(--spacing-small, 8px) 0;
}

.infinite-loading {
  max-height: var(--widgets-grid-table-height);
  overflow: auto;
}
.infinite-loading .widget-datagrid-grid-head .th {
  position: sticky;
  top: 0;
  z-index: 10;
}
.infinite-loading .widget-datagrid-grid-head .th:has([data-overlay-content]) {
  z-index: 20;
}
.infinite-loading[data-scrolled-y] .widget-datagrid-grid-head .th:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.widget-datagrid-content:has(.widget-datagrid-grid[data-scrolled-x]) {
  position: relative;
}
.widget-datagrid-content:has(.widget-datagrid-grid[data-scrolled-x]):after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 10;
  bottom: 0;
  top: 0;
  width: 5px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  pointer-events: none;
}

:where(.widget-datagrid-paging-bottom, .widget-datagrid-paging-top) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

:where(.widget-datagrid-pb-end, .widget-datagrid-tb-end) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:where(.widget-datagrid-pb-start, .widget-datagrid-tb-start, .widget-datagrid-pb-end, .widget-datagrid-tb-end, .widget-datagrid-pb-middle) {
  flex-grow: 1;
  flex-basis: 33.33%;
}

:where(.widget-datagrid-pb-middle) {
  display: flex;
  justify-content: center;
}

:where(.widget-datagrid-pb-start, .widget-datagrid-tb-start) {
  display: flex;
  align-items: center;
}

.widget-datagrid-btn-link {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--link-color);
  padding: 0.3em 0.5em;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}
.widget-datagrid-btn-link:hover, .widget-datagrid-btn-link:focus-visible {
  background-color: var(--brand-primary-50, rgb(250.1, 250.3, 250.6));
}

:where(.widget-datagrid-selection-counter) {
  display: flex;
  align-items: center;
  height: 54px;
  padding: var(--spacing-small) var(--spacing-medium);
}

:where(.widget-datagrid-select-all-bar) {
  grid-column: 1/-1;
  background-color: var(--bg-color, #FFFFFF);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: var(--spacing-smaller, 8px) var(--spacing-medium, 16px);
}
:where(.widget-datagrid-select-all-bar) .widget-datagrid-spinner {
  padding: 6.2px;
}

@keyframes skeleton-loading {
  0% {
    background-position: right;
  }
}
@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
@container widget-datagrid-footer (width < 500px) {
  .widget-datagrid-paging-bottom {
    flex-direction: column;
  }
  .widget-datagrid-paging-bottom :where(.widget-datagrid-pb-start, .widget-datagrid-pb-end, .widget-datagrid-pb-middle) {
    width: 100%;
    justify-content: center;
  }
}
@container widget-datagrid-header (width < 500px) {
  .widget-datagrid-padding-top {
    flex-direction: column-reverse;
  }
  .widget-datagrid-padding-top :where(.widget-datagrid-tb-start, .widget-datagrid-tb-end) {
    width: 100%;
    justify-content: center;
  }
}
.widget-datagrid [data-overlay-content] {
  z-index: 15;
}

/**
    Classes for React Date-Picker font-unit and color adjustments
*/
.react-datepicker {
  font-size: 1em;
  border: 1px solid var(--border-color-default, #D7D7D7);
}

.react-datepicker-wrapper {
  display: flex;
  flex: 1;
}

.react-datepicker__input-container {
  display: flex;
  flex: 1;
}

.react-datepicker__header {
  padding-top: 0.8em;
  background-color: var(--bg-color, #FFFFFF);
  border-color: transparent;
}

.react-datepicker__header__dropdown {
  margin: 8px 0 4px 0;
}

.react-datepicker__year-dropdown-container {
  margin-left: 8px;
}

.react-datepicker__month {
  margin: 4px 4px 8px 4px;
}

.react-datepicker__month-container {
  font-weight: normal;
}

.react-datepicker__day-name,
.react-datepicker__day {
  width: 2em;
  line-height: 2em;
  margin: 4px;
}

.react-datepicker__day,
.react-datepicker__day--in-range {
  color: var(--dg-day-color, #555);
  border-radius: 50%;
}
.react-datepicker__day:hover,
.react-datepicker__day--in-range:hover {
  border-radius: 50%;
  color: var(--brand-primary, #0595DB);
  background-color: var(--gray-lighter, #EEEEEE);
}

.react-datepicker__day-name {
  color: var(--brand-primary, #0595DB);
  font-weight: bold;
}

.react-datepicker__day--outside-month {
  color: var(--dg-outside-month-color, #c8c8c8);
}

.react-datepicker__day--today:not(.react-datepicker__day--in-range),
.react-datepicker__day--keyboard-selected {
  color: var(--brand-primary, #0595DB);
  background-color: var(--gray-lighter, #EEEEEE);
}

.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__navigation:focus-visible,
.react-datepicker__day.react-datepicker__day--keyboard-selected {
  outline: 1px solid var(--form-input-border-focus-color);
}

.react-datepicker__day--selected,
.react-datepicker__day--range-start,
.react-datepicker__day--range-end,
.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
  background-color: var(--brand-primary, #0595DB);
  color: var(--header-text-color, #fff);
}
.react-datepicker__day--selected:hover,
.react-datepicker__day--range-start:hover,
.react-datepicker__day--range-end:hover,
.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start:hover {
  border-radius: 50%;
  background-color: var(--brand-primary, #0595DB);
  color: var(--header-text-color, #fff);
}

.react-datepicker__day--in-range:not(.react-datepicker__day--range-start, .react-datepicker__day--range-end),
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range,
.react-datepicker__day--selecting-range-start) {
  background-color: var(--dg-day-range-background, #eaeaea);
  color: var(--dg-day-range-color, #000);
}
.react-datepicker__day--in-range:not(.react-datepicker__day--range-start, .react-datepicker__day--range-end):hover,
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range,
.react-datepicker__day--selecting-range-start):hover {
  background-color: var(--brand-primary, #0595DB);
  color: var(--header-text-color, #fff);
}

button.react-datepicker__close-icon::after {
  background-color: var(--brand-primary, #0595DB);
}

.react-datepicker__current-month {
  font-size: 1em;
  font-weight: normal;
}

.react-datepicker__navigation {
  top: 1em;
  line-height: 1.7em;
  border: 0.45em solid transparent;
}

.react-datepicker__navigation--previous {
  border-right-color: var(--datepicker-border-color, #ccc);
  left: 8px;
  border: none;
}

.react-datepicker__navigation--next {
  border-left-color: var(--datepicker-border-color, #ccc);
  right: 8px;
  border: none;
}

/**
Space between the fields and the popup
 */
.react-datepicker-popper[data-placement^=bottom] {
  margin-top: unset;
  padding-top: 0;
}

@font-face {
  font-family: "datagrid-filters";
  src: url("./fonts/datagrid-filters.eot");
  src: url("./fonts/datagrid-filters.eot") format("embedded-opentype"), url("./fonts/datagrid-filters.woff2") format("woff2"), url("./fonts/datagrid-filters.woff") format("woff"), url("./fonts/datagrid-filters.ttf") format("truetype"), url("./fonts/datagrid-filters.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.filter-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.filter-container .filter-input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.filter-container .btn-calendar {
  margin-inline-start: 5px;
}
.filter-container .btn-calendar .button-icon {
  width: 18px;
  height: 18px;
}

.filter-selector {
  padding-left: 0;
  padding-right: 0;
}
.filter-selector .filter-selector-content {
  height: 100%;
  align-self: flex-end;
}
.filter-selector .filter-selector-content .filter-selector-button {
  padding: 8px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: none;
  height: 100%;
}
.filter-selector .filter-selector-content .filter-selector-button:before {
  justify-content: center;
  width: 20px;
  height: 20px;
  padding-inline-start: 4px; /* The font has spaces in the right side, so to align in the middle we need this */
}

.filter-selectors {
  position: absolute;
  width: max-content;
  left: 0;
  padding: 0;
  margin: 0;
  background: var(--bg-color-secondary, #F5F8FD);
  z-index: 51;
  border-radius: 8px;
  list-style-type: none;
  box-shadow: var(--wdf-filter-box-shadow, 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08));
  overflow: hidden;
}
.filter-selectors .filter-listitem,
.filter-selectors li {
  display: flex;
  align-items: center;
  font-weight: normal;
  line-height: 32px;
  cursor: pointer;
}
.filter-selectors .filter-listitem .filter-label,
.filter-selectors li .filter-label {
  padding-right: 8px;
}
.filter-selectors .filter-listitem.filter-selected,
.filter-selectors li.filter-selected {
  background-color: var(--gray-lighter, #EEEEEE);
  color: var(--brand-primary, #0595DB);
}
.filter-selectors .filter-listitem:hover, .filter-selectors .filter-listitem.filter-highlighted,
.filter-selectors li:hover,
.filter-selectors li.filter-highlighted {
  background-color: var(--gray-lighter, #EEEEEE);
}

.dropdown-list {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
}
.dropdown-list li {
  display: flex;
  align-items: center;
  font-weight: normal;
  min-height: var(--spacing-larger, 32px);
  cursor: pointer;
  padding: 0 var(--spacing-small, 8px);
}
.dropdown-list li .filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-list li.filter-selected {
  background-color: var(--gray-lighter, #EEEEEE);
  color: var(--brand-primary, #0595DB);
}
.dropdown-list li:hover, .dropdown-list li:focus {
  background-color: var(--gray-lighter, #EEEEEE);
}
.dropdown-list li label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 8px;
  font-weight: normal;
  width: calc(100% - 32px);
}

:not(.dropdown-content) > .dropdown-list {
  background: var(--bg-color-secondary, #F5F8FD);
  border-radius: 8px;
  box-shadow: var(--wdf-filter-box-shadow, 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08));
  max-height: 40vh;
  z-index: 102;
}

.dropdown-content {
  background: var(--bg-color-secondary, #F5F8FD);
  border-radius: 8px;
  box-shadow: var(--wdf-filter-box-shadow, 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08));
  max-height: 40vh;
  z-index: 140;
}

.dropdown-footer {
  position: sticky;
  bottom: 0;
  background: inherit;
  z-index: 50;
}

.dropdown-footer-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 0 var(--spacing-small, 8px);
  min-height: 40px;
}

.dropdown-loading {
  flex-grow: 1;
  text-align: center;
}

.dropdown-container {
  flex: 1;
  position: relative;
}
.dropdown-container .dropdown-triggerer {
  caret-color: transparent;
  cursor: pointer;
  background-image: url("resources/dropdown-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: right;
  background-position-y: center;
  background-origin: content-box;
  text-overflow: ellipsis;
  width: 100%;
}
.dropdown-container .dropdown-list {
  left: 0;
  margin: 0 var(--spacing-small, 8px);
  padding: 0;
  background: var(--bg-color-secondary, #F5F8FD);
  z-index: 102;
  border-radius: 8px;
  list-style-type: none;
  box-shadow: var(--wdf-filter-box-shadow, 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08));
  overflow-x: hidden;
  max-height: 40vh;
}
.dropdown-container .dropdown-list li {
  display: flex;
  align-items: center;
  font-weight: normal;
  min-height: var(--spacing-larger, 32px);
  cursor: pointer;
  padding: 0 var(--spacing-small, 8px);
}
.dropdown-container .dropdown-list li .filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-container .dropdown-list li.filter-selected {
  background-color: var(--gray-lighter, #EEEEEE);
  color: var(--brand-primary, #0595DB);
}
.dropdown-container .dropdown-list li:hover, .dropdown-container .dropdown-list li:focus {
  background-color: var(--gray-lighter, #EEEEEE);
}
.dropdown-container .dropdown-list li label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 8px;
  font-weight: normal;
  width: calc(100% - 32px);
}

/**
Icons
 */
.filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  margin: 6px 8px;
  font-family: "datagrid-filters";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "datagrid-filters";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.contains:before {
  content: "\e808";
}

.endsWith:before {
  content: "\e806";
}

.equal:before {
  content: "\e809";
}

.greater:before {
  content: "\e80a";
}

.greaterEqual:before {
  content: "\e80b";
}

.notEqual:before {
  content: "\e80c";
}

.smaller:before {
  content: "\e80d";
}

.smallerEqual:before {
  content: "\e80e";
}

.startsWith:before {
  content: "\e807";
}

.between:before {
  content: "\e900";
}

.empty:before {
  content: "\e901";
}

.notEmpty:before {
  content: "\e903";
}

/**
* Specific styles for filters inside Data Grid 2
**/
div:not(.table-compact) > .table .th .filter-selector .filter-selectors {
  margin: 0;
}
div:not(.table-compact) > .table .th .dropdown-container .dropdown-list {
  margin: 0;
}

.widget-dropdown-filter {
  --wdf-outer-spacing: var(--dropdown-outer-spacing, 10px);
  --wdf-spacing: var(--spacing-smaller, 4px);
  --wdf-spacing-tiny: var(--spacing-smallest, 2px);
  --wdf-popover-spacing: 0;
  --wdf-popover-z-index: 50;
  --wdf-popover-shadow: 0px 0px var(--wdf-outer-spacing) 0px var(--shadow-color-border, rgba(0, 0, 0, 0.2));
  --wdf-bd-radius: var(--dropdown-border-radius, 7px);
  --wdf-menu-bg-color: var(--label-info-color, $color-base);
  --wdf-menu-max-height: var(--dropdown-menu-max-height, 320px);
  --wdf-menu-item-padding: 6px 10px;
  --wdf-highlighted-bg-color: var(--color-default-light, $color-default-light);
  --wdf-selected-bg-color: var(--color-primary-lighter, $color-primary-lighter);
  --wdf-button-spacing: 8px;
  --wdf-color: var(--font-color-default, $gray-dark);
  --wdf-state-icon-size: 16px;
  --wdf-toggle-width: calc(4px + var(--wdf-state-icon-size) + var(--wdf-button-spacing));
  --wdf-toggle-inline-end: var(--wdf-toggle-width);
  --wdf-clear-margin: var(--wdf-toggle-inline-end);
  --wdf-clear-inline-spacing: 6px;
  --wdf-clear-border-width: 1px;
  --wdf-clear-width: calc(14px + (var(--wdf-clear-inline-spacing) * 2) + var(--wdf-clear-border-width));
  --wdf-toggle-inline-end-clearable: calc(var(--wdf-clear-width) + var(--wdf-toggle-inline-end));
  --wdf-tag-padding: var(--wdf-spacing-tiny) var(--dropdown-outer-spacing, 10px);
}
.widget-dropdown-filter.form-control {
  display: flex;
  min-width: 65px;
  padding-block: var(--wdf-button-spacing);
  padding-inline-end: var(--wdf-button-spacing);
  padding-inline-start: var(--wdf-button-spacing);
}
.widget-dropdown-filter-popover {
  z-index: var(--wdf-popover-z-index);
  box-shadow: var(--wdf-popover-shadow);
  margin-top: var(--wdf-spacing);
  border-radius: var(--wdf-bd-radius);
}
.widget-dropdown-filter-menu-slot {
  border-radius: inherit;
  background-color: var(--wdf-menu-bg-color);
}
.widget-dropdown-filter-menu {
  background: var(--scroll-shadow, linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center top, linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center bottom);
  background-repeat: no-repeat;
  background-size: 100% 70px, 100% 70px, 100% 35px, 100% 35px;
  background-attachment: local, local, scroll, scroll;
  border-radius: inherit;
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-height: var(--wdf-menu-max-height);
  overflow-y: auto;
}
.widget-dropdown-filter-menu-item {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: var(--wdf-menu-item-padding);
  height: fit-content;
  overflow: hidden;
  font-weight: normal;
  color: var(--wdf-color);
}
.widget-dropdown-filter-menu-item:where([data-selected]) {
  background-color: var(--wdf-selected-bg-color);
}
.widget-dropdown-filter-menu-item:where([data-highlighted]) {
  background-color: var(--wdf-highlighted-bg-color);
}
.widget-dropdown-filter-menu-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-dropdown-filter-checkbox-slot {
  display: flex;
  margin-inline-end: var(--wdf-outer-spacing);
}
.widget-dropdown-filter-input {
  border: none;
  flex: 1;
  margin: 0;
  min-width: 50px;
  padding: 0;
}
.widget-dropdown-filter-toggle, .widget-dropdown-filter-clear {
  background-color: transparent;
  border: none;
}
.widget-dropdown-filter-input, .widget-dropdown-filter-toggle {
  color: var(--wdf-color);
  font-weight: normal;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-dropdown-filter-clear {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-self: end;
  margin-inline-end: var(--wdf-spacing);
  padding: 3px 6px;
  position: relative;
}
.widget-dropdown-filter-clear path {
  stroke-width: 0;
}
.widget-dropdown-filter-clear:hover {
  color: var(--brand-primary, #0595DB);
}
.widget-dropdown-filter-clear:hover path {
  stroke-width: 1px;
}
.widget-dropdown-filter-clear:has(+ .widget-dropdown-filter-state-icon), .widget-dropdown-filter-clear:has(+ .widget-dropdown-filter-toggle) {
  border-inline-end: 1px solid var(--gray, #787d87);
}
.widget-dropdown-filter-clear:focus-visible {
  outline-offset: -2px;
  outline: var(--brand-primary, #0595DB) solid 1px;
}
.widget-dropdown-filter-state-icon {
  transition: transform 0.2s;
}
:where(.widget-dropdown-filter[data-expanded=true]) .widget-dropdown-filter-state-icon {
  transform: rotate(180deg);
}
.widget-dropdown-filter-input-container {
  align-items: center;
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.widget-dropdown-filter-remove-icon {
  cursor: pointer;
  display: flex;
}
.widget-dropdown-filter-remove-icon path {
  stroke-width: 0;
}
.widget-dropdown-filter-remove-icon:hover {
  color: var(--brand-primary, #0595DB);
}
.widget-dropdown-filter-remove-icon:hover path {
  stroke-width: 1px;
}
.widget-dropdown-filter-separator {
  position: absolute;
  margin-inline-end: var(--wdf-clear-margin);
  background-color: var(--gray, #787d87);
  justify-self: end;
  inset-block: var(--wdf-button-spacing);
  width: 1px;
}
.widget-dropdown-filter-state-icon, .widget-dropdown-filter-toggle {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

:where([data-highlighted]) .widget-dropdown-filter-checkbox:not(:checked)::after {
  content: "";
  border-color: var(--form-input-bg-hover, #e7e7e9);
}

/* Select variant */
:where(.widget-dropdown-filter.variant-select) .widget-dropdown-filter-toggle {
  display: block;
  flex: 1 1 0;
  justify-content: flex-start;
  min-width: 0;
}
:where(.widget-dropdown-filter.variant-select) .widget-dropdown-filter-state-icon {
  align-self: center;
  box-sizing: content-box;
  justify-self: end;
  pointer-events: none;
}
:where(.widget-dropdown-filter.variant-select) .widget-dropdown-filter-input-container {
  border: none;
  background-color: transparent;
  white-space: nowrap;
  width: 100%;
}
:where(.widget-dropdown-filter.variant-select) .widget-dropdown-filter-controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

:where(.widget-dropdown-filter.variant-select[data-empty]) {
  --wdf-input-placeholder-color: var(--form-input-placeholder-color, $form-input-placeholder-color);
}
:where(.widget-dropdown-filter.variant-select[data-empty]) .widget-dropdown-filter-toggle {
  color: var(--wdf-input-placeholder-color);
}

/* Combobox variant */
:where(.widget-dropdown-filter.variant-combobox) .widget-dropdown-filter-input {
  border-radius: inherit;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

/* Tag Picker variant */
:where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-selected-item {
  align-items: center;
  background-color: var(--color-primary-lighter, rgb(233.3, 236.9, 252.4));
  border-radius: 26px;
  color: var(--wdf-color);
  display: inline-flex;
  flex-flow: row nowrap;
  font-size: var(--font-size-small, 12px);
  gap: 8px;
  justify-content: center;
  line-height: 1.334;
  padding: var(--wdf-tag-padding);
  margin: var(--spacing-smallest, 2px);
}
:where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-selected-item:focus-visible {
  outline: var(--brand-primary, #0595DB) auto 1px;
}
:where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-selected-item:focus {
  background-color: var(--color-primary-light, rgb(211.6, 218.8, 249.8));
}
:where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-input {
  flex-basis: 0;
  min-width: 50px;
  width: initial;
}
:where(.widget-dropdown-filter.variant-tag-picker):not(:focus-within):not([data-empty]) .widget-dropdown-filter-input {
  opacity: 0;
  flex-shrink: 1;
  min-width: 1px;
}
:where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-clear {
  border-color: transparent;
}

/* Tag Picker variant text */
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-selected-item {
  background-color: transparent;
  border-radius: 2px;
  color: var(--wdf-color);
  display: block;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 0;
}
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-selected-item-hidden {
  display: none;
}
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-selected-item:focus-visible {
  outline: var(--brand-primary, #0595DB) solid 1px;
  outline-offset: 2px;
}
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-remove-icon {
  padding: var(--wdf-spacing-tiny);
  border-radius: 50%;
}
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-remove-icon path {
  stroke-width: 1px;
}
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-input {
  background-color: transparent;
  min-width: 75px;
  opacity: 0;
  width: 100%;
  z-index: 1;
}
:where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-input:focus, :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-input:not(:has(+ .widget-dropdown-filter-selected-item)) {
  opacity: 1;
}

.table-compact .th {
  padding: var(--spacing-small, 8px);
}
.table-compact .th .filter-selectors {
  margin: 0 var(--spacing-small, 8px);
}
.table-compact:has(.th .column-container .filter:not(:empty)) .th.column-selector {
  padding: var(--spacing-small, 8px) 0;
}
.table-compact:has(.th .column-container .filter:not(:empty)) .th.widget-datagrid-col-select {
  padding-bottom: calc(var(--spacing-small, 8px) + 11px);
}
.table-compact .td {
  padding: var(--spacing-small, 8px);
}
.table-compact .dropdown-container .dropdown-list {
  margin: 0 var(--spacing-small, 8px);
}
.table-compact .column-selector {
  /* Column content */
}
.table-compact .column-selector .column-selector-content {
  padding-right: var(--spacing-small, 8px);
}

.table-striped .tr:nth-child(odd) > .td {
  background-color: var(--grid-bg-striped, rgb(250.1, 250.3, 250.6));
}

.table-hover .tr:hover > .td {
  background-color: var(--grid-bg-hover, rgb(245.2, 245.6, 246.2));
}

.table-bordered-all .th,
.table-bordered-all .td {
  border-left-width: 1px;
  border-left-style: solid;
}
.table-bordered-all .th.column-selector,
.table-bordered-all .td.column-selector {
  border-left-width: 0;
}
.table-bordered-all .th:last-child, .table-bordered-all .th.column-selector,
.table-bordered-all .td:last-child,
.table-bordered-all .td.column-selector {
  border-right-width: 1px;
  border-right-style: solid;
}
.table-bordered-all .th {
  border-top-width: 1px;
  border-top-style: solid;
}
.table-bordered-all .td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.table-bordered-all .td.td-borders {
  border-top-width: 1px;
}

.table-bordered-horizontal .td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.table-bordered-horizontal .td.td-borders {
  border-top-width: 1px;
}

.table-bordered-vertical .th,
.table-bordered-vertical .td {
  border-left-width: 1px;
  border-left-style: solid;
  border-bottom-width: 0;
}
.table-bordered-vertical .th.column-selector,
.table-bordered-vertical .td.column-selector {
  border-left-width: 0;
  border-bottom-width: 0;
  border-right-width: 1px;
  border-right-style: solid;
}
.table-bordered-vertical .th.td-borders,
.table-bordered-vertical .td.td-borders {
  border-top-width: 0;
}

.table-bordered-none .td,
.table-bordered-none .th {
  border: 0;
}
.table-bordered-none .td.column-selector,
.table-bordered-none .th.column-selector {
  border: 0;
}
.table-bordered-none .td.td-borders,
.table-bordered-none .th.td-borders {
  border: 0;
}

/* ==========================================================================
  Drop-down sort

  Override styles of Drop-down sort widget
========================================================================== */
@font-face {
  font-family: "dropdown-sort";
  src: url("./fonts/dropdown-sort.eot?46260688");
  src: url("./fonts/dropdown-sort.eot?46260688#iefix") format("embedded-opentype"), url("./fonts/dropdown-sort.woff2?46260688") format("woff2"), url("./fonts/dropdown-sort.woff?46260688") format("woff"), url("./fonts/dropdown-sort.ttf?46260688") format("truetype"), url("./fonts/dropdown-sort.svg?46260688#dropdown-sort") format("svg");
  font-weight: normal;
  font-style: normal;
}
.dropdown-triggerer-wrapper {
  display: flex;
}
.dropdown-triggerer-wrapper .dropdown-triggerer {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-width: 0;
}
.dropdown-triggerer-wrapper .btn-sort {
  padding: var(--spacing-small, 8px);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  font-family: "dropdown-sort";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dropdown-triggerer-wrapper .btn-sort.icon-asc:before {
  content: "\e802";
  margin: 2px;
}
.dropdown-triggerer-wrapper .btn-sort.icon-desc:before {
  content: "\e803";
  margin: 2px;
}

/* ==========================================================================
   Gallery

   Override styles of Gallery widget
========================================================================== */
.widget-gallery {
  --gallery-gap: var(--spacing-small, $gallery-gap);
  /**
   Helper classes
    */
}
.widget-gallery .widget-gallery-items {
  display: grid;
  grid-gap: var(--gallery-gap, 8px);
  /*
   Desktop widths
   */
  /*
   Tablet widths
   */
  /*
   Phone widths
   */
}
@media screen and (min-width: 992px) {
  .widget-gallery .widget-gallery-items.widget-gallery-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-lg-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .widget-gallery .widget-gallery-items.widget-gallery-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-md-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .widget-gallery .widget-gallery-items.widget-gallery-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .widget-gallery .widget-gallery-items.widget-gallery-sm-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.widget-gallery .widget-gallery-clickable {
  cursor: pointer;
}
.widget-gallery .widget-gallery-clickable:focus:not(:focus-visible) {
  outline: none;
}
.widget-gallery .widget-gallery-clickable:focus-visible {
  outline: 1px solid var(--brand-primary, #0595DB);
  outline-offset: -1px;
}
.widget-gallery:not(.widget-gallery-disable-selected-items-highlight) .widget-gallery-item.widget-gallery-clickable.widget-gallery-selected {
  background: var(--brand-primary-100, #e6eaff);
}
.widget-gallery .infinite-loading {
  overflow: auto;
}
.widget-gallery .widget-gallery-filter,
.widget-gallery .widget-gallery-empty {
  flex: 1;
}
.widget-gallery-top-bar {
  container: widget-gallery-header/inline-size;
}
.widget-gallery-footer {
  container: widget-gallery-footer/inline-size;
}
.widget-gallery .widget-gallery-column-span-1 {
  grid-column: span 1;
}
.widget-gallery .widget-gallery-column-span-2 {
  grid-column: span 2;
}
.widget-gallery .widget-gallery-column-span-3 {
  grid-column: span 3;
}
.widget-gallery .widget-gallery-column-span-4 {
  grid-column: span 4;
}
.widget-gallery .widget-gallery-column-span-5 {
  grid-column: span 5;
}
.widget-gallery .widget-gallery-column-span-6 {
  grid-column: span 6;
}
.widget-gallery .widget-gallery-column-span-7 {
  grid-column: span 7;
}
.widget-gallery .widget-gallery-column-span-8 {
  grid-column: span 8;
}
.widget-gallery .widget-gallery-column-span-9 {
  grid-column: span 9;
}
.widget-gallery .widget-gallery-column-span-10 {
  grid-column: span 10;
}
.widget-gallery .widget-gallery-column-span-11 {
  grid-column: span 11;
}
.widget-gallery .widget-gallery-column-span-12 {
  grid-column: span 12;
}
.widget-gallery .widget-gallery-row-span-1 {
  grid-row: span 1;
}
.widget-gallery .widget-gallery-row-span-2 {
  grid-row: span 2;
}
.widget-gallery .widget-gallery-row-span-3 {
  grid-row: span 3;
}
.widget-gallery .widget-gallery-row-span-4 {
  grid-row: span 4;
}
.widget-gallery .widget-gallery-row-span-5 {
  grid-row: span 5;
}
.widget-gallery .widget-gallery-row-span-6 {
  grid-row: span 6;
}
.widget-gallery .widget-gallery-row-span-7 {
  grid-row: span 7;
}
.widget-gallery .widget-gallery-row-span-8 {
  grid-row: span 8;
}
.widget-gallery .widget-gallery-row-span-9 {
  grid-row: span 9;
}
.widget-gallery .widget-gallery-row-span-10 {
  grid-row: span 10;
}
.widget-gallery .widget-gallery-row-span-11 {
  grid-row: span 11;
}
.widget-gallery .widget-gallery-row-span-12 {
  grid-row: span 12;
}

.widget-gallery-item-button {
  width: inherit;
}

:where(.widget-gallery-footer-controls, .widget-gallery-top-bar-controls) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

:where(.widget-gallery-fc-end, .widget-gallery-tb-end) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:where(.widget-gallery-fc-start, .widget-gallery-tb-start, .widget-gallery-fc-end, .widget-gallery-tb-end) {
  flex-grow: 1;
  flex-basis: 33.33%;
}

:where(.widget-gallery-fc-start, .widget-gallery-tb-start):not(:empty) {
  padding: var(--spacing-small) var(--spacing-medium);
  display: flex;
  align-items: center;
}

:where(.widget-gallery-fc-end, .widget-gallery-tb-end):not(:empty) {
  padding: var(--spacing-small) 0;
}

.widget-gallery-clear-selection {
  cursor: pointer;
  background: transparent;
  border: none;
  text-decoration: underline;
  color: var(--link-color);
  padding: 0;
  display: inline-block;
}
.widget-gallery-clear-selection:focus:not(:focus-visible) {
  outline: none;
}
.widget-gallery-clear-selection:focus-visible {
  outline: 1px solid var(--brand-primary, #0595DB);
  outline-offset: 2px;
}

@container widget-gallery-footer (width < 500px) {
  .widget-gallery-footer-controls {
    flex-direction: column;
  }
  .widget-gallery-footer-controls :where(.widget-gallery-fc-start, .widget-gallery-fc-end, .widget-gallery-fc-middle) {
    width: 100%;
    justify-content: center;
  }
}
@container widget-gallery-header (width < 500px) {
  .widget-gallery-top-bar-controls {
    flex-direction: column-reverse;
  }
  .widget-gallery-top-bar-controls :where(.widget-gallery-tb-start, .widget-gallery-tb-end) {
    width: 100%;
    justify-content: center;
  }
}
.widget-dropdown-filter-btn-link {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--link-color);
  padding: 0.3em 0.5em;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}
.widget-dropdown-filter-btn-link:hover, .widget-dropdown-filter-btn-link:focus-visible {
  background-color: var(--brand-primary-50, rgb(250.1, 250.3, 250.6));
}

/* ==========================================================================
   Gallery default

//== Design Properties
//## Helper classes to change the look and feel of the component
========================================================================== */
.widget-gallery-bordered-all .widget-gallery-item {
  border: 1px solid var(--grid-border-color, #ced0d3);
}

.widget-gallery-bordered-vertical .widget-gallery-item {
  border-color: var(--grid-border-color, #ced0d3);
  border-style: solid;
  border-width: 0;
  border-left-width: 1px;
  border-right-width: 1px;
}

.widget-gallery-bordered-horizontal .widget-gallery-item {
  border-color: var(--grid-border-color, #ced0d3);
  border-style: solid;
  border-width: 0;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.widget-gallery-divided-horizontal .widget-gallery-item {
  position: relative;
}
.widget-gallery-divided-horizontal .widget-gallery-item:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--grid-border-color, #ced0d3);
  margin-top: calc(var(--gallery-gap, var(--spacing-small, 8px)) / 2 - 1px);
}

.widget-gallery-hover .widget-gallery-items .widget-gallery-item:hover {
  background-color: var(--grid-bg-hover, rgb(245.2, 245.6, 246.2));
}

.widget-gallery-striped .widget-gallery-item:nth-child(odd) {
  background-color: var(--grid-bg-striped, rgb(250.1, 250.3, 250.6));
}
.widget-gallery-striped .widget-gallery-item:nth-child(even) {
  background-color: var(--bg-color-secondary, #F5F8FD);
}

.widget-gallery.widget-gallery-gridgap-none {
  --gallery-gap: 0px;
}

.widget-gallery.widget-gallery-gridgap-small {
  --gallery-gap: var(--spacing-small, $spacing-small);
}

.widget-gallery.widget-gallery-gridgap-medium {
  --gallery-gap: var(--spacing-medium, $spacing-medium);
}

.widget-gallery.widget-gallery-gridgap-large {
  --gallery-gap: var(--spacing-large, $spacing-large);
}

.widget-gallery-pagination-left .widget-gallery-pagination .pagination-bar {
  justify-content: flex-start;
}

.widget-gallery-pagination-center .widget-gallery-pagination .pagination-bar {
  justify-content: center;
}

.widget-gallery-disable-selected-items-highlight {
  /* stylelint-disable-line no-empty-rules */
}

.mx-refresh-container {
  grid-column: 1/-1;
  padding: 0;
  position: relative;
}
.mx-refresh-container-padding {
  padding: var(--spacing-small) 0;
}

.mx-refresh-indicator {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--border-color-default, #ced0d3);
  border: none;
  border-radius: 2px;
  color: var(--brand-primary, #0595DB);
  height: 4px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
}
.mx-refresh-indicator::-webkit-progress-bar {
  background-color: transparent;
}
.mx-refresh-indicator::-webkit-progress-value {
  background-color: currentColor;
  transition: all 0.2s;
}
.mx-refresh-indicator::-moz-progress-bar {
  background-color: currentColor;
  transition: all 0.2s;
}
.mx-refresh-indicator::-ms-fill {
  border: none;
  background-color: currentColor;
  transition: all 0.2s;
}
.mx-refresh-indicator:indeterminate {
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
  animation: progress-linear 3s infinite linear;
}
.mx-refresh-indicator:indeterminate::-moz-progress-bar {
  background-color: transparent;
}
.mx-refresh-indicator:indeterminate::-ms-fill {
  animation-name: none;
}
@keyframes progress-linear {
  0% {
    background-size: 200% 100%;
    background-position: left -31.25% top 0%;
  }
  50% {
    background-size: 800% 100%;
    background-position: left -49% top 0%;
  }
  100% {
    background-size: 400% 100%;
    background-position: left -102% top 0%;
  }
}

input[type=checkbox].three-state-checkbox {
  position: relative !important;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transform: translateZ(0);
}
input[type=checkbox].three-state-checkbox:disabled {
  cursor: initial;
}
input[type=checkbox].three-state-checkbox:before, input[type=checkbox].three-state-checkbox:after {
  position: absolute;
  display: block;
  transition: all 0.3s ease;
}
input[type=checkbox].three-state-checkbox:before {
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid var(--form-input-border-color, #ced0d3);
  border-radius: 4px;
  background-color: transparent;
}
input[type=checkbox].three-state-checkbox:not(:indeterminate):after {
  width: 8px;
  height: 4px;
  margin: 5px 4px;
  transform: rotate(-45deg);
  pointer-events: none;
  border: 2px solid var(--btn-primary-color, #fff);
  border-top: 0;
  border-right: 0;
}
input[type=checkbox].three-state-checkbox:indeterminate:after {
  width: 8px;
  height: 4px;
  margin: 5px 4px;
  transform: rotate(0deg);
  pointer-events: none;
  border: 0 solid #ffffff;
  border-bottom-width: 2px;
  transition: border 0s;
}
input[type=checkbox].three-state-checkbox:not(:disabled):not(:checked):hover:after {
  content: "";
  border-color: var(--form-input-border-color, #ced0d3);
}
input[type=checkbox].three-state-checkbox:indeterminate:before, input[type=checkbox].three-state-checkbox:checked:before {
  border-color: var(--brand-primary, #0595DB);
  background-color: var(--brand-primary, #0595DB);
}
input[type=checkbox].three-state-checkbox:indeterminate:after, input[type=checkbox].three-state-checkbox:checked:after {
  content: "";
}
input[type=checkbox].three-state-checkbox:disabled:before {
  background-color: var(--gray-50, #f8f8f8);
}
input[type=checkbox].three-state-checkbox:indeterminate:disabled:before, input[type=checkbox].three-state-checkbox:checked:disabled:before {
  border-color: transparent;
  background-color: var(--brand-primary-200, rgba(5, 149, 219, 0.4));
}
input[type=checkbox].three-state-checkbox:disabled:after {
  border-color: var(--gray-50, #f8f8f8);
}
input[type=checkbox].three-state-checkbox + .control-label {
  margin-left: 8px;
}

.widget-tree-node {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.widget-tree-node .widget-tree-node-branch {
  display: block;
}
.widget-tree-node .widget-tree-node-branch:focus-visible {
  outline: none;
}
.widget-tree-node .widget-tree-node-branch:focus-visible > .widget-tree-node-branch-header {
  outline: -webkit-focus-ring-color auto 1px;
  outline: -moz-mac-focusring auto 1px;
}
.widget-tree-node .widget-tree-node-branch-header-clickable {
  cursor: pointer;
}
.widget-tree-node .widget-tree-node-branch-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 8px 0;
}
.widget-tree-node .widget-tree-node-branch-header svg.widget-tree-node-branch-header-icon-animated {
  transition: transform 0.2s ease-in-out 50ms;
}
.widget-tree-node .widget-tree-node-branch-header svg.widget-tree-node-branch-header-icon-collapsed-left {
  transform: rotate(-90deg);
}
.widget-tree-node .widget-tree-node-branch-header svg.widget-tree-node-branch-header-icon-collapsed-right {
  transform: rotate(90deg);
}
.widget-tree-node .widget-tree-node-branch-header .widget-tree-node-loading-spinner {
  width: 16px;
  height: 16px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.widget-tree-node .widget-tree-node-branch-header-reversed {
  flex-direction: row-reverse;
}
.widget-tree-node .widget-tree-node-branch-header-value {
  flex: 1;
  font-size: 16px;
  margin: 0 8px;
}
.widget-tree-node .widget-tree-node-branch-header-icon-container {
  display: flex;
  align-items: center;
}
.widget-tree-node .widget-tree-node-body {
  padding-left: 24px;
  transition: height 0.2s ease 50ms;
  overflow: hidden;
}
.widget-tree-node .widget-tree-node-body.widget-tree-node-branch-hidden {
  display: none;
}

.widget-tree-node-lined-styling .widget-tree-node .widget-tree-node-body {
  position: relative;
}
.widget-tree-node-lined-styling .widget-tree-node .widget-tree-node-body::before {
  content: "";
  width: 0px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 7px;
  border: var(--widget-tree-node-border, 1px solid #D7D7D7);
}
.widget-tree-node-lined-styling .widget-tree-node[role=group] > .widget-tree-node-branch > .widget-tree-node-branch-header {
  position: relative;
}
.widget-tree-node-lined-styling .widget-tree-node[role=group] > .widget-tree-node-branch > .widget-tree-node-branch-header::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 0;
  border: var(--widget-tree-node-border, 1px solid #D7D7D7);
  top: 50%;
  left: -16px;
  transform: translate(0, -50%);
}

/* ==========================================================================
   Tree Node

//== Design Properties
//## Helper classes to change the look and feel of the component
========================================================================== */
.widget-tree-node-hover .widget-tree-node-branch:hover > .widget-tree-node-branch-header {
  background-color: var(--grid-bg-hover, rgb(245.2, 245.6, 246.2));
}

.widget-tree-node-bordered-horizontal .widget-tree-node-branch > .widget-tree-node-branch-header {
  border-width: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--grid-border-color, #ced0d3);
}

.widget-tree-node-bordered-all {
  border: 1px solid var(--grid-border-color, #ced0d3);
  border-radius: 8px;
  overflow: hidden;
}
.widget-tree-node-bordered-all .widget-tree-node-body:not(.widget-tree-node-branch-loading) {
  border-width: 0;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ced0d3;
}
.widget-tree-node-bordered-all .widget-tree-node-branch:not(:first-of-type) > .widget-tree-node-branch-header {
  border-width: 0;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ced0d3;
}

.widget-tree-node-bordered-none {
  border-width: 0;
}
.widget-tree-node-bordered-none .widget-tree-node-branch > .widget-tree-node-branch-header {
  border-width: 0;
}