@porscheinformatik/clr-addons/styles/clr-addons-phs.css

Addon components for Clarity Angular

:root {
  --clr-border-color: var(--clr-color-neutral-400);
  --clr-card-default-border-color: rgba(215, 215, 215, 1);
  --clr-card-active-border-color: rgba(0, 148, 210, 1);
  --clr-header-height: 3rem;
  --clr-footer-height: 2.5rem;
  --clr-notification-progress-info-bar-color: var(--clr-progress-default-color);
  --clr-highlight-success-50: #dff0d0;
  --clr-highlight-success-100: #bce49a;
  --clr-highlight-success-700: #3c8500;
  --clr-highlight-success-800: #306b00;
  --clr-highlight-error-100: #feddd7;
  --clr-highlight-error-200: #fcc5bb;
  --clr-highlight-error-800: #c21d00;
  --clr-highlight-error-900: #991700;
  --clr-highlight-warning-100: #fff4c7;
  --clr-highlight-warning-200: #ffeea8;
  --clr-highlight-warning-800: #ad7600;
  --clr-highlight-warning-900: #8f5a00;
  --clr-highlight-info-50: #e3f5fc;
  --clr-highlight-info-100: #c8eaf9;
  --clr-highlight-info-700: #00648f;
  --clr-highlight-info-800: #00567a;
  --clr-highlight-neutral-50: #fafafa;
  --clr-highlight-neutral-200: #e8e8e8;
}

.header-actions > .dropdown .dropdown-toggle.nav-icon clr-icon:not([shape^=caret]) {
  height: 1.1rem;
  width: 1.1rem;
}

.header-actions > .dropdown .dropdown-toggle.nav-icon cds-icon:not([shape^=angle]) {
  height: 1.1rem;
  width: 1.1rem;
}

