/* This code is mainly generated by the Theme Designer,
   therefore linting has been turned off. */
/* eslint-disable */

if (!Array.prototype.find) {
    Array.prototype.find = function(test) {
        var len = this.length;
        for (var i = 0; i < len; ++i) {
            if (test(this[i], i)) {
                return this[i];
            }
        }
        return undefined;
    };
}

// Add cssBaseTheme
(() => {
// Make sure this data is local, so it can be unloaded

// CSS Base-Theme START
const cssBaseTheme =
`<style>
ptc1-divider:not([no-wc-style]) {
  padding: 0px 0px 0px 0px;
}

ptcs-breadcrumb:not([no-wc-style]):focus {
  outline: none;
}

ptcs-button:not([no-wc-style])[variant=primary] {
  background: #0094c8;
  border-color: #0094c8;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

ptcs-button:not([no-wc-style])[variant=primary]:not([disabled]):hover {
  background: #1d5f90;
  border-color: #1d5f90;
}

ptcs-button:not([no-wc-style])[variant=primary]:not([disabled]):hover:active {
  background: #005a79;
  border-color: #005a79;
}

ptcs-button:not([no-wc-style])[variant=primary][disabled] {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

ptcs-button:not([no-wc-style])[variant=primary]:focus {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

ptcs-button:not([no-wc-style])[variant=secondary] {
  background: #adb5bd;
  border-color: #adb5bd;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

ptcs-button:not([no-wc-style])[variant=secondary]:not([disabled]):hover {
  background: #1d5f90;
  border-color: #1d5f90;
}

ptcs-button:not([no-wc-style])[variant=secondary]:not([disabled]):hover:active {
  background: #005a79;
  border-color: #005a79;
}

ptcs-button:not([no-wc-style])[variant=secondary][disabled] {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

ptcs-button:not([no-wc-style])[variant=secondary]:focus {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

ptcs-button:not([no-wc-style])[variant=tertiary] {
  background: rgba(0,0,0,0);
  border-color: #adb5bd;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

ptcs-button:not([no-wc-style])[variant=tertiary]:not([disabled]):hover {
  background: #1d5f90;
  border-color: #1d5f90;
}

ptcs-button:not([no-wc-style])[variant=tertiary]:not([disabled]):hover:active {
  background: #005a79;
  border-color: #005a79;
}

ptcs-button:not([no-wc-style])[variant=tertiary][disabled] {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

ptcs-button:not([no-wc-style])[variant=tertiary]:focus {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

ptcs-button:not([no-wc-style])[variant=danger] {
  background: #f25454;
  border-color: #f25454;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

ptcs-button:not([no-wc-style])[variant=danger]:not([disabled]):hover {
  background: #ba7466;
  border-color: #ba7466;
}

ptcs-button:not([no-wc-style])[variant=danger]:not([disabled]):hover:active {
  background: #a33434;
  border-color: #a33434;
}

ptcs-button:not([no-wc-style])[variant=danger][disabled] {
  background: #f7f7f7;
  border-color: #bdb1ae;
  color: #aeb6bd;
}

ptcs-button:not([no-wc-style])[variant=danger]:focus {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

ptcs-button:not([no-wc-style])[variant=transparent] {
  background: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

ptcs-button:not([no-wc-style])[variant=transparent]:not([disabled]):hover {
  background: #1d5f90;
  border-color: #1d5f90;
}

ptcs-button:not([no-wc-style])[variant=transparent]:not([disabled]):hover:active {
  background: #005a79;
  border-color: #005a79;
}

ptcs-button:not([no-wc-style])[variant=transparent][selected] {
  background: #0094c8;
  border-color: #0094c8;
}

ptcs-button:not([no-wc-style])[variant=transparent][disabled] {
  color: #aeb6bd;
}

ptcs-button:not([no-wc-style])[variant=transparent]:focus {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

ptcs-button:not([no-wc-style])[variant=small] {
  background: rgba(0,0,0,0);
  border-color: #adb5bd;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  text-align: inherit;
  color: #232b2d;
  min-height: 18px;
  min-width: 18px;
  padding: 0px;
}

ptcs-button:not([no-wc-style])[variant=small]:not([disabled]):hover {
  background: #1d5f90;
  border-color: #1d5f90;
}

ptcs-button:not([no-wc-style])[variant=small]:not([disabled]):hover:active {
  background: #005a79;
  border-color: #005a79;
}

ptcs-button:not([no-wc-style])[variant=small][selected] {
  background: #0094c8;
  border-color: #0094c8;
}

ptcs-button:not([no-wc-style])[variant=small][disabled] {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

ptcs-button:not([no-wc-style])[variant=small]:focus {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 2px;
  box-shadow: inset 0 0 0 3px white;
}

ptcs-chart-axis:not([no-wc-style]) {
  border-style: none;
  outline: none;
}

ptcs-chart-bar:not([no-wc-style]) {
  min-width: 273px ;
  min-height: 150px;
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-chart-core-bar:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 2px;
  --ptcs-focus-outline: solid #0094c8 2px;
  --ptcs-focus-overlay--border-color: #ffffff;
  --ptcs-selected-bar-overlay--padding: 2px;
  line-height: 11px;
}

ptcs-chart-core-bar:not([no-wc-style]):focus {
  outline: none;
}

ptcs-chart-core-line:not([no-wc-style]):focus {
  outline: none;
}

ptcs-chart-core-schedule:not([no-wc-style]):focus {
  outline: none;
  --ptcs-focus-overlay--padding: 3;
}

ptcs-chart-core-schedule:not([no-wc-style]) {
  box-sizing: border-box;
}

ptcs-chart-layout:not([no-wc-style]) {
  padding: 32px;
}

ptcs-chart-legend:not([no-wc-style]) {
  outline: none;
}

ptcs-chart-line:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-chart-schedule:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
  outline: none;
}

ptcs-chart-zoom-interval:not([no-wc-style]) {
  box-sizing: box-model;
  outline: none;
}

ptcs-chart-zoom-range:not([no-wc-style]) {
  box-sizing: box-model;
}

ptcs-chart-zoom-slider:not([no-wc-style]) {
  box-sizing: box-model;
  outline: outline;
}

ptcs-chart-zoom:not([no-wc-style])[side=bottom] {
  margin-top: 16px;
}

ptcs-chart-zoom:not([no-wc-style]) {
  outline: none;
}

ptcs-checkbox:not([no-wc-style]):focus {
  outline: none;
  border-color: var(--ptcs-focus-overlay-border-color, #0094c8);
  border-width: var(--ptcs-focus-overlay-border-width, 2px);
  border-style: var(--ptcs-focus-overlay-border-style, solid);
}

ptcs-checkbox:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
  padding: 9px 8px 9px 8px;
  min-width: 34px;
  min-height: 19px;
}

ptcs-chip-data-filter-chip-child:not([no-wc-style]) {
  padding-right: 16px;
}

ptcs-chip-data-filter-selector-dropdown:not([no-wc-style]) {
  --ptcs-chip-data-filter-selector-dropdown-subcomponent-height: 34px;
  --ptcs-chip-data-filter-selector-dropdown-subcomponent-spacing: 12px;
  --ptcs-chip-data-filter-selector-dropdown-focus-overlay--padding: 0px;
  --ptcs-chip-data-filter-selector-dropdown-focus-overlay--border-style: solid;
  --ptcs-chip-data-filter-selector-dropdown-focus-overlay--border-color: #0094c8;
  --ptcs-chip-data-filter-selector-dropdown-number-case-subcomponent-width: 128px;
  --ptcs-chip-data-filter-selector-dropdown-base-subcomponent-width: 273px;
}

ptcs-datepicker-calendar:not([no-wc-style]):focus {
  outline: none;
}

ptcs-datepicker-input-labels:not([no-wc-style]) {
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  padding: 0px 32px;
}

ptcs-datepicker-input-labels:not([no-wc-style])[disabled] {
  border-color: #aeb5bd;
  background: #f7f7f7;
  color: #aeb6bd;
}

ptcs-datepicker:not([no-wc-style]):focus {
  outline: none;
}

ptcs-datepicker:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
  min-width: 34px;
  min-height: 34px;
}

ptcs-divider:not([no-wc-style]) {
  padding: 0px 0px 0px 0px;
}

ptcs-dropdown:not([no-wc-style]):focus {
  outline: none;
}

ptcs-dropdown:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
  min-height: 34px;
  min-width: 34px;
}

ptcs-dynamic-panel:not([no-wc-style])[disabled] {
  opacity: 0.5;
}

ptcs-dynamic-panel:not([no-wc-style]) {
  min-height: 50px;
  min-width: 50px;
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-dynamic-panel:not([no-wc-style]):focus {
  outline: none;
}

ptcs-icon:not([no-wc-style]) {
  padding: 8px;
}

ptcs-icon:not([no-wc-style])[size=small] {
  width: 34px;
  height: 34px;
}

ptcs-icon:not([no-wc-style])[size=medium] {
  width: 38px;
  height: 38px;
}

ptcs-icon:not([no-wc-style])[size=large] {
  width: 76px;
  height: 76px;
}

ptcs-icon:not([no-wc-style])[size=xlarge] {
  width: 96px;
  height: 96px;
}

ptcs-label:not([no-wc-style])[variant=header] {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 26px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: normal;
}

ptcs-label:not([no-wc-style])[variant=sub-header] {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 20px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: normal;
}

ptcs-label:not([no-wc-style])[variant=body] {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: normal;
  outline: none;
}

ptcs-label:not([no-wc-style])[variant=label] {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: 600;
}

ptcs-label:not([no-wc-style])[variant=title] {
  color: #232B2D;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  border-color: #c2c7ce;
  border-width: 0px;
}

ptcs-label:not([no-wc-style])[variant=caption] {
  color: #232b2d;
  font-family: Arial;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  border-color: global-color-line;
  border-width: 0px;
}

ptcs-link:not([no-wc-style])[variant=primary]:focus {
  outline: none;
}

ptcs-link:not([no-wc-style])[variant=primary] {
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-link:not([no-wc-style])[variant=secondary]:focus {
  outline: none;
}

ptcs-link:not([no-wc-style])[variant=secondary] {
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-list-shuttle:not([no-wc-style]) {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  min-height: 446px;
}

ptcs-list-shuttle:not([no-wc-style])[vertical] {
  min-width: 273px;
  min-height: 738px;
}

ptcs-list:not([no-wc-style]):focus {
  outline: none;
}

ptcs-pagination:not([no-wc-style]) {
  padding: 16px 16px 0px 16px;
}

ptcs-pagination:not([no-wc-style]):not([disabled])[size='minimum'] {
  min-width: 235px;
}

ptcs-property-display:not([no-wc-style]) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-radio:not([no-wc-style]):focus {
  outline: none;
}

ptcs-radio:not([no-wc-style]) {
  padding-top: 9px;
  padding-bottom: 9px;
  margin: 0px;
  padding-left: 8px;
  padding-right: 8px;
  --ptcs-focus-overlay--padding: 0px;
}

ptcs-slider:not([no-wc-style]) {
  border-width: 1px;
  border-color: #c2c7ce;
  border-radius: 0px;
  border-style: none;
}

ptcs-tab-set:not([no-wc-style])[disabled] {
  opacity: 0.5;
}

ptcs-tabs:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 2px;
  --ptcs-focus-overlay--padding-top: 0px;
  --ptcs-focus-overlay--padding-left: 3px;
  --ptcs-focus-overlay--padding-right: 3px;
}

ptcs-textarea:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 1px;
  min-width: 34px;
  min-height: 34px;
}

ptcs-textfield:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
  min-height: 34px;
  min-width: 34px;
}

ptcs-textfield:not([no-wc-style]):focus-within {
  outline: none;
}

ptcs-textfield:not([no-wc-style])[disabled]:focus-within {
  outline: none;
}

ptcs-textfield:not([no-wc-style])[disabled] {
  color: #aeb6bd;
}

ptcs-toggle-button:not([no-wc-style]):focus {
  outline: none;
}

ptcs-toggle-button:not([no-wc-style]) {
  --ptcs-focus-overlay--padding: 0px;
  padding: 10px 8px 10px 8px;
  min-height: 34px;
  min-width: 34px;
}

ptcs-tooltip-overlay:not([no-wc-style]) {
  max-width: 546px;
}

ptcs-value-display:not([no-wc-style]) {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: none;
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --valuedisplay-modal-shadowcolor: #232b2d;
  --value-display-vdcontainer-background-color: #ffffff;
}

</style>

<ptcs-style-unit wc="PTC1-DIVIDER">
:host {
  padding: 0px 0px 0px 0px;
}

[part~=line] {
  background: #d8dbde;
  height: 1px;
  width: 100%;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BREADCRUMB">
[part~=link] {
  border-color: rgba(0,0,0,0);
  border-style: solid;
  border-width: 0px;
}

[part~=root] {
  background: rgba(0,0,0,0);
  border-style: none;
  border-width: 0px;
  border-color: #c2c7ce;
  min-height: 34px;
  margin-left: 16px;
}

:host(:focus) {
  outline: none;
}

[part~=leftbutton] {
  margin: 0px;
}

[part~=rightbutton] {
  margin: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BREADCRUMB:link">
[part~=link] {
  padding-left: 8px;
  padding-right: 8px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BUTTON.primary">
:host {
  background: #0094c8;
  border-color: #0094c8;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

:host(:not([disabled]):hover) {
  background: #1d5f90;
  border-color: #1d5f90;
}

:host(:not([disabled]):hover:active) {
  background: #005a79;
  border-color: #005a79;
}

:host([disabled]) {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

[part~=icon] {
  width: 18px;
  height: 18px;
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host([mode=label]) [part~=root] {
  padding: 0px 20px;
}

:host([mode=icon]) [part~=root] {
  max-width: 34px;
  max-height: 34px;
}

:host([mode='icon+label']) [part~=root] {
  padding: 0px 20px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BUTTON.secondary">
:host {
  background: #adb5bd;
  border-color: #adb5bd;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

:host(:not([disabled]):hover) {
  background: #1d5f90;
  border-color: #1d5f90;
}

:host(:not([disabled]):hover:active) {
  background: #005a79;
  border-color: #005a79;
}

:host([disabled]) {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

[part~=icon] {
  width: 18px;
  height: 18px;
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host([mode='icon+label']) [part~=root] {
  padding: 0px 20px;
}

:host([mode=label]) [part~=root] {
  padding: 0px 20px;
}

:host([mode=icon]) [part~=root] {
  max-width: 34px;
  max-height: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BUTTON.tertiary">
:host {
  background: rgba(0,0,0,0);
  border-color: #adb5bd;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

:host(:not([disabled]):hover) {
  background: #1d5f90;
  border-color: #1d5f90;
}

:host(:not([disabled]):hover:active) {
  background: #005a79;
  border-color: #005a79;
}

:host([disabled]) {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

[part~=icon] {
  width: 18px;
  height: 18px;
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host([mode=label]) [part~=root] {
  padding: 0px 20px;
}

:host([mode='icon+label']) [part~=root] {
  padding: 0px 20px;
}

:host([mode=icon]) [part~=root] {
  max-width: 34px;
  max-height: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BUTTON.danger">
:host {
  background: #f25454;
  border-color: #f25454;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

:host(:not([disabled]):hover) {
  background: #ba7466;
  border-color: #ba7466;
}

:host(:not([disabled]):hover:active) {
  background: #a33434;
  border-color: #a33434;
}

:host([disabled]) {
  background: #f7f7f7;
  border-color: #bdb1ae;
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

[part~=icon] {
  width: 18px;
  height: 18px;
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host([mode='icon+label']) [part~=root] {
  padding: 0px 20px;
}

:host([mode=label]) [part~=root] {
  padding: 0px 20px;
}

:host([mode=icon]) [part~=root] {
  max-width: 34px;
  max-height: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BUTTON.transparent">
:host {
  background: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  border-radius: 4px;
  text-align: inherit;
  color: #232b2d;
  min-width: 34px;
}

:host(:not([disabled]):hover) {
  background: #1d5f90;
  border-color: #1d5f90;
}

:host(:not([disabled]):hover:active) {
  background: #005a79;
  border-color: #005a79;
}

:host([selected]) {
  background: #0094c8;
  border-color: #0094c8;
}

:host([disabled]) {
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 4px;
  box-shadow: inset 0 0 0 3px white;
}

[part~=icon] {
  width: 18px;
  height: 18px;
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host([mode='icon+label']) [part~=root] {
  padding: 0px 20px;
}

:host([mode=label]) [part~=root] {
  padding: 0px 20px;
}

:host([mode=icon]) [part~=root] {
  max-width: 34px;
  max-height: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-BUTTON.small">
:host {
  background: rgba(0,0,0,0);
  border-color: #adb5bd;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  text-align: inherit;
  color: #232b2d;
  min-height: 18px;
  min-width: 18px;
  padding: 0px;
}

:host(:not([disabled]):hover) {
  background: #1d5f90;
  border-color: #1d5f90;
}

:host(:not([disabled]):hover:active) {
  background: #005a79;
  border-color: #005a79;
}

:host([selected]) {
  background: #0094c8;
  border-color: #0094c8;
}

:host([disabled]) {
  background: #f7f7f7;
  border-color: #aeb5bd;
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --ptcs-focus-overlay--border-radius: 2px;
  box-shadow: inset 0 0 0 3px white;
}

[part~=icon] {
  height: calc(18px - 2 * 1px);
  width: calc(18px - 2 * 1px);
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-AXIS">
[part~=label] {
  font-family: Arial;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: #232b2d;
}

:host {
  border-style: none;
  outline: none;
}

[part~=tick-label] {
  color: #232b2d;
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  --ptcs-focus-overlay--padding: 8px;
  outline: none;
}

:host([side=bottom]) [part~=tick-label] {
  padding: 0 4px;
}

:host([side=top]) [part~=tick-label] {
  padding: 0 4px;
}

:host([side=bottom][rotate-ticks]) [part~=tick-label] {
  padding: 4px 0;
}

:host([rotate-ticks][side=top]) [part~=tick-label] {
  padding: 4px 0;
}

[part~=tick-link] {
  --ptcs-focus-overlay--padding: 8px;
  margin-right: 1px;
}

:host([side=bottom]) [part~=tick-link] {
  padding: 0 4px;
}

:host([side=top]) [part~=tick-link] {
  padding: 0 4px;
}

:host([side=bottom][rotate-ticks]) [part~=tick-link] {
  padding: 4px 0;
}

:host([rotate-ticks][side=top]) [part~=tick-link] {
  padding: 4px 0;
}

[part~=label-container] {
  --ptcs-chart-axis-label--vertical-margin: 16px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-AXIS:tick-label">
[part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-AXIS:tick-link">
[part~=label] {
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-BAR">
:host {
  min-width: 273px ;
  min-height: 150px;
  --ptcs-focus-overlay--padding: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-COORD">
[part~=ruler] {
  background: #c2c7ce;
}

[part~=zero-ruler] {
  background: #c2c7ce;
}

:host(:not([flip-axes])) [part~=zero-ruler] {
  height: 3px;
}

:host([flip-axes]) [part~=zero-ruler] {
  width: 3px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-CORE-BAR">
[part~=bar][legend=L1] {
  background: #f05b80;
}

[part~=bar][legend=L2] {
  background: #8D909A;
}

[part~=bar][legend=L3] {
  background: #bb68c8;
}

[part~=bar][legend=L4] {
  background: #2f97ff;
}

[part~=bar][legend=L5] {
  background: #EB6D00;
}

[part~=bar][legend=L6] {
  background: #b8849a;
}

[part~=bar][legend=L7] {
  background: #8A4FF7;
}

[part~=bar][legend=L8] {
  background: #139492;
}

[part~=bar][legend=L9] {
  background: #AA9103;
}

[part~=bar][legend=L10] {
  background: #C33E70;
}

[part~=bar][legend=L11] {
  background: #904B6F;
}

[part~=bar][legend=L12] {
  background: #9D27B0;
}

[part~=bar][legend=L13] {
  background: #3363D8;
}

[part~=bar][legend=L14] {
  background: #00709E;
}

[part~=bar][legend=L15] {
  background: #2A5B59;
}

[part~=bar][legend=L16] {
  background: #381394;
}

[part~=bar][legend=L17] {
  background: #8F3809;
}

[part~=bar][legend=L18] {
  background: #8E6514;
}

[part~=bar][legend=L19] {
  background: #5D5F69;
}

[part~=bar][legend=L20] {
  background: #86335E;
}

[part~=bar][legend=L21] {
  background: #490E3E;
}

[part~=bar][legend=L22] {
  background: #56226E;
}

[part~=bar][legend=L23] {
  background: #2B387F;
}

[part~=bar][legend=L24] {
  background: #1D496E;
}

[part~=bar]:hover {
  filter: brightness(0.8);
}

[part~=value] {
  box-sizing: border-box;
  padding: 4px;
  background: rgba(255, 255, 255, 0.3);
  color: #232b2d;
}

:host {
  --ptcs-focus-overlay--padding: 2px;
  --ptcs-focus-outline: solid #0094c8 2px;
  --ptcs-focus-overlay--border-color: #ffffff;
  --ptcs-selected-bar-overlay--padding: 2px;
  line-height: 11px;
}

:host(:focus) {
  outline: none;
}

[part~=drag-rect] {
  opacity: 0.5;
  background: #FFCCCC;
}

[part~=selected] {
  background: #ffffff;
  --ptcs-selected-bar-overlay--padding: 2px;
  z-index: 12;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-CORE-LINE">
[part~=line] {
  stroke-width: 2.5;
  transition: opacity 500ms;
}

:host([stacked]) [part~=line] {
  display: none;
}

[part~=line][legend=L1] {
  stroke: #f05b80;
}

[part~=line][legend=L2] {
  stroke: #8D909A;
}

[part~=line][legend=L3] {
  stroke: #bb68c8;
}

[part~=line][legend=L4] {
  stroke: #2f97ff;
}

[part~=line][legend=L5] {
  stroke: #EB6D00;
}

[part~=line][legend=L6] {
  stroke: #b8849a;
}

[part~=line][legend=L7] {
  stroke: #8A4FF7;
}

[part~=line][legend=L8] {
  stroke: #139492;
}

[part~=line][legend=L9] {
  stroke: #AA9103;
}

[part~=line][legend=L10] {
  stroke: #C33E70;
}

[part~=line][legend=L11] {
  stroke: #904B6F;
}

[part~=line][legend=L12] {
  stroke: #9D27B0;
}

[part~=line][legend=L13] {
  stroke: #3363D8;
}

[part~=line][legend=L14] {
  stroke: #00709E;
}

[part~=line][legend=L15] {
  stroke: #2A5B59;
}

[part~=line][legend=L16] {
  stroke: #381394;
}

[part~=line][legend=L17] {
  stroke: #8F3809;
}

[part~=line][legend=L18] {
  stroke: #8E6514;
}

[part~=line][legend=L19] {
  stroke: #5D5F69;
}

[part~=line][legend=L20] {
  stroke: #86335E;
}

[part~=line][legend=L21] {
  stroke: #490E3E;
}

[part~=line][legend=L22] {
  stroke: #56226E;
}

[part~=line][legend=L23] {
  stroke: #2B387F;
}

[part~=line][legend=L24] {
  stroke: #1D496E;
}

[part~=area] {
  transition: opacity 500ms;
  --ptcs-chart-area--opacity: 0.5;
}

:host(:not([stacked])) [part~=area] {
  opacity: 0.5;
}

[part~=area][legend=L1] {
  fill: #f05b80;
}

[part~=area][legend=L2] {
  fill: #8D909A;
}

[part~=area][legend=L3] {
  fill: #bb68c8;
}

[part~=area][legend=L4] {
  fill: #2f97ff;
}

[part~=area][legend=L5] {
  fill: #EB6D00;
}

[part~=area][legend=L6] {
  fill: #b8849a;
}

[part~=area][legend=L7] {
  fill: #8A4FF7;
}

[part~=area][legend=L8] {
  fill: #139492;
}

[part~=area][legend=L9] {
  fill: #AA9103;
}

[part~=area][legend=L10] {
  fill: #C33E70;
}

[part~=area][legend=L11] {
  fill: #904B6F;
}

[part~=area][legend=L12] {
  fill: #9D27B0;
}

[part~=area][legend=L13] {
  fill: #3363D8;
}

[part~=area][legend=L14] {
  fill: #00709E;
}

[part~=area][legend=L15] {
  fill: #2A5B59;
}

[part~=area][legend=L16] {
  fill: #381394;
}

[part~=area][legend=L17] {
  fill: #8F3809;
}

[part~=area][legend=L18] {
  fill: #8E6514;
}

[part~=area][legend=L19] {
  fill: #5D5F69;
}

[part~=area][legend=L20] {
  fill: #86335E;
}

[part~=area][legend=L21] {
  fill: #490E3E;
}

[part~=area][legend=L22] {
  fill: #56226E;
}

[part~=area][legend=L23] {
  fill: #2B387F;
}

[part~=area][legend=L24] {
  fill: #1D496E;
}

[part~=marker] {
  stroke: #ffffff;
  stroke-width: 1;
}

.marker-legend[legend=L1] [part~=marker] {
  fill: #f05b80;
}

.marker-legend[legend=L2] [part~=marker] {
  fill: #8D909A;
}

.marker-legend[legend=L3] [part~=marker] {
  fill: #bb68c8;
}

.marker-legend[legend=L4] [part~=marker] {
  fill: #2f97ff;
}

.marker-legend[legend=L5] [part~=marker] {
  fill: #EB6D00;
}

.marker-legend[legend=L6] [part~=marker] {
  fill: #b8849a;
}

.marker-legend[legend=L7] [part~=marker] {
  fill: #8A4FF7;
}

.marker-legend[legend=L8] [part~=marker] {
  fill: #139492;
}

.marker-legend[legend=L9] [part~=marker] {
  fill: #AA9103;
}

.marker-legend[legend=L10] [part~=marker] {
  fill: #C33E70;
}

.marker-legend[legend=L11] [part~=marker] {
  fill: #904B6F;
}

.marker-legend[legend=L12] [part~=marker] {
  fill: #9D27B0;
}

.marker-legend[legend=L13] [part~=marker] {
  fill: #3363D8;
}

.marker-legend[legend=L14] [part~=marker] {
  fill: #00709E;
}

.marker-legend[legend=L15] [part~=marker] {
  fill: #2A5B59;
}

.marker-legend[legend=L16] [part~=marker] {
  fill: #381394;
}

.marker-legend[legend=L17] [part~=marker] {
  fill: #8F3809;
}

.marker-legend[legend=L18] [part~=marker] {
  fill: #8E6514;
}

.marker-legend[legend=L19] [part~=marker] {
  fill: #5D5F69;
}

.marker-legend[legend=L20] [part~=marker] {
  fill: #86335E;
}

.marker-legend[legend=L21] [part~=marker] {
  fill: #490E3E;
}

.marker-legend[legend=L22] [part~=marker] {
  fill: #56226E;
}

.marker-legend[legend=L23] [part~=marker] {
  fill: #2B387F;
}

.marker-legend[legend=L24] [part~=marker] {
  fill: #1D496E;
}

[part~=value] {
  background: rgba(255, 255, 255, 0.3);
  color: #232b2d;
  font-family: Arial;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
}

[part~=focus] {
  stroke: #0094c8;
  stroke-width: 2px;
  fill: none;
}

[part~=selected] {
  fill: #ffffff;
  stroke: none;
}

[part~=drag-rect] {
  fill: #eaf6ff;
  fill-opacity: .5;
}

[part~=hover-line] {
  stroke: #0094c8;
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

:host([marker]:not([marker=none])) .marker-legend[legend] [part~=hover-marker] {
  fill: #232b2d;
  fill-opacity: 0.5;
}

:host(:focus) {
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-CORE-SCHEDULE">
[part~=task][legend=L1] {
  background: #f05b80;
}

[part~=task][legend=L2] {
  background: #8D909A;
}

[part~=task][legend=L3] {
  background: #bb68c8;
}

[part~=task][legend=L4] {
  background: #2f97ff;
}

[part~=task][legend=L5] {
  background: #EB6D00;
}

[part~=task][legend=L6] {
  background: #b8849a;
}

[part~=task][legend=L7] {
  background: #8A4FF7;
}

[part~=task][legend=L8] {
  background: #139492;
}

[part~=task][legend=L9] {
  background: #AA9103;
}

[part~=task][legend=L10] {
  background: #C33E70;
}

[part~=task][legend=L11] {
  background: #904B6F;
}

[part~=task][legend=L12] {
  background: #9D27B0;
}

[part~=task][legend=L13] {
  background: #3363D8;
}

[part~=task][legend=L14] {
  background: #00709E;
}

[part~=task][legend=L15] {
  background: #2A5B59;
}

[part~=task][legend=L16] {
  background: #381394;
}

[part~=task][legend=L17] {
  background: #8F3809;
}

[part~=task][legend=L18] {
  background: #8E6514;
}

[part~=task][legend=L19] {
  background: #5D5F69;
}

[part~=task][legend=L20] {
  background: #86335E;
}

[part~=task][legend=L21] {
  background: #490E3E;
}

[part~=task][legend=L22] {
  background: #56226E;
}

[part~=task][legend=L23] {
  background: #2B387F;
}

[part~=task][legend=L24] {
  background: #1D496E;
}

[part~=task]:hover {
  z-index: 10;
  filter: brightness(0.8);
}

[part~=task] {
  transition: opacity 1000ms;
  background: #adb5bd;
}

[part~=task][selected] {
  z-index: 9;
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 2px;
  border-style: solid;
}

:host(:focus) [part~=task][focus] {
  z-index: 12;
}

[part~=task][selected][legend=L1] {
  border-color: #f05b80;
}

[part~=task][selected][legend=L10] {
  border-color: #C33E70;
}

[part~=task][selected][legend=L11] {
  border-color: #904B6F;
}

[part~=task][selected][legend=L12] {
  border-color: #9D27B0;
}

[part~=task][selected][legend=L13] {
  border-color: #3363D8;
}

[part~=task][selected][legend=L14] {
  border-color: #00709E;
}

[part~=task][selected][legend=L15] {
  border-color: #2A5B59;
}

[part~=task][selected][legend=L16] {
  border-color: #381394;
}

[part~=task][selected][legend=L17] {
  border-color: #8F3809;
}

[part~=task][selected][legend=L18] {
  border-color: #8E6514;
}

[part~=task][selected][legend=L19] {
  border-color: #5D5F69;
}

[part~=task][selected][legend=L2] {
  border-color: #8D909A;
}

[part~=task][selected][legend=L20] {
  border-color: #86335E;
}

[part~=task][selected][legend=L21] {
  border-color: #490E3E;
}

[part~=task][selected][legend=L22] {
  border-color: #56226E;
}

[part~=task][selected][legend=L23] {
  border-color: #2B387F;
}

[part~=task][selected][legend=L24] {
  border-color: #1D496E;
}

[part~=task][selected][legend=L3] {
  border-color: #bb68c8;
}

[part~=task][selected][legend=L4] {
  border-color: #2f97ff;
}

[part~=task][selected][legend=L5] {
  border-color: #EB6D00;
}

[part~=task][selected][legend=L6] {
  border-color: #b8849a;
}

[part~=task][selected][legend=L7] {
  border-color: #8A4FF7;
}

[part~=task][selected][legend=L8] {
  border-color: #139492;
}

[part~=task][selected][legend=L9] {
  border-color: #AA9103;
}

[part~=task]:hover[selected] {
  filter: contrast(200%);
  opacity: 0.7;
  background: dd;
}

[part~=group] {
  background: #f7f7f7;
}

[part~=drag-rect] {
  background: #eaf6ff;
  opacity: .5;
  z-index: 11;
}

:host(:focus) {
  outline: none;
  --ptcs-focus-overlay--padding: 3;
}

:host {
  box-sizing: border-box;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-LAYOUT">
[part~=title] {
  color: #232b2d;
  font-family: Arial;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}

:host([eff-title-pos=top]) [part~=title] {
  margin-bottom: 16px;
}

:host([eff-title-pos=bottom]) [part~=title] {
  margin-top: 16px;
}

[part~=notes] {
  color: #232b2d;
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
}

:host([eff-notes-pos=top]) [part~=notes] {
  margin-bottom: 32px;
}

:host([eff-notes-pos=bottom]) [part~=notes] {
  margin-top: 32px;
}

:host([eff-notes-pos=left]) [part~=notes] {
  margin-right: 32px;
}

:host([eff-notes-pos=right]) [part~=notes] {
  margin-left: 32px;
}

:host([eff-notes-pos=right]) [part~=legend] {
  margin-left: 32px;
}

:host([eff-legend-pos=right]) [part~=legend] {
  margin-left: 32px;
}

:host([eff-legend-pos=top]) [part~=legend] {
  margin-bottom: 32px;
}

:host([eff-legend-pos=bottom]) [part~=legend] {
  margin-top: 32px;
}

:host([eff-legend-pos=left]) [part~=legend] {
  margin-right: 32px;
}

:host {
  padding: 32px;
}

:host(:not([flip-axes])) [part~=yzoom] {
  margin-right: 32px;
}

:host([flip-axes]) [part~=xzoom] {
  margin-right: 32px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-LEGEND">
[part=item][legend=L1] [part~=marker] {
  background: #f05b80;
}

[part=item][legend=L2] [part~=marker] {
  background: #8D909A;
}

[part=item][legend=L3] [part~=marker] {
  background: #bb68c8;
}

[part=item][legend=L4] [part~=marker] {
  background: #2f97ff;
}

[part=item][legend=L5] [part~=marker] {
  background: #EB6D00;
}

[part=item][legend=L6] [part~=marker] {
  background: #b8849a;
}

[part=item][legend=L7] [part~=marker] {
  background: #8A4FF7;
}

[part=item][legend=L8] [part~=marker] {
  background: #139492;
}

[part=item][legend=L9] [part~=marker] {
  background: #AA9103;
}

[part=item][legend=L10] [part~=marker] {
  background: #C33E70;
}

[part=item][legend=L11] [part~=marker] {
  background: #904B6F;
}

[part=item][legend=L12] [part~=marker] {
  background: #9D27B0;
}

[part=item][legend=L13] [part~=marker] {
  background: #3363D8;
}

[part=item][legend=L14] [part~=marker] {
  background: #00709E;
}

[part=item][legend=L15] [part~=marker] {
  background: #2A5B59;
}

[part=item][legend=L16] [part~=marker] {
  background: #381394;
}

[part=item][legend=L17] [part~=marker] {
  background: #8F3809;
}

[part=item][legend=L18] [part~=marker] {
  background: #8E6514;
}

[part=item][legend=L19] [part~=marker] {
  background: #5D5F69;
}

[part=item][legend=L20] [part~=marker] {
  background: #86335E;
}

[part=item][legend=L21] [part~=marker] {
  background: #490E3E;
}

[part=item][legend=L22] [part~=marker] {
  background: #56226E;
}

[part=item][legend=L23] [part~=marker] {
  background: #2B387F;
}

[part=item][legend=L24] [part~=marker] {
  background: #1D496E;
}

[part~=marker] {
  width: 16px;
  height: 16px;
  background: #f0f0f0;
  margin-right: 16px;
}

[part~=legend] {
  color: #232b2d;
  font-family: Arial;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}

[part~=grid] {
  grid-column-gap: 32px;
  grid-row-gap: 16px;
}

:host {
  outline: none;
}

[part~=item] {
  --ptcs-focus-overlay--padding: 3px;
  outline: none;
}

[part~=checkbox] {
  margin-right: 7px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-LINE">
:host {
  --ptcs-focus-overlay--padding: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-SCHEDULE">
:host {
  --ptcs-focus-overlay--padding: 0px;
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-SCHEDULE:legend">
[part~=legend] {
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-ZOOM-INTERVAL">
:host {
  box-sizing: box-model;
  outline: none;
}

[part~=pick-start] {
  margin-right: 16px;
}

[part~=interval] {
  flex: 0 0 auto;
  width: 160px;
  margin-top: 16px;
}

[part~=pick] {
  flex: 0 0 auto;
}

[part~=reset] {
  margin-left: 32px;
}

[part~=pick-end] {
  margin-right: 16px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-ZOOM-RANGE">
:host {
  box-sizing: box-model;
}

[part~=reset] {
  margin-bottom: 1.5px;
  margin-left: 32px;
  margin-top: 16px;
}

[part~=pick] {
  flex: 0 0 auto;
  margin-top: 16px;
}

[part~=pick-start] {
  margin-right: 16px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-ZOOM-SLIDER">
[part~=tick-line] {
  background: #adb5bd;
}

:host {
  box-sizing: box-model;
  outline: outline;
}

[part~=reset] {
  margin-left: 32px;
}

[part~=zoom-slider] {
  outline: none;
}

[part~=slider] {
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-ZOOM-SLIDER:slider">
[part~=track] {
  background: rgba(200,200,200,0.5);
}

[part~=slider-container] {
  background: rgba(0,0,0,0);
}

[part~=track-between] {
  background: rgba(0,148,200,0.5) !important;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHART-ZOOM">
:host([side=bottom]) {
  margin-top: 16px;
}

:host {
  outline: none;
}

:host([side=bottom]) [part~=slider] {
  margin-top: 16px;
}

[part~=slider] {
  outline: none;
}

[part~=interval-picker] {
  outline: none;
}

[part~=range-picker] {
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHECKBOX">
:host(:not([checked])) [part~=box] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-radius: 0px;
  border-style: solid;
  padding: 0px;
}

:host(:not([disabled]):hover) [part~=box] {
  background: #1d5f90;
  border-color: #1d5f90;
  border-width: 1px;
  border-radius: 0px;
  border-style: solid;
}

:host(:not([disabled])[checked]:hover) [part~=box] {
  background: #1d5f90;
  border-color: #1d5f90;
  border-width: 1px;
  border-radius: 0px;
  border-style: solid;
}

:host(:not([disabled]):hover:active) [part~=box] {
  background: #005a79;
  border-color: #005a79;
  fill: #232b2d;
}

:host(:not([disabled])[checked]:hover:active) [part~=box] {
  background: #005a79;
  border-color: #005a79;
}

:host([checked]) [part~=box] {
  background: #0094c8;
  border-color: #0094c8;
  border-width: 1px;
  border-radius: 0px;
  border-style: solid;
  fill: #232b2d;
}

:host([disabled]:not([checked])) [part~=box] {
  background: #f7f7f7;
  border-color: #c2c7ce;
  border-width: 1px;
  border-radius: 0px;
  border-style: solid;
}

:host([disabled][checked]) [part~=box] {
  color: #aeb6bd;
  background: #f7f7f7;
  border-color: #c2c7ce;
  border-width: 1px;
  border-radius: 0px;
  border-style: solid;
  fill: currentColor;
}

:host(:not([checked])) [part~=check-mark] {
  fill: inherit;
  width: 11px;
  height: 11px;
  --ptcs-use-icon: none;
}

:host(:not([disabled]):hover) [part~=check-mark] {
  fill: rgba(0,0,0,0);
  --ptcs-use-icon: none;
}

:host(:not([disabled])[checked]:hover) [part~=check-mark] {
  fill: inherit;
  width: 11px;
  height: 11px;
  --ptcs-use-icon: e-checkbox-check-selected;
}

:host(:not([disabled]):hover:active) [part~=check-mark] {
  fill: inherit;
}

:host([checked]) [part~=check-mark] {
  fill: inherit;
  width: 11px;
  height: 11px;
  --ptcs-use-icon: e-checkbox-check-selected;
}

:host([disabled]) [part~=check-mark] {
  fill: rgba(0,0,0,0);
  --ptcs-use-icon: none;
}

:host([disabled][checked]) [part~=check-mark] {
  fill: inherit;
  width: 11px;
  height: 11px;
  --ptcs-use-icon: e-checkbox-check-selected;
}

:host(:not([checked])) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host(:not([disabled]):hover) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host(:not([disabled])[checked]:hover) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([checked]) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([disabled]:not([checked])) [part~=label] {
  color: #aeb6bd;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([disabled][checked]) [part~=label] {
  color: #aeb6bd;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host(:focus) {
  outline: none;
  border-color: var(--ptcs-focus-overlay-border-color, #0094c8);
  border-width: var(--ptcs-focus-overlay-border-width, 2px);
  border-style: var(--ptcs-focus-overlay-border-style, solid);
}

:host {
  --ptcs-focus-overlay--padding: 0px;
  padding: 9px 8px 9px 8px;
  min-width: 34px;
  min-height: 19px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHIP-DATA-FILTER-CHIP-CHILD">
[part~=oval-container] {
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-radius: 17px;
  border-color: #adb5bd;
  color: #adb5bd;
  min-height: 17px;
  margin-bottom: 16px;
}

[part~=content] {
  font-size: 14px;
  font-weight: normal;
  background: none;
  font-family: Arial;
  color: #adb5bd;
  min-width: 50px;
  max-width: 238px;
  min-height: 17px;
  padding-left: 15px;
}

[part~=cross-button] {
  border-radius: 17px;
  background: none;
  border-style: none;
  color: #adb5bd;
  width: 18px;
  height: 18px;
  margin: 8px;
}

[part~=cross-button]:hover {
  color: #ffffff;
  background: #1d5f90;
}

[part~=cross-button-container] {
  width: 33px;
  height: 34px;
}

:host {
  padding-right: 16px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHIP-DATA-FILTER-CHIP-CONTAINER">
[part~=less-more-button] {
  font-family: Arial;
  font-size: 14px;
  font-weight: 600;
  color: #0094c8;
  height: 17px;
  line-height: 34px;
}

[part~=container] {
  padding-top: 1em;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CHIP-DATA-FILTER-SELECTOR-DROPDOWN">
:host {
  --ptcs-chip-data-filter-selector-dropdown-subcomponent-height: 34px;
  --ptcs-chip-data-filter-selector-dropdown-subcomponent-spacing: 12px;
  --ptcs-chip-data-filter-selector-dropdown-focus-overlay--padding: 0px;
  --ptcs-chip-data-filter-selector-dropdown-focus-overlay--border-style: solid;
  --ptcs-chip-data-filter-selector-dropdown-focus-overlay--border-color: #0094c8;
  --ptcs-chip-data-filter-selector-dropdown-number-case-subcomponent-width: 128px;
  --ptcs-chip-data-filter-selector-dropdown-base-subcomponent-width: 273px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-CONFIRMATION">
[part~=dialog] {
  background: #ffffff;
  box-shadow: 0 0 40px 0 #232b2d;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DATEPICKER-CALENDAR">
[part~=datepicker-container] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

[part~=day] {
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  background: #ffffff;
  color: #0094c8;
  font-family: Arial;
  font-size: 14px;
  font-style: normal;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
}

[part~=day]:not([disabled]):hover {
  background: #e6e8ea;
  color: #232b2d;
}

[part~=day]:not([disabled]):hover:active {
  background: #eaf6ff;
  color: #232b2d;
}

[part~=day][selected] {
  background: #eaf6ff;
  color: #232b2d;
}

[part~=day][disabled] {
  color: #aeb5bd;
}

[part~=weekdays] {
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  background: #ffffff;
  font-family: Arial;
  font-size: 18px;
  font-style: normal;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
}

:host(:focus) {
  outline: none;
}

[part~=days]:focus {
  outline: none;
}

[part~=days] {
  --ptcs-focus-overlay--padding: 1;
}

[part~=dot] {
  background: #0094c8;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin: 3px 7px;
}

[part~=date-field-from] {
  width: 283px;
  padding-bottom: 10px;
}

[part~=date-field-to] {
  width: 283px;
}

[part~=range-inputs] {
  padding-top: 8px;
  padding-bottom: 16px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DATEPICKER-CALENDAR:date-field-from">
:host(:not([disabled])[being-active]) [part~=text-box] {
  border-color: #0094c8;
  border-width: 1px;
  border-style: solid;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DATEPICKER-CALENDAR:date-field-to">
:host(:not([disabled])[being-active]) [part~=text-box] {
  border-color: #0094c8;
  border-width: 1px;
  border-style: solid;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DATEPICKER-INPUT-LABELS">
[part~=label] {
  font-weight: normal;
  font-family: Arial;
  font-size: 14px;
  padding-right: 8px;
}

[part~=placeholder] {
  font-weight: normal;
  color: rgba(0, 0, 0, 0.3);
  font-family: Arial;
  font-size: 14px;
}

:host {
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  min-height: 34px;
  padding: 0px 32px;
}

:host([disabled]) {
  border-color: #aeb5bd;
  background: #f7f7f7;
  color: #aeb6bd;
}

[part~=input-labels-container] {
  min-height: 34px;
}

[part~=text-mask-cursor] {
  color: #232b2d;
  background: none;
  width: 32px;
}

[part~=icon] {
  left: 0px;
}

[part~=clear-button] {
  right: 8px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DATEPICKER">
[part~=label] {
  font-size: 14px;
}

:host(:focus) {
  outline: none;
}

:host {
  --ptcs-focus-overlay--padding: 0px;
  min-width: 34px;
  min-height: 34px;
}

[part~=date-field] {
  margin: 0px;
}

[part~=date-field-label]:not([disabled])[being-active] {
  border-color: #0094c8;
  border-width: 1px;
  border-style: solid;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DATEPICKER:date-field">
:host(:not([disabled])[being-active]) [part~=text-box] {
  border-color: #0094c8;
  border-width: 1px;
  border-style: solid;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DIVIDER">
:host {
  padding: 0px 0px 0px 0px;
}

[part~=line] {
  background: #d8dbde;
  height: 1px;
  width: 1px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DROPDOWN">
[part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-size: 14px;
  font-style: normal;
  text-decoration: none;
}

[part~=item-value] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-size: 14px;
  font-style: normal;
  text-decoration: none;
  line-height: normal;
  letter-spacing: normal;
}

:host([disabled]) [part~=item-value] {
  color: #aeb6bd;
}

[part~=filter] {
  border-color: inherit;
}

:host(:not([disabled]):hover:active) [part~=filter] {
  border-color: #0094c8;
}

:host([selected]) [part~=filter] {
  border-color: #0094c8;
}

[part~=icon] {
  width: 18px;
  height: 18px;
  --ptcs-use-icon: e-dropdown-caret;
  padding: 0px;
  margin: 0px;
  color: #232b2d;
}

[part~=select-box] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px;
  min-height: 34px;
  padding-left: 8px;
  padding-right: 8px;
}

:host(:not([disabled]):hover) [part~=select-box] {
  border-color: #969696;
}

:host(:not([disabled]):hover:active) [part~=select-box] {
  border-color: #74787f;
}

:host([selected]) [part~=select-box] {
  border-color: #74787f;
}

:host([disabled]) [part~=select-box] {
  background: #f7f7f7;
}

:host(:focus) {
  outline: none;
}

:host {
  --ptcs-focus-overlay--padding: 0px;
  min-height: 34px;
  min-width: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-DYNAMIC-PANEL">
:host([disabled]) {
  opacity: 0.5;
}

:host {
  min-height: 50px;
  min-width: 50px;
  --ptcs-focus-overlay--padding: 0px;
}

:host(:focus) {
  outline: none;
}

:host([trigger=panel]) [part~=container] {
  cursor: pointer;
}

[part~=container] {
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
}

[part~=separator] {
  background: #0094c8;
}

[part~=separator][anchor=left] {
  width: 4px;
  margin-right: 8px;
}

[part~=separator][anchor=right] {
  width: 4px;
  margin-left: 8px;
}

[part~=separator][anchor=top] {
  height: 4px;
  margin-bottom: 8px;
}

[part~=separator][anchor=bottom] {
  height: 4px;
  margin-top: 8px;
}

[part~=separator][hover] {
  background: #1d5f90;
}

:host([disabled]) [part~=separator] {
  background: #f7f7f7;
}

:host([hide-thumb]) [part~=separator] {
  background: none;
  width: 0px;
  height: 0px;
}

:host([sizing]) [part~=separator] {
  background: #1d5f90;
}

[part~=separator]:active {
  background: #005a79;
}

[part~=thumb] {
  width: 18px;
  height: 18px;
  background: #0094c8;
  border-radius: 2px;
  color: #FFFFFF;
}

[part~=thumb][hover] {
  background: #1d5f90;
}

:host([sizing]) [part~=thumb] {
  background: #005a79;
}

[part~=thumb][anchor=top] {
  transform: rotate(90deg);
  left: calc(50% - 9px);
  bottom: 9px;
}

[part~=thumb][anchor=bottom] {
  transform: rotate(-90deg);
  left: calc(50% - 9px);
  top: 9px;
}

[part~=thumb][anchor=left] {
  right: 9px;
  top: calc(50% - 9px);
}

[part~=thumb][anchor=right] {
  top: calc(50% - 9px);
  left: 9px;
}

:host([disabled]) [part~=thumb] {
  background: #f7f7f7;
  border-color: #aeb5bd;
  border-width: 1px;
  border-style: solid;
}

[part~=trigger] {
  width: var(--ptcs-dp-toggle-button-hit-area, 34px);
  height: var(--ptcs-dp-toggle-button-hit-area, 34px);
}

:host([push-behavior=flyover]) [part~=scrim] {
  background: rgba(35, 43, 45, 0.6);
}

[part~=panel] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
}

[part~=trigger-button] {
  background: #ffffff;
  margin: 0px;
}

[part~=trigger-button]:hover {
  background: #1d5f90;
  color: #FFFFFF;
}

[part~=trigger-button]:active {
  background: #005a79;
  color: #FFFFFF;
}

[part~=panel-wrapper] {
  top: var(--ptcs-dp-padding, 34px) !important;
  bottom: var(--ptcs-dp-padding, 34px) !important;
  left: var(--ptcs-dp-padding, 34px) !important;
  right: var(--ptcs-dp-padding, 34px) !important;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-ICON">
[part~=image] {
  border-width: 0px;
  border-color: #c2c7ce;
  border-style: none;
  border-radius: 0px;
  opacity: 1;
}

:host {
  padding: 8px;
}

:host([size=small]) {
  width: 34px;
  height: 34px;
}

:host([size=medium]) {
  width: 38px;
  height: 38px;
}

:host([size=large]) {
  width: 76px;
  height: 76px;
}

:host([size=xlarge]) {
  width: 96px;
  height: 96px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-IMAGE">
[part~=image] {
  border-width: 0px;
  border-color: #c2c7ce;
  border-style: none;
  border-radius: 0px;
  opacity: 1;
  background: rgba(0,0,0,0);
  padding: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LABEL.header">
:host {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 26px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: normal;
}

[part~=show-button] {
  color: #0094c8;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  background: #ffffff;
  box-shadow: 0px -10px 14px 7px #ffffff;
  padding: 8px 0 0 0;
}

[part~=show-button][disabled] {
  color: #aeb5bd;
}

[part~=text-link]:not([disabled]):hover {
  color: #1d5f90;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  cursor: pointer;
}

[part~=text-link]:not([disabled]):hover:active {
  color: #005a79;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LABEL.sub-header">
:host {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 20px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: normal;
}

[part~=show-button] {
  color: #0094c8;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  background: #ffffff;
  box-shadow: 0px -10px 14px 7px #ffffff;
  padding: 8px 0 0 0;
}

[part~=show-button][disabled] {
  color: #aeb5bd;
}

[part~=text-link]:not([disabled]):hover {
  color: #1d5f90;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
}

[part~=text-link]:not([disabled]):hover:active {
  color: #005a79;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LABEL.body">
:host {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: normal;
  outline: none;
}

[part~=show-button] {
  color: #0094c8;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  background: #ffffff;
  box-shadow: 0px -10px 14px 7px #ffffff;
  padding: 8px 0 0 0;
}

[part~=show-button][disabled] {
  color: #aeb5bd;
}

[part~=text-link]:not([disabled]):hover {
  color: #1d5f90;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
}

[part~=text-link]:not([disabled]):hover:active {
  color: #005a79;
}

[part~=label] {
  outline: none;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LABEL.label">
:host {
  color: #232b2d;
  font-family: Arial;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  background: inherit;
  text-align: inherit;
  border-color: #c2c7ce;
  border-width: 0px;
  border-style: solid;
  font-weight: 600;
}

[part~=show-button] {
  color: #0094c8;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  background: #ffffff;
  box-shadow: 0px -10px 14px 7px #ffffff;
  padding: 8px 0 0 0;
}

[part~=show-button][disabled] {
  color: #aeb5bd;
}

[part~=text-link]:not([disabled]):hover {
  color: #1d5f90;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
}

[part~=text-link]:not([disabled]):hover:active {
  color: #005a79;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LABEL.title">
:host {
  color: #232B2D;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  border-color: #c2c7ce;
  border-width: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LABEL.caption">
:host {
  color: #232b2d;
  font-family: Arial;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  border-color: global-color-line;
  border-width: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LINK.primary">
[part~=link] {
  color: #0094c8;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host(:not([disabled]):hover) [part~=link] {
  color: #1d5f90;
}

:host(:not([disabled]):hover:active) [part~=link] {
  color: #005a79;
}

:host([disabled]) [part~=link] {
  color: #aeb5bd;
}

:host(:not([disabled])) [part~=link]:visited {
  color: #005a79;
}

[part~=link]:focus {
  outline: none;
}

:host(:focus) {
  outline: none;
}

:host {
  --ptcs-focus-overlay--padding: 0px;
}

[part~=label] {
  padding: 9px 10px 9px 10px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LINK.secondary">
[part~=link] {
  color: #adb5bd;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

:host(:not([disabled]):hover) [part~=link] {
  color: #858585;
}

:host(:not([disabled]):hover:active) [part~=link] {
  color: #61686e;
}

:host([disabled]) [part~=link] {
  color: #aeb2bd;
  text-decoration: none;
}

:host(:not([disabled])) [part~=link]:visited {
  color: #61686e;
}

[part~=link]:focus {
  outline: none;
}

:host(:focus) {
  outline: none;
}

:host {
  --ptcs-focus-overlay--padding: 0px;
}

[part~=label] {
  padding: 9px 10px 9px 10px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LIST-SHUTTLE">
:host {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  min-height: 446px;
}

:host([vertical]) {
  min-width: 273px;
  min-height: 738px;
}

[part~=head] {
  background: #f7f7f7;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: none;
  padding: 16px;
}

[part~=remove-button] {
  max-width: 100%;
  min-width: 110px;
  margin-bottom: 16px;
  margin-right: 16px;
  margin-left: 12px;
  margin-top: 0px;
}

:host([vertical]) [part~=remove-button] {
  margin-left: 0px;
}

[part~=up-button] {
  max-width: 100%;
  min-width: 110px;
  margin: 0px;
}

[part~=down-button] {
  margin-top: 16px;
  min-width: 110px;
  max-width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

[part~=add-button] {
  min-width: 110px;
  max-width: 100%;
  margin: 0px;
}

[part~=source-list-container] {
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 12px;
}

:host([vertical]) [part~=source-list-container] {
  padding-right: 16px;
}

[part~=target-list-container] {
  padding-top: 16px;
  padding-left: 12px;
  padding-right: 16px;
}

:host([vertical]) [part~=target-list-container] {
  padding-left: 16px;
}

[part~=source-buttons] {
  padding-top: 16px;
  padding-left: 16px;
  padding-bottom: 16px;
}

:host([vertical]) [part~=source-buttons] {
  padding-bottom: 0px;
}

[part~=target-buttons] {
  padding-top: 16px;
  padding-bottom: 16px;
}

:host([vertical]) [part~=target-buttons] {
  padding-left: 16px;
}

[part~=move-buttons] {
  max-width: 100%;
  overflow: hidden;
  margin-right: 16px;
}

:host([vertical]) [part~=move-buttons] {
  margin-left: 0px;
}

:host([collapsed-btns]:not([vertical])) [part~=move-buttons] {
  margin-left: 12px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LIST-SHUTTLE:source-list">
[part~=list-item] {
  --ptcs-list-list-item-border-style: none;
}

[part~=list-container] {
  box-shadow: none;
}

[part~=link] {
  padding: 0px 6px;
}

[part~=filter] {
  border-bottom: solid 1px #c2c7ce;
}

[part~=filter-field] {
  margin: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LIST-SHUTTLE:target-list">
[part~=list-item] {
  --ptcs-list-list-item-border-style: none;
}

[part~=list-container] {
  box-shadow: none;
}

[part~=link] {
  padding: 0px 6px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LIST-SHUTTLE:source-list:filter-field">
[part~=text-box] {
  border-style: none;
}

[part~=icon] {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LIST">
[part~=list-item] {
  background: #ffffff;
  --background-color-alt: #f7f7f7;
  padding: 0px 8px;
  --ptcs-list-list-item-border-color: #c2c7ce;
  --ptcs-list-list-item-border-thickness: 1px;
  --ptcs-list-list-item-border-style: solid;
}

[part~=list-item]:not([disabled]):hover {
  background: #e6e8ea;
  --background-color-alt: #e6e8ea;
}

[part~=list-item]:not([disabled]):hover:active {
  background: #eaf6ff;
  --background-color-alt: #eaf6ff;
}

[part~=list-item]:not([disabled])[selected] {
  --background-color-alt: #eaf6ff;
  background: #eaf6ff;
}

[part~=list-item][disabled][selected] {
  background: #d7dbde;
  --background-color-alt: #d7dbde;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
}

[part~=list-item][disabled] {
  background: #f7f7f7;
}

[part~=item-value] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

[part~=item-value]:not([disabled]):hover {
  font-weight: bold;
}

[part~=item-value]:not([disabled]):hover:active {
  font-weight: bold;
}

[part~=list-item][selected] [part~=item-value]:not([disabled]) {
  font-weight: bold;
}

[part~=item-value][disabled] {
  color: #aeb6bd;
}

[part~=list-item][selected] [part~=item-value][disabled] {
  color: #aeb6bd;
}

[part~=item-meta] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: inherit;
}

[part~=item-meta]:not([disabled]):hover {
  font-weight: bold;
}

[part~=item-meta]:not([disabled]):hover:active {
  font-weight: normal;
}

[part~=item-meta][disabled] {
  color: #aeb6bd;
}

[part~=list-item][selected] [part~=item-meta][disabled] {
  color: #aeb6bd;
}

:host(:focus) {
  outline: none;
}

[part~=list-container] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 1px 4px 0 rgba(35, 43, 45, 0.3);
  --ptcs-focus-overlay--padding: 1;
}

:host([disabled]) [part~=list-container] {
  background: #f7f7f7;
}

[part~=multi-select] {
  border-bottom: #c2c7ce 1px solid;
}

[part~=link] {
  min-height: 34px;
  padding: 0 8px;
}

[part~=list-items-container]:focus {
  outline: none;
}

[part~=filter-field] {
  margin: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-LIST:filter-field">
[part~=icon] {
  width: 28px;
  height: 28px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-MODAL-IMAGE-POPUP">
[part~=disclosure-button] {
  margin: 8px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-MODAL-OVERLAY">
[part~=backdrop] {
  background: #232b2d;
  opacity: 0.6;
  z-index: 20000;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-PAGINATION-CAROUSEL">
[part~=page-number-button] {
  height: 34px;
  margin-right: 8px;
  min-width: 34px;
}

[part~=left-arrow] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

[part~=right-arrow] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

[part~=three-dots] {
  width: 12;
  min-width: 12;
  margin-right: 8px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-PAGINATION-CAROUSEL:page-number-button">
:host([mode=label]) [part~=root] {
  padding: 0px;
}

[part~=label] {
  font-family: Arial;
  font-size: 14px;
  font-weight: 600;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-PAGINATION-INPUT-NUMBER">
[part~=error-text] {
  line-height: 1em;
  bottom: -1.2em;
  color: #ce3939;
  font-family: Arial;
  font-size: 12px;
  font-weight: 600;
  right: 0px;
}

[part~=pagination-input] {
  width: 58px;
  height: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-PAGINATION">
:host {
  padding: 16px 16px 0px 16px;
}

:host(:not([disabled])[size='minimum']) {
  min-width: 235px;
}

[part~=input-number] {
  height: 34px;
  margin-left: 10px;
}

[part~=string-show-label] {
  margin-right: 8px;
}

[part~=page-break-and-total-results-container] {
  margin-bottom: 16px;
}

:host(:not([disabled])[size='maximum']) [part~=page-break-and-total-results-container] {
  margin-right: 40px;
}

[part~=carousel] {
  margin-bottom: 16px;
  padding: 0px 6px;
}

:host(:not([disabled])[size='maximum']) [part~=carousel] {
  min-width: 306px;
  padding: 0px;
}

:host(:not([disabled])[size='minimum']) [part~=carousel] {
  padding: 0px;
}

:host(:not([disabled])[size='medium']) [part~=carousel] {
  padding: 0px;
}

[part~=direct-link] {
  margin-bottom: 16px;
}

:host(:not([disabled])[size='maximum']) [part~=direct-link] {
  margin-left: 40px;
}

:host(:not([disabled])[size='medium']) [part~=direct-link] {
   margin-left: 48px;
}

[part~=total-results] {
  margin-left: 8px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-PROPERTY-DISPLAY">
[part~=property-group] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: none;
}

:host {
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
}

[part~=property-display-label] {
  padding: 8px;
}

[part~=property-group-label] {
  padding: 8px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-PROPERTY-DISPLAY:value-display-item">
[part~=value-display-label] {
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-family: Arial;
  color: #232b2d;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-RADIO">
:host(:not([checked])) [part~=interior-button] {
  fill: rgba(0,0,0,0);
}

:host(:not([disabled]):hover) [part~=interior-button] {
  fill: rgba(0,0,0,0);
}

:host(:not([disabled])[checked]:hover) [part~=interior-button] {
  fill: #005a79;
}

:host([checked]) [part~=interior-button] {
  fill: #0094c8;
}

:host([disabled]) [part~=interior-button] {
  fill: rgba(0,0,0,0);
}

:host([disabled][checked]) [part~=interior-button] {
  fill: #aeb5bd;
}

:host(:not([disabled]):not([checked]):hover) [part~=interior-button] {
  fill: #005a79;
}

:host(:not([checked])) [part~=exterior-ring] {
  border-radius: 0px;
  fill: #ffffff;
  stroke: #c2c7ce;
  stroke-width: 1;
}

:host(:not([disabled]):not([checked]):hover) [part~=exterior-ring] {
  stroke: #005a79;
}

:host(:not([disabled])[checked]:hover) [part~=exterior-ring] {
  stroke: #005a79;
}

:host(:not([disabled]):not([checked]):hover:active) [part~=exterior-ring] {
  stroke-width: 1;
}

:host(:not([disabled])[checked]:hover:active) [part~=exterior-ring] {
  fill: #ffffff;
  stroke-width: 1;
}

:host([checked]) [part~=exterior-ring] {
  fill: #ffffff;
  stroke: #0094c8;
  stroke-width: 1;
}

:host([disabled]) [part~=exterior-ring] {
  fill: #f7f7f7;
  stroke: #aeb0bd;
  stroke-width: 1;
}

:host([disabled][checked]) [part~=exterior-ring] {
  stroke: #aeb5bd;
}

:host(:not([checked])) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host(:not([disabled]):hover) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host(:not([disabled])[checked]:hover) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([checked]) [part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([disabled]:not([checked])) [part~=label] {
  color: #aeb6bd;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([disabled][checked]) [part~=label] {
  color: #aeb6bd;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host(:focus) {
  outline: none;
}

:host {
  padding-top: 9px;
  padding-bottom: 9px;
  margin: 0px;
  padding-left: 8px;
  padding-right: 8px;
  --ptcs-focus-overlay--padding: 0px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-SLIDER">
:host {
  border-width: 1px;
  border-color: #c2c7ce;
  border-radius: 0px;
  border-style: none;
}

[part~=value] {
  box-shadow: 0px 2px 4px 0px rgba(35, 43, 45, 0.3);;
  min-width: 34px;
  min-height: 34px;
  border-radius: 2px;
  background: #ffffff;
  color: #232b2d;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 0 6px;
  box-sizing: border-box;
  margin: 2px 0.5px 6px 0.5px;
  z-index: 100002;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}

:host(:not([disabled])) [part~=value][selected] {
  border-color: #0094c8;
}

[part~=value][editing] {
  padding: 0px;
  border-color: #0094c8;
}

:host([reverse-labels]) [part~=value] {
  margin: 6px 0.5px 0.5px 0.5px;
}

:host([vertical]) [part~=value] {
  margin: 2px 6px 0.5px 0.5px;
}

:host([reverse-labels][vertical]) [part~=value] {
  margin: 2px 0.5px 0.5px 6px;
}

[part~=thumb] {
  fill: #ffffff;
  border-radius: 50%;
  z-index: 9;
  --ptcs-focus-overlay--border-style: none;
  stroke: #c2c7ce;
}

:host(:not([disabled])) [part~=thumb]:hover {
  border-color: #0094c8;
  stroke: #1d5f90;
}

:host(:not([disabled])) [part~=thumb][selected] {
  border-width: 2px;
}

:host(:not([disabled])) [part~=thumb][icon='ptcs-slider-icons:circle'][selected] {
  border-color: #1d5f90;
  box-shadow: 0px 0px 0px 13px rgba(234, 246, 255, 0.55);
}

:host([disabled]) [part~=thumb] {
  stroke: #aeb5bd;
  fill: #f7f7f7;
}

[part~=thumb]:not([disabled]):focus {
  border-color: #1d5f90;
  border-width: 2px;
  outline: none;
  stroke: #0094c8;
  stroke-width: 2px;
}

:host([dragging-thumb=thumb1]:not([disabled])) [part~=thumb1] {
  border-width: 2px;
  border-color: #1d5f90;
  z-index: 8;
  stroke: #1d5f90;
}

:host([dragging-thumb=thumb1]:not([disabled])) [part~=thumb1][icon='ptcs-slider-icons:circle'] {
  box-shadow: 0px 0px 0px 13px rgba(234, 246, 255, 0.55);
  background: rgba(234, 246, 255, 0.55);
}

:host([dragging-thumb=thumb2]:not([disabled])) [part~=thumb2] {
  border-width: 2px;
  border-color: #1d5f90;
  z-index: 8;
  stroke: #1d5f90;
}

:host([dragging-thumb=thumb2]:not([disabled])) [part~=thumb2][icon='ptcs-slider-icons:circle'] {
  box-shadow: 0px 0px 0px 13px rgba(234, 246, 255, 0.55);
  background: rgba(234, 246, 255, 0.55);
}

[part~=track] {
  border-style: none;
  border-width: 0px;
  border-color: #c2c7ce;
  background: #d8dbde;
  box-shadow: 0px 0px 0px 0px #000000;
  border-radius: 9px;
}

[part~=slider-container] {
  border-style: none;
  border-width: 0px;
  border-color: #c2c7ce;
  background: #ffffff;
  box-shadow: 0px 0px 0px 0px #000000;
}

:host([vertical]) [part~=slider-container] {
  margin-top: 0px;
}

:host([range]) [part~=track-between] {
  background: #0094c8;
}

:host([disabled][range]) [part~=track-between] {
  background: #adb5bd;
}

:host(:not([range])) [part~=track-before] {
  background: #0094c8;
}

:host([disabled]:not([range])) [part~=track-before] {
  background: #adb5bd;
}

[part~=min-max-label] {
  color: #6e717c;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
}

[part~=value-arrow] {
  color: #c2c7ce;
}

[part~=value-arrow][editing] {
  color: #0094c8;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-TAB-SET">
[part~=tabs-tab-label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
}

[part~=tabs-tab-label]:not([disabled]):hover {
  color: #000000;
}

[part~=tabs-tab-label]:not([disabled]):hover:active {
  color: #000000;
}

[part~=tabs-tab-label][selected]:not([disabled]) {
  color: #000000;
}

[part~=tabs-tab-label][disabled] {
  color: #aeb6bd;
}

[part~=tabs-tab] {
  width: auto;
  height: 34px;
  background: #ffffff;
  border-radius: 0px;
  border-bottom-color: #d8dbde;
}

[part~=tabs-tab][selected]:not([disabled]) {
  border-bottom-color: #0094c8;
}

[part~=pages] {
  background: #ffffff;
  border-style: none;
  border-width: 0px;
  border-color: #c2c7ce;
}

[part~=divider] {
  height: 2px;
  padding: 0px 0px 0px 0px;
  position: relative;
  top: -2px;
  background: #d8dbde;
}

:host([disabled]) {
  opacity: 0.5;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-TABS">
[part~=tabs] {
  background: #ffffff;
}

:host {
  --ptcs-focus-overlay--padding: 2px;
  --ptcs-focus-overlay--padding-top: 0px;
  --ptcs-focus-overlay--padding-left: 3px;
  --ptcs-focus-overlay--padding-right: 3px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-TEXTAREA">
[part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-size: 14px;
  font-style: normal;
  text-decoration: none;
}

[part~=hint-text] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  min-height: 34px;
  padding: 8px;
}

[part~=text-box] {
  height: 102px;
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px;
  min-height: 34px;
  min-width: 34px;
}

:host(:not([disabled]):hover) [part~=text-box] {
  border-color: #969696;
}

:host(:not([disabled]):hover:active) [part~=text-box] {
  border-color: #74787f;
}

:host([disabled]) [part~=text-box] {
  background: #f7f7f7;
}

[part~=counter] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

[part~=text-value] {
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: #232b2d;
  line-height: normal;
  text-decoration: none;
  letter-spacing: normal;
  text-align: inherit;
}

:host([disabled]) [part~=text-value] {
  color: #aeb6bd;
}

:host {
  --ptcs-focus-overlay--padding: 1px;
  min-width: 34px;
  min-height: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-TEXTFIELD">
[part~=label] {
  color: #232b2d;
  font-family: Arial;
  font-weight: 600;
  font-size: 14px;
  font-style: normal;
  text-decoration: none;
}

:host(:focus-within) [part~=label] {
  outline: none;
}

[part~=hint-text] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

:host([disabled]) [part~=hint-text] {
  color: #aeb6bd;
}

[part~=text-box] {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px;
  padding: 0px;
}

:host(:not([disabled]):hover) [part~=text-box] {
  border-color: #969696;
}

:host(:not([disabled]):hover:active) [part~=text-box] {
  border-color: #74787f;
}

:host([disabled]) [part~=text-box] {
  background: #f7f7f7;
}

:host(:focus-within) [part~=text-box] {
  border-color: #969696;
}

:host([disabled]:focus-within) [part~=text-box] {
  border-style: var(--ptcs-focus-overlay-border-style, solid);
  border-color: var(--ptcs-focus-overlay-border-color, #0094c8);
  border-width: var(--ptcs-focus-overlay-border-width, 2px);
}

[part~=counter] {
  color: #232b2d;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
}

[part~=text-value] {
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: #232b2d;
  text-decoration: none;
  text-align: inherit;
  letter-spacing: normal;
}

:host([disabled]) [part~=text-value] {
  color: #aeb6bd;
}

[part~=icon] {
  color: #232b2d;
}

:host {
  --ptcs-focus-overlay--padding: 0px;
  min-height: 34px;
  min-width: 34px;
}

:host(:focus-within) {
  outline: none;
}

:host([disabled]:focus-within) {
  outline: none;
}

:host([disabled]) {
  color: #aeb6bd;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-TOGGLE-BUTTON">
[part~=rectangle] {
  width: 29px;
  height: 12px;
  background: #c2c7ce;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: solid;
  border-radius: 20px;
  padding: 1px;
}

:host(:not([disabled]):hover) [part~=rectangle] {
  background: #1d5f90;
  border-color: #1d5f90;
}

:host(:not([disabled]):hover:active) [part~=rectangle] {
  background: #005a79;
  border-color: #005a79;
}

:host(:not([disabled])[checked]) [part~=rectangle] {
  background: #0094c8;
  border-color: #0094c8;
}

:host([disabled]) [part~=rectangle] {
  background: #f7f7f7;
}

[part~=oval] {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-color: #ffffff;
  border-width: 0px;
  border-style: none;
  border-radius: 20px;
}

:host([disabled]) [part~=oval] {
  background: #c2c7ce;
  border-color: #c2c7ce;
}

:host(:focus) {
  outline: none;
}

:host {
  --ptcs-focus-overlay--padding: 0px;
  padding: 10px 8px 10px 8px;
  min-height: 34px;
  min-width: 34px;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-TOOLTIP-OVERLAY">
[part~=tooltip-text] {
  font-family: Arial;
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
  font-stretch: normal;
  color: #232b2d;
  font-size: 12px;
  font-style: normal;
  text-decoration: none;
}

:host([_icon]) [part~=tooltip-text] {
  padding: 8px 8px 8px 0px;
}

:host(:not([_icon])) [part~=tooltip-text] {
  padding: 8px;
}

[part~=tooltip-icon] {
  fill: #232b2d;
}

:host {
  max-width: 546px;
}

[part~=pointer] {
  height: 8px;
  width: 14px;
  --ptcs-tooltip-pointer-edge-offset: 8px;
  --ptcs-tooltip-pointer-shift: -7px;
  stroke-width: 1;
  stroke: #c2c7ce;
  fill: #ffffff;
}

[part~=tooltip] {
  background: #ffffff;
  border-color: #c2c7ce;
  color: #232b2d;
  box-shadow: 0px 2px 4px 0px #000000;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

[part~=truncation-overflow] {
  margin-bottom: 12px;
}

[part~=title] {
  font-size: larger;
  padding-bottom: 0.3em;
  margin-bottom: 0.5em;
  border-bottom: solid 1px #adb5bd;
  font-weight: bold;
}

</ptcs-style-unit>

<ptcs-style-unit wc="PTCS-VALUE-DISPLAY">
:host {
  background: #ffffff;
  border-color: #c2c7ce;
  border-width: 1px;
  border-style: none;
  outline: none;
  --ptcs-focus-overlay--padding: 0px;
  --valuedisplay-modal-shadowcolor: #232b2d;
  --value-display-vdcontainer-background-color: #ffffff;
}

[part~=disclosure-button-overlay] {
  background: #ffffff;
  box-shadow: 0px -8px 16px #ffffff;
}

[part~=show-button] {
  color: #0094c8;
  background: #ffffff;
  box-shadow: 0px -8px 16px  #ffffff;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
}

:host([disabled]) [part~=show-button] {
  color: #aeb5bd;
  text-decoration: none;
}

[part~=value-container] {
  padding: 0px;
}

[part~=value-display-label] {
  padding: 0 8px 8px 0;
  min-height: 26px;
}

[part~=disclosure-button] {
  margin: 8px 0 8px 0px;
}

[part~=text-link] {
  padding: 8px 0 0 0;
  line-height: normal;
  text-align: right;
}

:host(:not([disabled])) [part~=text-link]:hover {
  color: #1d5f90;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  letter-spacing: normal;
  cursor: pointer;
}

:host(:not([disabled])) [part~=text-link]:hover:active {
  color: #005a79;
  background: Arial;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
  letter-spacing: normal;
  cursor: pointer;
}

:host(:not([_show-all])) [part~=text-link] {
  padding: 8px 16px 8px 0;
}

[part~=value-display-area] {
  padding: 0px;
}

[part~=item-value] {
  color: #232b2d;
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  line-height: normal;
}

[part~=overflow-control] {
  padding: 8px;
}

</ptcs-style-unit>

`;
// CSS Base-Theme END


    // Search for parameter in the URL
    function getParam(name) {
        let value = null;
        location.search
            .substr(1)
            .split('&')
            .find(item => {
                const pair = item.split('=');
                if (pair[0] === name) {
                    value = decodeURIComponent(pair[1]);
                }
            });
        return value;
    }

    // Load theme styling?
    if (getParam('td-active')) {
        console.log('ptcs-base-theme: the theme designer handles theme styling');
    } else {
        const headerCSS = `<style>
    .base-theme--header {
        height: 64px;
        padding: 0px 20px;
        background-color: #F2F3F7;
        color: #2D343C;
        font-size: 24px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    header.base-theme--header {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        z-index: 10;
    }
    </style>
    `;

        console.log('ptcs-base-theme: mount base theme styling');
        const el = document.createElement('div');
        el.setAttribute('id', 'theming');
        el.innerHTML = headerCSS + cssBaseTheme;
        document.head.appendChild(el);

        const m = /\/node_modules\/(ptc(s|1)-[a-z0-9-]+)/.exec(location.pathname);
        if (m) {
            const mount = () => {
                const body = document.body;
                if (body.hasAttribute('no-base-theme-header')) {
                    return;
                }
                let head = body.querySelector('.base-theme--header');
                if (!head) {
                    console.log('create .base-theme--header');
                    head = document.createElement('header');
                    head.setAttribute('class', 'base-theme--header');
                    if (body.firstChild) {
                        body.insertBefore(head, body.firstChild);
                    } else {
                        body.appendChild(head);
                    }
                    const orgMargin = getComputedStyle(body).getPropertyValue('margin-top');
                    body.style.marginTop = `calc(72px + ${orgMargin})`;
                }
                head.innerHTML = `<div>&lt;${m[1]}&gt;</div>`;
            };

            const load = () => {
                mount();
                window.removeEventListener('load', load);
            };

            window.addEventListener('load', load);
        }
    }

})();
