@charset "UTF-8";
/*
    Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
    Add an arbitrary list of selectors into the arguments, and the styling in the block.
    I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

    There are two mixins: 
    - focus-visible: a generic focus-visible, giving you "slots" to decide what to render for :focus, :focus reset, and :focus-visible
    - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

    Use focus-visible:
    The key thing here is checking which slot is being rendered.
    For example, you can reset box-shadow here, or anything else.

    @include focus-visible using ($slot) {
        @if $slot == focus {
            outline: 2px solid transparent;
            box-shadow: 0 0 0 4px blue;
        }
        @if $slot == focusReset {
            box-shadow: none;
        }
        @if $slot == focusVisible {
            box-shadow: 0 0 0 4px blue;
        }
    }

    Use focus-visible-outline:
    @include focus-visible-outline("button", "a[href]") {
        outline: 2px solid blue;
    }

    Resulting CSS (compressed):

    button:focus,
    a[href]:focus {
        outline: 2px solid blue;
    }

    button:focus:not(:focus-visible),
    a[href]:focus:not(:focus-visible) {
        outline: none;
    }
    button:focus-visible,
    a[href]:focus-visible {
        outline: 2px solid blue;
    }
*/
/**
* @prop --uic-table-width: manually set the width of the table, defaults to content width or 100% when using the `full-width` attribute/prop
* @prop --uic-table-cell-height: height of the rows/table cells
* @prop --uic-table-group-indicator-height: height of the group indicator, needs to be adapted to `--uic-table-cell-height`
* @prop --uic-table-horizontal-cell-padding: horizontal padding of the table cells
*/
.uic-table {
  display: block;
  position: relative;
}
.uic-table__scroller {
  position: absolute;
  width: 0;
  left: 0;
}
.uic-table__table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  width: var(--uic-table-width, max-content);
}
.uic-table__td {
  height: var(--uic-table-cell-height);
  text-align: left;
  white-space: normal;
  font-size: var(--uic-font-size-normal);
  text-transform: none;
}
.uic-table__td--multiline {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}
.uic-table__th {
  height: var(--uic-table-cell-height);
  padding-left: var(--uic-table-horizontal-cell-padding);
  padding-right: var(--uic-table-horizontal-cell-padding);
  text-align: left;
  white-space: normal;
}
.uic-table__cell-container {
  padding-left: var(--uic-table-horizontal-cell-padding);
  padding-right: var(--uic-table-horizontal-cell-padding);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.uic-table__cell-container--no-data::before {
  content: var(--uic-table-cell-empty-content, "–");
}
.uic-table__cell-container--group {
  height: var(--uic-table-group-indicator-height);
  border-left: 1px solid #a1a1a1;
}
.uic-table__th {
  color: var(--uic-color-black);
  font-size: var(--uic-font-size-small);
  line-height: var(--uic-line-height-normal);
  font-weight: var(--uic-font-weight-normal);
  background-color: var(--uic-color-white);
}
.uic-table__th--group {
  position: relative;
  background: transparent;
}
.uic-table__th--group::after {
  content: "";
  top: 10%;
  position: absolute;
  left: 1px;
  height: 80%;
  width: 1px;
  transform: translate(-50%);
  background-color: var(--uic-color-grey2);
}
.uic-table__tr .uic-table__td, .uic-table__tr .uic-table__th {
  background-color: var(--uic-color-white);
}
.uic-table__tr {
  border-bottom: 1px solid var(--uic-color-grey2);
  border-top: 1px solid var(--uic-color-grey2);
}
.uic-table__tr-head {
  border-top: 0;
}
.uic-table__tr:active .uic-table__td {
  background: rgba(185, 220, 247, 0.4);
  color: var(--uic-color-blue3);
  border-top: 1px solid var(--uic-color-blue3);
  border-bottom: 1px solid var(--uic-color-blue3);
}
.uic-table__tr:active .uic-table__td .uic-table__cell--no-data::before {
  background-color: var(--uic-color-blue3);
}
.uic-table__tr--selected .uic-table__td {
  background: rgba(185, 220, 247, 0.4);
  color: var(--uic-color-blue2);
  border-top: 1px solid var(--uic-color-blue3);
  border-bottom: 1px solid var(--uic-color-blue3);
}
.uic-table__tr--selected .uic-table__td .uic-table__cell--no-data::before {
  background-color: var(--uic-color-blue3);
}
.uic-table__tr--selected .uic-table__cell--no-data::before {
  background-color: var(--uic-color-blue2);
}
.uic-table__tr:hover .uic-table__td--no-data::before {
  background-color: var(--uic-color-blue2);
}
.uic-table__thead .uic-table__tr {
  background-color: var(--uic-color-white);
  border-top: 0;
  border-bottom: 0;
}
.uic-table__tr:hover {
  cursor: pointer;
  color: var(--uic-color-blue3);
}
.uic-table__tr:hover .uic-table__td {
  border-bottom: 1px solid var(--uic-color-blue3);
  border-top: 1px solid var(--uic-color-blue3);
}
.uic-table__tr:hover .uic-table__cell--no-data::before {
  background-color: var(--uic-color-blue3);
}
.uic-table__inner {
  overflow-x: auto;
  height: auto;
}
.uic-table--full-width {
  width: var(--uic-table-width, 100%);
}
.uic-table--full-width table {
  min-width: var(--uic-table-width, 100%);
  width: var(--uic-table-width, 100%);
}
.uic-table--sticky-thead {
  height: 100%;
  max-height: 100%;
  overflow: scroll;
}
.uic-table--sticky-thead .uic-table__inner {
  height: 100%;
}
.uic-table--sticky-thead .uic-table__thead {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--uic-color-white);
}
.uic-table--sticky-thead .uic-table__thead::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -1px;
  height: 1px;
  background: var(--uic-color-grey2);
}
.uic-table .uic-checkbox__mark {
  background: white;
}