@media screen and (max-width: 992px) and (min-width: 768px) {
  .main-container .header-hamburger-trigger,
  .main-container .header-overflow-trigger {
    display: inline-block;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    height: var(--clr-header-height);
    width: var(--clr-header-height);
    padding: 0 0 0.2rem 0;
    text-align: center;
    white-space: nowrap;
    color: var(--clr-header-font-color);
    opacity: var(--clr-header-nav-opacity);
  }
  .main-container .header-hamburger-trigger:enabled:hover,
  .main-container .header-overflow-trigger:enabled:hover {
    opacity: var(--clr-header-nav-hover-opacity);
  }
  .main-container .header-hamburger-trigger:focus,
  .main-container .header-overflow-trigger:focus {
    outline-offset: -0.208333rem;
  }
  .main-container .header-nav.clr-nav-level-1,
  .main-container .subnav.clr-nav-level-1,
  .main-container .sub-nav.clr-nav-level-1,
  .main-container .clr-vertical-nav.clr-nav-level-1 {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    background: var(--clr-nav-background-color);
    z-index: 1039;
    height: 100vh;
    transform: translateX(-18rem);
    transition: transform 0.3s ease;
  }
  .main-container .header-nav.clr-nav-level-2,
  .main-container .subnav.clr-nav-level-2,
  .main-container .sub-nav.clr-nav-level-2,
  .main-container .clr-vertical-nav.clr-nav-level-2 {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background: var(--clr-nav-background-color);
    z-index: 1039;
    height: 100vh;
    transform: translateX(18rem);
    transition: transform 0.3s ease;
  }
  .main-container .subnav.clr-nav-level-1 .nav,
  .main-container .subnav.clr-nav-level-1 aside,
  .main-container .sub-nav.clr-nav-level-1 .nav,
  .main-container .sub-nav.clr-nav-level-1 aside,
  .main-container .subnav.clr-nav-level-2 .nav,
  .main-container .subnav.clr-nav-level-2 aside,
  .main-container .sub-nav.clr-nav-level-2 .nav,
  .main-container .sub-nav.clr-nav-level-2 aside {
    flex-direction: column;
    align-items: stretch;
  }
  .main-container .subnav.clr-nav-level-1 aside,
  .main-container .sub-nav.clr-nav-level-1 aside,
  .main-container .subnav.clr-nav-level-2 aside,
  .main-container .sub-nav.clr-nav-level-2 aside {
    justify-content: center;
    width: 100%;
  }
  .main-container .subnav.clr-nav-level-1 .nav,
  .main-container .sub-nav.clr-nav-level-1 .nav,
  .main-container .subnav.clr-nav-level-2 .nav,
  .main-container .sub-nav.clr-nav-level-2 .nav {
    padding-left: 0;
  }
  .main-container .subnav.clr-nav-level-1 .nav .nav-item,
  .main-container .sub-nav.clr-nav-level-1 .nav .nav-item,
  .main-container .subnav.clr-nav-level-2 .nav .nav-item,
  .main-container .sub-nav.clr-nav-level-2 .nav .nav-item {
    height: 1.5rem;
    margin-right: 0;
  }
  .main-container .subnav.clr-nav-level-1 .nav .nav-link,
  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link,
  .main-container .subnav.clr-nav-level-2 .nav .nav-link,
  .main-container .sub-nav.clr-nav-level-2 .nav .nav-link {
    padding: 0 0.5rem 0 1rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--clr-global-borderradius) 0 0 var(--clr-global-borderradius);
    color: var(--clr-vertical-nav-item-color);
  }
  .main-container .subnav.clr-nav-level-1 .nav .nav-link.active,
  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active,
  .main-container .subnav.clr-nav-level-2 .nav .nav-link.active,
  .main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active {
    color: var(--clr-vertical-nav-item-active-color);
    background-color: var(--clr-vertical-nav-active-bg-color);
  }
  .main-container .subnav.clr-nav-level-1 .nav .nav-link.active .nav-icon,
  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active .nav-icon,
  .main-container .subnav.clr-nav-level-2 .nav .nav-link.active .nav-icon,
  .main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active .nav-icon {
    fill: var(--clr-vertical-nav-icon-active-color);
  }
  .main-container .subnav.clr-nav-level-1 .nav .nav-link:hover, .main-container .subnav.clr-nav-level-1 .nav .nav-link.active,
  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link:hover,
  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active,
  .main-container .subnav.clr-nav-level-2 .nav .nav-link:hover,
  .main-container .subnav.clr-nav-level-2 .nav .nav-link.active,
  .main-container .sub-nav.clr-nav-level-2 .nav .nav-link:hover,
  .main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active {
    box-shadow: none;
  }
  .main-container .clr-vertical-nav.clr-nav-level-1,
  .main-container .clr-vertical-nav.clr-nav-level-2 {
    border-right: none;
  }
  .main-container .header-overflow-trigger {
    position: relative;
  }
  .main-container .header-overflow-trigger::after {
    display: inline-block;
    position: absolute;
    content: "";
    background: var(--clr-header-font-color);
    opacity: var(--clr-header-divider-opacity);
    height: calc(var(--clr-header-height) - 1rem);
    width: var(--clr-global-borderwidth);
    top: 0.5rem;
    left: 0;
  }
  .main-container .header .branding {
    max-width: 10rem;
    min-width: 0;
    overflow: hidden;
    letter-spacing: 0.16px;
  }
  .main-container .header .header-hamburger-trigger + .branding {
    padding-left: 0;
  }
  .main-container .header .header-hamburger-trigger + .branding .clr-icon,
  .main-container .header .header-hamburger-trigger + .branding .logo,
  .main-container .header .header-hamburger-trigger + .branding clr-icon {
    display: none;
  }
  .main-container .header .branding + .header-overflow-trigger,
  .main-container .header .header-nav + .header-overflow-trigger {
    margin-left: auto;
  }
  .main-container.open-hamburger-menu .header .header-backdrop, .main-container.open-overflow-menu .header .header-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cds-alias-object-overlay-backdrop-background);
    cursor: pointer;
    z-index: 1038;
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link {
    flex: 0 0 auto;
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .fa,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .fa, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .fa,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .fa {
    display: none;
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-text,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-text, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-text,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-text {
    display: inline-block;
    color: var(--clr-sliding-panel-text-color);
    line-height: 1rem;
    padding: 0.25rem 0 0.25rem 1rem;
    white-space: normal;
    font-weight: normal;
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link {
    opacity: 1;
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon + .nav-text,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon + .nav-text, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon + .nav-text,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon + .nav-text {
    display: inline-block;
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link {
    color: var(--clr-vertical-nav-item-color);
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link.active,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link.active, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link.active,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link.active {
    color: var(--clr-vertical-nav-item-active-color);
    background-color: var(--clr-vertical-nav-active-bg-color);
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link.active .nav-icon,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link.active .nav-icon, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link.active .nav-icon,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link.active .nav-icon {
    fill: var(--clr-vertical-nav-icon-active-color);
  }
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link.active > .nav-text,
  .main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link.active > .nav-text, .main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link.active > .nav-text,
  .main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link.active > .nav-text {
    color: inherit;
  }
  .main-container.open-hamburger-menu .clr-vertical-nav .nav-trigger, .main-container.open-overflow-menu .clr-vertical-nav .nav-trigger {
    display: none;
  }
  .main-container.open-hamburger-menu .header .branding {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 18rem;
    max-width: 18rem;
    z-index: 1040;
    padding-left: 1rem;
  }
  .main-container.open-hamburger-menu .header .branding > .nav-link {
    overflow: hidden;
  }
  .main-container.open-hamburger-menu .header .branding .clr-icon,
  .main-container.open-hamburger-menu .header .branding .logo,
  .main-container.open-hamburger-menu .header .branding clr-icon {
    display: inline-block;
  }
  .main-container.open-hamburger-menu .header .branding .title {
    color: var(--clr-sliding-panel-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .main-container.open-hamburger-menu .header-hamburger-trigger > span {
    background: transparent;
  }
  .main-container.open-hamburger-menu .header-hamburger-trigger > span::before, .main-container.open-hamburger-menu .header-hamburger-trigger > span::after {
    left: 0.15rem;
    transform-origin: 9%;
    transition: transform 0.6s ease;
  }
  .main-container.open-hamburger-menu .header-hamburger-trigger > span::before {
    transform: rotate(45deg);
  }
  .main-container.open-hamburger-menu .header-hamburger-trigger > span::after {
    transform: rotate(-45deg);
  }
  .main-container.open-hamburger-menu .header-nav.clr-nav-level-1,
  .main-container.open-hamburger-menu .subnav.clr-nav-level-1,
  .main-container.open-hamburger-menu .sub-nav.clr-nav-level-1,
  .main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1 {
    padding-top: calc(var(--clr-header-height) + 1rem);
    transform: translateX(0);
    transition: transform 0.3s ease;
    width: 18rem;
    max-width: 18rem;
  }
  .main-container.open-hamburger-menu .header-nav.clr-nav-level-1 .sidenav-content,
  .main-container.open-hamburger-menu .subnav.clr-nav-level-1 .sidenav-content,
  .main-container.open-hamburger-menu .sub-nav.clr-nav-level-1 .sidenav-content,
  .main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1 .sidenav-content {
    padding-bottom: 1rem;
  }
  .main-container.open-overflow-menu .header-nav.clr-nav-level-2,
  .main-container.open-overflow-menu .subnav.clr-nav-level-2,
  .main-container.open-overflow-menu .sub-nav.clr-nav-level-2,
  .main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2 {
    transform: translateX(0);
    transition: transform 0.3s ease;
    width: 18rem;
    max-width: 18rem;
  }
  .main-container.open-overflow-menu .header-nav.clr-nav-level-2,
  .main-container.open-overflow-menu .subnav.clr-nav-level-2,
  .main-container.open-overflow-menu .sub-nav.clr-nav-level-2 {
    padding-top: 1rem;
  }
}
.open-hamburger-menu .header-hamburger-trigger span::before,
.open-overflow-menu .header-overflow-trigger span::before {
  background-color: white;
}
.open-hamburger-menu .header-hamburger-trigger span::after,
.open-overflow-menu .header-overflow-trigger span::after {
  background-color: white;
}

.ces-title h1,
.ces-title h2,
.ces-title h3,
.ces-title h4,
.ces-title h5,
.ces-title h6,
.ces-subtitle h1,
.ces-subtitle h2,
.ces-subtitle h3,
.ces-subtitle h4,
.ces-subtitle h5,
.ces-subtitle h6 {
  margin-top: 0;
}

.ces-caret-btn {
  line-height: 1rem;
}

.disabled-header-styles h1,
.disabled-header-styles h2,
.disabled-header-styles h3,
.disabled-header-styles h4,
.disabled-header-styles h5,
.disabled-header-styles h6 {
  display: inline-block;
}
.disabled-header-styles .ces-caret-btn {
  margin-top: 0;
}

:root [cds-theme] {
  --clr-main-nav-group-title-icon-size: 1rem;
  --clr-main-nav-group-dropdown-icon-size: 0.7rem;
}

header .header-nav .nav-link,
.header .header-nav .nav-link {
  text-align: left;
}
header .header-nav .nav-link:first-of-type::before, header .header-nav .nav-link:last-of-type::after,
.header .header-nav .nav-link:first-of-type::before,
.header .header-nav .nav-link:last-of-type::after {
  display: none;
}
header .header-nav .header-overflow,
.header .header-nav .header-overflow {
  height: 100%;
}

@media screen and (max-width: 992px) {
  .main-container:not(.open-hamburger-menu) .header-nav .header-overflow {
    display: none;
  }
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible {
  cursor: pointer;
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-text {
  cursor: pointer;
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-text cds-icon.title-icon {
  width: var(--clr-main-nav-group-title-icon-size);
  height: var(--clr-main-nav-group-title-icon-size);
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-text cds-icon.dropdown-icon {
  position: relative;
  transform: rotate(180deg);
  top: 0;
  width: var(--clr-main-nav-group-dropdown-icon-size);
  height: var(--clr-main-nav-group-dropdown-icon-size);
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-text clr-icon {
  position: relative;
  transform: unset;
  top: 0;
  width: 0.5rem;
  height: 0.5rem;
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-list {
  display: none;
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-list .nav-link {
  color: var(--clr-dropdown-item-color);
  opacity: 1;
  padding: 1px 1rem 0;
  height: 1.25rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-list .nav-link:hover {
  background-color: var(--clr-dropdown-bg-hover-color);
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible .nav-list .nav-link.active {
  background: var(--clr-dropdown-selection-color);
  color: var(--clr-dropdown-active-text-color);
}
.main-container:not(.open-hamburger-menu) .header-nav .collapsible input[type=checkbox]:checked ~ .nav-list {
  visibility: visible;
  display: flex;
}

.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .header-overflow {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}
.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .header-overflow .nav-link .nav-text {
  font-weight: var(--clr-font-weight-bold);
  padding-right: 1.5rem;
}
.main-container.open-hamburger-menu .header .header-nav .nav-link {
  align-items: flex-start;
  padding: 0;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible .nav-text {
  cursor: pointer;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible.nav-link:hover {
  background-color: transparent;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible cds-icon.title-icon {
  width: var(--clr-main-nav-group-title-icon-size);
  height: var(--clr-main-nav-group-title-icon-size);
}
.main-container.open-hamburger-menu .header .header-nav .collapsible cds-icon.dropdown-icon {
  position: absolute;
  top: 0;
  right: 0.5rem;
  left: unset;
  width: var(--clr-main-nav-group-dropdown-icon-size);
  height: var(--clr-main-nav-group-dropdown-icon-size);
  transform: translate(-50%, 50%) rotate(90deg);
  transition: 200ms ease-in-out;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible clr-icon {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  left: unset;
  transform: rotate(-90deg);
  width: 0.666667rem;
  height: 0.666667rem;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible .nav-list {
  display: none;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible input[type=checkbox]:checked ~ label cds-icon.dropdown-icon {
  transform: translate(-50%, 50%) rotate(180deg);
}
.main-container.open-hamburger-menu .header .header-nav .collapsible input[type=checkbox]:checked ~ label clr-icon {
  transform: translate(-50%, 50%) rotate(180deg);
}
.main-container.open-hamburger-menu .header .header-nav .collapsible input[type=checkbox]:checked ~ .nav-list {
  display: flex;
  visibility: visible;
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: 0 0;
  padding: 0;
}
.main-container.open-hamburger-menu .header .header-nav .collapsible input[type=checkbox]:checked ~ .nav-list .nav-link {
  padding: 0 1.5rem 0 2rem;
  height: 1.5rem;
  line-height: 1.5rem;
}

.main-nav-group.active .collapsible.active .nav-text {
  opacity: 0.99;
}
.main-nav-group .collapsible:active, .main-nav-group .collapsible:hover {
  outline-width: 0;
}
.main-nav-group .collapsible > input[type=checkbox] {
  display: none;
}

.pager-top,
.pager-bottom {
  margin: auto;
  display: flex;
}

.pager-bottom {
  margin-top: 1rem;
}

.btn-no-capitalized {
  text-transform: none;
}

.options-icon-button {
  display: none !important;
}

@media screen and (max-width: 576px) {
  .options-text-button {
    display: none !important;
  }
  .options-icon-button {
    display: inline-flex !important;
  }
}
.pager .btn {
  min-width: 1.5rem;
}
.pager button:disabled {
  border-color: var(--clr-btn-default-color);
  opacity: 1;
}

@media (hover: none) {
  .pager .btn:not(.btn-primary):hover {
    background-color: var(--clr-btn-default-bg-color);
    color: var(--clr-btn-default-color);
  }
  .pager .btn.btn-primary:hover {
    background-color: var(--clr-btn-primary-bg-color);
    color: var(--clr-btn-primary-color);
  }
}
.dot-pager .clr-control-container {
  margin: auto;
}
.dot-pager .clr-radio-wrapper input[type=radio]:checked + label::before {
  box-shadow: inset 0 0 0 1rem var(--clr-forms-checkbox-background-color);
}

.view-edit-section {
  max-width: 65rem;
}
.view-edit-section .card-block {
  display: flex;
  flex-direction: column;
}
.view-edit-section .card-title {
  margin-bottom: 0;
}
.view-edit-section .card-text {
  padding-right: 10px;
}
.view-edit-section form,
.view-edit-section .form {
  padding: 0;
}
.view-edit-section .button-bar {
  margin-top: 1rem;
}
.view-edit-section .card-block .btn,
.view-edit-section .card-block .btn.btn-link,
.view-edit-section .card-block .card-link,
.view-edit-section .card-footer .btn,
.view-edit-section .card-footer .btn.btn-link,
.view-edit-section .card-footer .card-link {
  margin: 0 0.6rem 0 0;
}

.ves-action,
.card-action {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.ves-actions,
.card-actions {
  float: right;
  margin-top: -0.3em;
}

:root {
  --clr-content-panel-width: 456px;
}

.content-panel-container {
  position: relative;
  overflow: hidden;
}

.content-panel-outer-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

@media screen and (min-width: 1200px) {
  .content-panel-outer-wrapper {
    order: 1;
  }
}
.content-panel {
  order: 2;
}

.content-panel-content-wrapper {
  background-color: var(--clr-global-app-background);
  z-index: 1037;
  padding: 1rem;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border-left: var(--clr-global-borderwidth) solid var(--clr-border-color);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .content-panel-content-wrapper {
    width: var(--clr-content-panel-width);
  }
}
@media screen and (min-width: 1200px) {
  .content-panel-content-wrapper {
    position: relative;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .content-panel-content-wrapper {
    width: 100%;
    border: none;
  }
}

.content-panel-title {
  margin-top: 0 !important;
  margin-bottom: 0.5rem;
  line-height: 1.5rem;
}

.content-panel-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: var(--clr-color-neutral-900);
  opacity: 0.85;
  z-index: 1036;
}
@media screen and (max-width: 768px) {
  .content-panel-backdrop {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .content-panel-backdrop {
    display: none;
  }
}

.content-panel-close-btn {
  line-height: 1rem;
}

:root {
  --clr-action-panel-width: 320px;
}

.action-panel-container {
  position: relative;
  overflow: hidden;
}

.action-panel-outer-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

@media screen and (min-width: 1200px) {
  .action-panel-outer-wrapper {
    order: 1;
  }
}
.action-panel {
  order: 2;
}

.action-panel-action-wrapper {
  background-color: var(--clr-global-app-background);
  z-index: 1037;
  padding: 0 1rem 1rem 1rem;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border-left: var(--clr-global-borderwidth) solid var(--clr-border-color);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .action-panel-action-wrapper {
    width: var(--clr-action-panel-width);
  }
}
@media screen and (min-width: 1200px) {
  .action-panel-action-wrapper {
    position: relative;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .action-panel-action-wrapper {
    width: 100%;
    border: none;
  }
}

.action-panel-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: var(--clr-color-neutral-900);
  opacity: 0.85;
  z-index: 1036;
}
@media screen and (max-width: 768px) {
  .action-panel-backdrop {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .action-panel-backdrop {
    display: none;
  }
}

.action-panel-list {
  padding-left: 0.5rem !important;
  padding-top: 0.25rem;
}
.action-panel-list li::marker {
  color: var(--clr-link-visited-color);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -1rem;
  list-style: none;
  font-size: 13px;
}

.breadcrumb-item {
  font-size: 13px;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  display: inline-block;
  padding-right: 0.5rem;
}

.notification__wrapper {
  position: fixed;
  z-index: 1071;
  top: 36px;
  width: 400px;
  left: 0;
  right: 0;
  border-radius: 4px;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 576px) {
  .notification__wrapper {
    width: calc(100% - 2rem);
    margin: 0 1rem;
  }
}
.notification .progress {
  height: 0.5em;
  position: absolute;
  z-index: 1;
}
.notification .progress.info progress {
  color: #00648f;
}
.notification .progress.info progress::-webkit-progress-value {
  background-color: #00648f;
}
.notification .progress.info progress::-moz-progress-bar {
  background-color: #00648f;
}
.notification .progress.success progress {
  color: #3c8500;
}
.notification .progress.success progress::-webkit-progress-value {
  background-color: #3c8500;
}
.notification .progress.success progress::-moz-progress-bar {
  background-color: #3c8500;
}
.notification .progress.warning progress {
  color: #ad7600;
}
.notification .progress.warning progress::-webkit-progress-value {
  background-color: #ad7600;
}
.notification .progress.warning progress::-moz-progress-bar {
  background-color: #ad7600;
}
.notification .progress.danger progress {
  color: #c21d00;
}
.notification .progress.danger progress::-webkit-progress-value {
  background-color: #c21d00;
}
.notification .progress.danger progress::-moz-progress-bar {
  background-color: #c21d00;
}
.notification .alert-items {
  padding: 0.333333rem calc(0.75rem - 1px);
}
.notification .alert-app-level {
  font-size: 14px;
}
.notification .alert-app-level .alert-icon {
  height: 1.4rem;
  width: 1.4rem;
}
.notification .alert-app-level .alert-items {
  padding-top: 0.86rem;
  padding-bottom: 0.86rem;
}
.notification .alert-app-level .alert-items .alert-item {
  justify-content: left;
}
.notification .alert-app-level .alert-items .alert-item .alert-text {
  white-space: pre-wrap;
}
.notification .alert-app-level .alert-icon-wrapper {
  margin-top: 0.05rem;
  height: 1.2rem;
}
.notification .alert-app-level .close {
  flex: 0 0 2.266667rem;
  height: 3rem;
  width: 2rem;
}
.notification .alert-app-level .close:focus {
  box-shadow: none;
}
.notification .alert-app-level .close cds-icon {
  margin: auto 0;
  height: calc(1.3rem - 1px);
  width: calc(1.3rem - 1px);
}

.flow-bar {
  display: flex;
  flex: 0 0 auto;
}
.flow-bar .flow-bar-dropdown {
  display: none;
}
@media screen and (max-width: 576px) {
  .flow-bar .flow-bar-dropdown {
    display: block;
  }
}
.flow-bar .flow-bar-dropdown .dropdown-toggle {
  border: none;
  width: 100%;
  padding: 0 1rem;
  max-width: none;
}
.flow-bar .flow-bar-dropdown .dropdown-toggle:active {
  box-shadow: none;
}
.flow-bar .flow-bar-wrapper {
  display: flex;
  height: 1.5rem;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
@media screen and (max-width: 576px) {
  .flow-bar .flow-bar-wrapper {
    display: none;
  }
}
.flow-bar .flow-bar-wrapper .flow-bar-step {
  box-shadow: 0 -0.35rem 0 var(--clr-nav-box-shadow-color) inset;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 5rem;
  max-width: 10rem;
}
.flow-bar .flow-bar-wrapper .flow-bar-step cds-icon[shape*=angle] {
  flex: 0 0 auto;
}
.flow-bar .flow-bar-wrapper .flow-bar-step:hover, .flow-bar .flow-bar-wrapper .flow-bar-step.active {
  box-shadow: 0 -0.35rem 0 var(--clr-nav-hover-box-shadow-color) inset;
  transition: box-shadow 0.2s ease-in;
}
.flow-bar .flow-bar-wrapper .flow-bar-step:focus-within {
  box-shadow: 0 -0.35rem 0 var(--clr-nav-active-box-shadow-color) inset;
  transition: box-shadow 0.2s ease-in;
  outline: none;
}
.flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn {
  border: none;
  padding: 0 1rem;
  text-transform: none;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: normal;
  min-width: 0;
}
.flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn:not(:disabled) {
  color: var(--clr-nav-link-color);
}
.flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn:not(:disabled):hover, .flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn:not(:disabled).active {
  background-color: transparent;
  color: var(--clr-nav-link-active-color);
}
.flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn:focus {
  outline: none;
}
.flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn.active {
  font-weight: 700;
}
.flow-bar .flow-bar-wrapper .flow-bar-step .flow-bar-btn.btn {
  margin: 0 0 var(--clr-global-borderwidth) 0;
}

.btn.back-button {
  padding: 0;
  margin-right: 0.25rem;
}

.treetable {
  border-collapse: separate;
  border-style: solid;
  border-width: var(--clr-table-borderwidth);
  border-color: var(--clr-table-border-color);
  border-radius: var(--clr-table-border-radius);
  background-color: var(--clr-table-bgcolor);
  color: var(--clr-table-font-color);
  margin: 0;
  margin-top: 0.5rem;
  max-width: 100%;
  width: 100%;
}
.treetable .treetable-column,
.treetable .treetable-cell {
  font-size: 0.65rem;
  line-height: 0.7rem;
  border-top-style: solid;
  border-top-width: var(--clr-table-borderwidth);
  border-top-color: var(--clr-tablerow-bordercolor);
  padding: 0.55rem 0.6rem;
  text-align: center;
  vertical-align: top;
}
.treetable .treetable-column {
  color: var(--clr-thead-color);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.03rem;
  background-color: var(--clr-thead-bgcolor);
  vertical-align: bottom;
  border-bottom-style: solid;
  border-bottom-width: var(--clr-table-borderwidth);
  border-bottom-color: var(--clr-table-border-color);
  border-top: 0 none;
}
.treetable .treetable-body .treetable-row:first-child .treetable-cell {
  border-top: 0 none;
}
.treetable .treetable-body + .treetable-body {
  border-top-style: solid;
  border-top-width: var(--clr-table-borderwidth);
  border-top-color: var(--clr-table-border-color);
}
.treetable .treetable-header .treetable-column:first-child {
  border-radius: 0;
  border-top-left-radius: var(--clr-table-cornercellradius);
}
.treetable .treetable-header .treetable-column:last-child {
  border-radius: 0;
  border-top-right-radius: var(--clr-table-cornercellradius);
}
.treetable .treetable-body:last-child .treetable-row:last-child .treetable-cell:first-child {
  border-radius: 0;
  border-bottom-left-radius: var(--clr-table-cornercellradius);
}
.treetable .treetable-body:last-child .treetable-row:last-child .treetable-cell:last-child {
  border-radius: 0;
  border-bottom-right-radius: var(--clr-table-cornercellradius);
}

.treetable-host {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}
.treetable-host .treetable-header,
.treetable-host .treetable-body,
.treetable-host .treetable-row,
.treetable-host .treetable-column,
.treetable-host .treetable-cell {
  display: block;
}
.treetable-host .clr-row-clickable {
  cursor: pointer;
}
.treetable-host .treetable {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow: auto;
  flex: 1 1 auto;
  margin-top: 0.5rem;
}
.treetable-host .treetable .treetable-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-content: flex-start;
  min-height: 3rem;
  height: 100%;
  overflow: auto;
}
.treetable-host .treetable .treetable-action-trigger {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.treetable-host .treetable .treetable-expandable-caret {
  padding: 0.1rem 0.2rem 0.15rem;
  text-align: center;
  position: absolute;
  z-index: 500;
  overflow: hidden;
}
.treetable-host .treetable .treetable-expandable-caret .treetable-expandable-caret-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
button.treetable-host .treetable .treetable-expandable-caret .treetable-expandable-caret-button {
  cursor: pointer;
}

.treetable-host .treetable .treetable-expandable-caret .treetable-expandable-caret-button {
  background: none;
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
}
.treetable-host .treetable .treetable-expandable-caret .treetable-expandable-caret-icon {
  color: var(--clr-color-neutral-700);
}
.treetable-host .treetable .treetable-expandable-caret .treetable-expandable-caret-icon svg {
  transition: transform 0.2s ease-in-out;
}
.treetable-host .treetable .treetable-row-selection {
  min-width: 1.9rem;
  max-width: 1.9rem;
  flex: 0 0 1.9rem;
  position: relative;
  display: flex;
  padding: var(--cds-global-space-3) var(--cds-global-space-6);
}
.treetable-host .treetable .treetable-row-selection:after {
  content: "";
  width: 0.05rem;
  height: calc(100% - 0.5rem);
  position: absolute;
  right: 0;
  top: 0.25rem;
  background-color: var(--clr-table-border-color, #ccc);
}
.treetable-host .treetable .treetable-row-actions {
  min-width: 1.9rem;
  max-width: 1.9rem;
  flex: 0 0 1.9rem;
  position: relative;
}
.treetable-host .treetable .treetable-row-actions:after {
  content: "";
  width: 0.05rem;
  height: calc(100% - 0.5rem);
  position: absolute;
  right: 0;
  top: 0.25rem;
  background-color: var(--clr-table-border-color, #ccc);
}
.treetable-host .treetable .treetable-row-scrollable {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
}
.treetable-host .treetable .treetable-row-scrollable :first-child {
  /* Add padding of 1.5 rem to account for the expendable icon in the rows below*/
  padding-left: 1.5rem;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column {
  text-align: left;
  min-width: 4rem;
  line-height: var(--cds-alias-typography-caption-line-height);
  display: flex;
  flex: 1 1 auto;
  vertical-align: top;
  border: none;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column:last-of-type {
  padding-right: 1rem;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-column-title {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--clr-table-font-color);
  text-align: left;
  flex: 1 1 auto;
  display: flex;
  width: 100%;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-column-title .sort-icon {
  color: var(--cds-alias-object-interaction-color);
  margin-left: auto;
  vertical-align: middle;
  padding: 0;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-column-title .sort-icon:hover {
  color: var(--cds-alias-object-interaction-color-hover);
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-column-title .sort-icon:active {
  color: var(--cds-alias-object-interaction-color-active);
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-column-title .signpost .signpost-action.btn {
  height: inherit;
  line-height: inherit;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column button.treetable-column-title:hover {
  text-decoration: underline;
  cursor: pointer;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column clr-tt-filter {
  display: flex;
  order: 99;
  margin-left: auto;
  align-items: center;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
button.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle {
  cursor: pointer;
}

.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle {
  cursor: pointer;
  float: right;
  vertical-align: middle;
  height: var(--clr-base-icon-size-s);
  min-height: var(--clr-base-icon-size-s);
  width: var(--clr-base-icon-size-s);
  min-width: var(--clr-base-icon-size-s);
  margin-left: var(--clr-base-horizontal-offset-s);
  background-repeat: no-repeat;
  background-size: contain;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle cds-icon,
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle clr-icon {
  color: var(--cds-alias-object-interaction-color);
  padding-left: 0;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle:hover cds-icon,
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle:hover clr-icon {
  color: var(--cds-alias-object-interaction-color-hover);
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle.treetable-filter-open cds-icon,
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle.treetable-filter-open clr-icon {
  color: var(--cds-alias-object-interaction-color-active);
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle.treetable-filtered cds-icon,
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-filter-toggle.treetable-filtered clr-icon {
  color: var(--cds-alias-object-interaction-color-selected);
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column.treetable-fixed-width {
  flex: 0 0 auto;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column .treetable-column-flex {
  display: flex;
  flex: 1 1 auto;
}
.treetable-host .treetable .treetable-row-scrollable .btn-icon {
  padding-left: var(--cds-global-space-6);
}
.treetable-host .treetable .treetable-row-scrollable .btn-icon :first-child {
  padding-left: revert;
}
.treetable-host .treetable .treetable-header {
  position: sticky;
  top: 0;
  z-index: 501;
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
}
.treetable-host .treetable .treetable-header.hide-header {
  visibility: hidden;
  min-height: 0;
  height: 0;
}
.treetable-host .treetable .treetable-body {
  width: auto;
}
.treetable-host .treetable .treetable-body .treetable-row:hover {
  background-color: var(--clr-datagrid-row-hover-color);
}
.treetable-host .treetable .treetable-body .treetable-selected {
  background-color: var(--clr-datagrid-row-selected-background-color);
  color: var(---clr-datagrid-row-selected);
}
.treetable-host .treetable .treetable-body .treetable-selected:hover {
  background-color: var(--clr-datagrid-row-selected-hover-background-color);
}
.treetable-host .treetable .treetable-body .treetable-selected.active {
  background-color: var(--clr-datagrid-row-selected-active-background-color);
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .clr-tt-node-content.treetable-row {
  border-top: var(--clr-global-borderwidth) solid var(--clr-table-border-color);
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-scrolling-cells {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  overflow: hidden;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell {
  text-align: left;
  min-width: 4rem;
  border-color: var(--clr-table-border-color);
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:last-of-type {
  padding-right: 1rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 2rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 0.1rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 3rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 1rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 4rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 2rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 5rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 3rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 6rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 4rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 7rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 5rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 8rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 6rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 9rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 7rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 10rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 8rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 11rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 9rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-cell:first-of-type {
  padding-left: 12rem;
}
.treetable-host .treetable .treetable-body .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-row-wrapper .treetable-scrolling-cells .treetable-expandable-caret {
  margin-left: 10rem;
}
.treetable-host .treetable .treetable-spinner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: var(--clr-base-vertical-offset-l);
  height: calc(100% - var(--clr-base-vertical-offset-l));
  background-color: var(--cds-alias-object-container-backdrop-background);
  z-index: 590;
}
.treetable-host:not(.empty) .treetable-placeholder-container {
  display: none;
}
.treetable-host .treetable-placeholder-container {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  border-top: var(--clr-global-borderwidth) solid var(--clr-table-border-color);
}
.treetable-host .treetable-placeholder {
  background: var(--clr-table-bgcolor);
  width: 100%;
}
.treetable-host .treetable-placeholder.treetable-empty {
  border-top: 0;
  padding: 0.5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  font-size: var(--clr-datagrid-placeholder-font-size);
  color: var(--clr-dark-midtone-gray);
}
.treetable-host .treetable-placeholder .treetable-placeholder-image {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2060%2072%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22path-1%22%20cx%3D%2230%22%20cy%3D%2261.7666667%22%20rx%3D%2215.4512904%22%20ry%3D%224.73333333%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20maskContentUnits%3D%22userSpaceOnUse%22%20maskUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2230.9025808%22%20height%3D%229.46666667%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Artboard%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Oval-10%22%20stroke%3D%22%23C1DFEF%22%20mask%3D%22url(%23mask-2)%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22square%22%20stroke-dasharray%3D%223%2C6%2C3%2C5%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M38.4613647%2C18.1642456%20L30.9890137%2C34.9141846%20L31%2C47%20L32.5977783%2C46.5167236%20L32.5977783%2C34.9141846%20L51.0673218%2C15.7560425%20C51.0673218%2C15.7560425%2048.6295166%2C16.6542969%2044.9628906%2C17.3392334%20C41.2962646%2C18.0241699%2038.4613647%2C18.1642456%2038.4613647%2C18.1642456%20Z%22%20id%3D%22Path-195%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.74639226%2C12.5661855%20L4.62065726%2C12.1605348%20L5.3515414%2C11.1625044%20L5.77622385%2