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

Addon components for Clarity Angular

:root:has([cds-theme~=phs]) {
  --blue-light: #e6f3f8;
  --blue-mid: #85c3df;
  --blue-dark: #0d88c0;
  --blue-darker: #0c75a6;
  --turquoise: hsl(183, 75%, 38%);
  --turquoise-lighter: hsl(180, 31%, 93%);
  --turquoise-light: hsl(180, 35%, 89%);
  --turquoise-darkest: hsl(183, 70%, 33%);
  --green-turquiose: #1f9c70;
  --green-lighter: hsl(92, 52%, 88%);
  --green-light: hsl(92, 55%, 83%);
  --green-light-mid: hsl(92, 70%, 64%);
  --green-mid: hsl(93, 84%, 46%);
  --green: hsl(94, 97%, 29%);
  --green-dark: hsl(96, 99%, 24%);
  --green-darkest: hsl(98, 100%, 21%);
  --red-lighter: hsl(9, 95%, 96%);
  --red-light: hsl(9, 95%, 92%);
  --red-dark: hsl(7, 95%, 42%);
  --red-darker: hsl(5, 89%, 36%);
  --red-darkest: hsl(9, 98%, 30%);
  --orange-dark: #d25617;
  --orange-darker: #b84b14;
  --orange-light: #ffae42;
  --yellow-light: #efd603;
  --black: #000;
  --white: #fff;
}

: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;
    opacity: 1;
    color: var(--clr-vertical-nav-item-color);
  }
  .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 .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.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;
  }
  .main-container.open-overflow-menu .header-overflow-trigger {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    z-index: 1039;
    transform: translateX(-18.5rem);
    transition: transform 0.6s ease;
  }
  .main-container.open-overflow-menu .header-overflow-trigger::after {
    content: none;
  }
  .main-container.open-overflow-menu .header-overflow-trigger > span {
    background: transparent;
  }
  .main-container.open-overflow-menu .header-overflow-trigger > span::before, .main-container.open-overflow-menu .header-overflow-trigger > span::after {
    height: 0.1rem;
    width: 1.2rem;
    left: -0.3rem;
    transform-origin: -3%;
    transition: transform 0.6s ease;
  }
  .main-container.open-overflow-menu .header-overflow-trigger > span::before {
    transform: rotate(45deg);
  }
  .main-container.open-overflow-menu .header-overflow-trigger > span::after {
    transform: rotate(-45deg);
  }
}
.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;
}

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;
}

@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 {
  position: relative;
  transform: rotate(180deg);
  top: 0;
  width: 0.5rem;
  height: 0.5rem;
}
.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 {
  position: absolute;
  top: 0;
  right: 0.5rem;
  left: unset;
  width: 0.666667rem;
  height: 0.666667rem;
  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 {
  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;
  margin-left: -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;
  position: relative;
  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;
  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-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;
}
.treetable-host .treetable .treetable-row-scrollable .treetable-column:last-of-type {
  padding-right: 1rem;
}
.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-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: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%2C11.159939%20L6.20936309%2C12.5573481%20L4.74639226%2C12.5661855%20Z%20M6.20936309%2C12.5573481%20L6.32542632%2C12.9317954%20L28.4963855%2C34.8796718%20L28.4963855%2C47.8096691%20L32.6%2C46.4836513%20L32.6%2C34.8992365%20L53.973494%2C12.7035813%20L53.973494%2C12.2688201%20L6.20936309%2C12.5573481%20Z%20M55.373494%2C10.8603376%20L55.373494%2C13.2680664%20L34%2C35.4637216%20L34%2C47.5025401%20L27.0963855%2C49.7333333%20L27.0963855%2C35.4637219%20L5.09179688%2C13.680542%20L4.31325301%2C11.1687764%20L55.373494%2C10.8603376%20Z%22%20id%3D%22Path-149%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22Oval-9%22%20fill%3D%22%23FFFFFF%22%20cx%3D%2230%22%20cy%3D%2211.785654%22%20rx%3D%2226%22%20ry%3D%226.78565401%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M30%2C17.171308%20C36.8772177%2C17.171308%2043.3112282%2C16.4610701%2048.0312371%2C15.2292106%20C50.2777611%2C14.6428977%2052.0507619%2C13.9579677%2053.2216231%2C13.2354973%20C54.1938565%2C12.6355886%2054.6%2C12.1175891%2054.6%2C11.785654%20C54.6%2C11.4537189%2054.1938565%2C10.9357194%2053.2216231%2C10.3358107%20C52.0507619%2C9.61334032%2050.2777611%2C8.92841034%2048.0312371%2C8.34209746%20C43.3112282%2C7.11023795%2036.8772177%2C6.4%2030%2C6.4%20C23.1227823%2C6.4%2016.6887718%2C7.11023795%2011.9687629%2C8.34209746%20C9.72223886%2C8.92841034%207.94923814%2C9.61334032%206.77837689%2C10.3358107%20C5.8061435%2C10.9357194%205.4%2C11.4537189%205.4%2C11.785654%20C5.4%2C12.1175891%205.8061435%2C12.6355886%206.77837689%2C13.2354973%20C7.94923814%2C13.9579677%209.72223886%2C14.6428977%2011.9687629%2C15.2292106%20C16.6887718%2C16.4610701%2023.1227823%2C17.171308%2030%2C17.171308%20Z%20M30%2C18.571308%20C15.6405965%2C18.571308%204%2C15.5332672%204%2C11.785654%20C4%2C8.03804078%2015.6405965%2C5%2030%2C5%20C44.3594035%2C5%2056%2C8.03804078%2056%2C11.785654%20C56%2C15.5332672%2044.3594035%2C18.571308%2030%2C18.571308%20Z%22%20id%3D%22Oval-9-Copy%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.2608643%2C7.14562988%20L22.727356%2C16.9047241%20C22.727356%2C16.9047241%2015.3006592%2C16.3911743%2010.276001%2C14.7511597%20C5.25134277%2C13.111145%205.38031006%2C11.8284302%205.38031006%2C11.6882935%20C5.38031006%2C10.4832831%208.16633152%2C9.41877716%2011.114563%2C8.57324219%20C14.549319%2C7.58817492%2018.2608643%2C7.14562988%2018.2608643%2C7.14562988%20Z%22%20id%3D%22Path-196%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

.progress-spinner-overlay {
  background-color: var(--cds-global-color-white);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.numeric-input-wrapper {
  position: relative;
  line-height: calc(4 * var(--clr-forms-baseline));
}
.numeric-input-wrapper .unit {
  position: absolute;
  font-size: 13px;
}
.numeric-input-wrapper .unit-left {
  left: 0.25rem;
}
.numeric-input-wrapper .unit-right {
  right: 0.25rem;
}

.date-time-container clr-date-container {
  flex: 1 1 auto;
  margin-left: 0;
  margin-right: 0;
}
.date-time-container clr-date-container .clr-input-wrapper {
  display: flex;
}
.date-time-container input[type=time] {
  margin-left: 1rem;
}

.search-input-wrapper {
  position: relative;
}
.search-input-wrapper .search-input {
  padding-left: 1.4rem;
  padding-right: 1.2rem;
}
.search-input-wrapper.has-value .delete-button {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  height: calc(4 * var(--clr-forms-baseline));
  line-height: 1rem;
  margin: 0;
  padding: 0;
  width: 1rem;
}
.search-input-wrapper .delete-button {
  display: none;
}
.search-input-wrapper .search-symbol {
  position: absolute;
  left: 0.25rem;
  top: 0.15rem;
}

.quick-list .quick-list-option {
  display: flex;
  margin-bottom: 0.25rem;
}
.quick-list .quick-list-option .quick-list-trash {
  margin-top: -0.25rem !important;
  margin-right: 0 !important;
  padding-right: 2px;
}
.quick-list .quick-list-option .quick-list-trash-ext {
  padding-right: 24px;
}
.quick-list .quick-list-input {
  flex: 1;
}
.quick-list .quick-list-select {
  width: 100%;
}
.quick-list .quick-list-add {
  padding: 0;
  text-align: left;
}
.quick-list .quick-list-addcompact {
  margin-top: -5px !important;
  margin-right: 0 !important;
  padding-left: 2px;
  padding-right: 2px;
}

.avatar-circle {
  display: flex;
}

.avatar-initials {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #707070;
  border-radius: 100%;
  color: var(--cds-global-color-white);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  font-size: 0.8em;
}

:hover > .clr-avatar .avatar-initials,
:focus-within > .clr-avatar .avatar-initials {
  background-color: var(--clr-btn-link-color);
  cursor