totalum-api-sdk 2.0.20 → 2.0.22

package/dist/totalum-styles.css

@@ -0,0 +1,3069 @@
+:root {
+  --ds-white-font: white;
+  --ds-gray-font: #5B5B5B;
+  --ds-light-gray-font: #797979;
+  --ds-dark-gray-font: #3D3D3D;
+  --ds-black-font: black;
+  --ds-white-background: white;
+  --ds-light-gray-background: #fbfbfb;
+  --ds-gray-background: #B9B9B9;
+  --ds-white-background-hover: #f0f0f0;
+  --ds-primary-color: #184ED9;
+  --ds-primary-color-hover: #1648c7;
+  --ds-primary-color-ripple: #4671df;
+  --ds-primary-color-smooth-background: rgba(24, 78, 216, .1);
+  --ds-primary-color-apagado: #4A69B9;
+  --ds-danger-color: #DA6453;
+  --ds-danger-color-hover: #d15a47;
+  --ds-danger-color-ripple: #e27e6a;
+  --ds-secondary-color: #F0F0F0;
+  --ds-secondary-color-hover: #e7e7e7;
+  --ds-secondary-color-ripple: #f0f0f0;
+  --ds-tertiary-color: #21BB1E;
+  --ds-tertiary-color-hover: #1eaf1c;
+  --ds-tertiary-color-ripple: rgb(49, 187, 47);
+  --ds-empty-color: transparent;
+  --ds-empty-color-hover: #f5f5f5;
+  --ds-empty-color-ripple: #f8f8f8;
+  --ds-border-color: #ebeaea;
+  --ds-scrollbar-color: #b9b9b9;
+  --ds-label-margin-bottom: 5px;
+  --ds-header-and-content-margin-bottom: 16px;
+  --ds-box-padding: 16px;
+  --ds-box-padding-small: 8px;
+  --ds-box-border-radius: 6px;
+  --ds-margin-icon-and-content: 8px;
+  --ds-margin-icon-and-content-smaller: 4px;
+  --ds-input-margin-bottom: 18px;
+  --ds-big-resizer-width: 3.5px;
+  --ds-margin-between-items: 8px;
+  --ds-global-font-size: 13px;
+  --ds-global-font-size-bigger: 14px;
+  --ds-global-font-size-large: 15px;
+  --ds-input-font-family: "Inter", sans-serif;
+  --ds-input-font-size: 13px;
+  --ds-input-height: 39px;
+  --ds-input-border-radius: 6px;
+  --ds-input-border: 1px solid var(--ds-border-color);
+  --ds-input-border-active: 2px solid var(--ds-primary-color);
+  --ds-input-padding-horizontal: 16px;
+  --ds-input-padding-end: 20px;
+  --ds-input-placeholder-color: #9496A3;
+  --ds-input-transition: 0.1s all ease;
+  --ds-input-suggestions-padding: 8px;
+  --ds-input-suggestions-max-height: 300px;
+  --ds-input-symbol-margin-right: 8px;
+  --ds-input-textarea-height: 100px;
+  --ds-input-textarea-padding: 8px;
+  --ds-item-font-family: "Inter", sans-serif;
+  --ds-item-font-size: 13px;
+  --ds-item-font-color: var(--ds-gray-font);
+  --ds-item-height: 38px;
+  --ds-item-padding-horizontal: 10px;
+  --ds-item-background: #F9F9F9;
+  --ds-item-background-hover: var(--ds-white-background-hover);
+  --ds-item-border-radius: 6px;
+  --ds-item-checkbox-margin-right: 8px;
+  --ds-item-margin-between-items: 10px;
+  --ds-item-icon-font-size: 20px;
+  --ds-item-icon-font-size-smaller: 18px;
+  --ds-item-small-height: 28px;
+  --ds-item-small-padding-horizontal: 12px;
+  --ds-item-small-font-size: 12px;
+  --ds-item-small-icon-font-size: 15px;
+  --ds-item-small-background: var(--ds-primary-color-apagado);
+  --ds-item-tree-background: var(--ds-white-background);
+  --ds-item-tree-background-active: #F9F9F9;
+  --ds-item-tree-height: 31px;
+  --ds-item-tree-color: var(--ds-gray-font);
+  --ds-item-tree-arrow-font-size: 11px;
+  --ds-item-tree-icon-font-size: 15px;
+  --ds-item-tree-icons-margin-right: 4px;
+  --ds-item-tree-folder-margin-right: 6px;
+  --ds-item-tree-border-radius: 4px;
+  --ds-item-chip-padding: 3px 8px;
+  --ds-item-chip-border-radius: 6px;
+  --ds-item-chip-font-size: 11px;
+  --ds-item-chip-primary-background: rgba(24, 78, 216, .1);
+  --ds-item-chip-primary-font-color: var(--ds-primary-color);
+  --ds-item-title-font-size: 13px;
+  --ds-item-title-font-color: var(--ds-dark-gray-font);
+  --ds-item-title-font-weight: 500;
+  --ds-item-title-margin-bottom: 4px;
+  --ds-item-subtitle-font-size: 12px;
+  --ds-item-subtitle-font-color: var(--ds-light-gray-font);
+  --ds-item-danger-background: var(--ds-danger-color);
+  --ds-item-danger-background-hover: var(--ds-danger-color-hover);
+  --ds-item-danger-font-color: var(--ds-white-font);
+  --ds-element-reference-content-font-family: "Inter", sans-serif;
+  --ds-element-reference-title-font-family: "Poppins", sans-serif;
+  --ds-element-reference-title-font-size: 13px;
+  --ds-element-reference-title-font-color: var(--ds-dark-gray-font);
+  --ds-element-reference-subtitle-font-family: "Poppins", sans-serif;
+  --ds-element-reference-subtitle-font-size: 12px;
+  --ds-element-reference-subtitle-bigger-font-size: 13px;
+  --ds-element-reference-subtitle-font-color: var(--ds-light-gray-font);
+  --ds-element-reference-padding: 16px;
+  --ds-element-reference-padding-bottom: 8px;
+  --ds-element-reference-border-radius: 6px;
+  --ds-element-reference-heading-margin-bottom: 16px;
+  --ds-element-references-margin-bottom: 12px;
+  --ds-element-reference-hover-background: var(--ds-white-background-hover);
+  --ds-modal-background: var(--ds-white-background);
+  --ds-modal-z-index: 1000000000000 !important;
+  --ds-modal-border-radius: 6px;
+  --ds-modal-header-title-font-family: "Poppins", sans-serif;
+  --ds-modal-header-title-font-size: 16px;
+  --ds-modal-header-title-font-color: var(--ds-black-font);
+  --ds-modal-header-title-margin-right: 16px;
+  --ds-modal-header-subtitle-font-family: "Poppins", sans-serif;
+  --ds-modal-header-subtitle-font-size: 12px;
+  --ds-modal-header-subtitle-font-color: var(--ds-light-gray-font);
+  --ds-modal-header-padding: var(--ds-box-padding);
+  --ds-modal-header-padding-small: var(--ds-box-padding-small);
+  --ds-modal-header-padding-vertical: 12px;
+  --ds-modal-header-border-bottom: 1px solid var(--ds-border-color);
+  --ds-modal-header-buttons-margin-right: 16px;
+  --ds-modal-border-radius: var(--ds-box-border-radius);
+  --ds-modal-primary-width: 400px;
+  --ds-modal-primary-height: 100%;
+  --ds-modal-secondary-width: 600px;
+  --ds-modal-secondary-width-2: 700px;
+  --ds-modal-secondary-height: 100%;
+  --ds-modal-row-expanded-width: 95%;
+  --ds-modal-row-expanded-height: 600px;
+  --ds-button-font-size: 13px;
+  --ds-button-border-radius: 6px;
+  --ds-button-padding-horizontal: 16px;
+  --ds-button-padding-horizontal-smaller: 10px;
+  --ds-button-height: 36px;
+  --ds-button-small-font-size: 11px;
+  --ds-button-small-border-radius: 6px;
+  --ds-button-small-padding-horizontal: 9.5px;
+  --ds-button-small-height: 28px;
+  --ds-button-primary-background: var(--ds-primary-color);
+  --ds-button-primary-color: white;
+  --ds-button-secondary-background: var(--ds-secondary-color);
+  --ds-button-secondary-color: var(--ds-gray-font);
+  --ds-button-tertiary-background: var(--ds-tertiary-color);
+  --ds-button-tertiary-color: var(--ds-white-font);
+  --ds-button-empty-background: transparent;
+  --ds-button-empty-color: var(--ds-gray-font);
+  --ds-button-empty-border: 0 0 0 1px var(--ds-border-color);
+  --ds-input-label-font-size: 13px;
+  --ds-input-label-color: var(--ds-dark-gray-font);
+  --ds-input-searchbar-icon-size: 18px;
+  --ds-buttonsgroup-navigation-background: var(--ds-white-background);
+  --ds-buttonsgroup-navigation-content-margin: 0 5px;
+  --ds-buttonsgroup-navigation-button-color: var(--ds-gray-font);
+  --ds-buttonsgroup-navigation-button-icon-size: 17px;
+  --ds-screen-kanban-column-width: 290px;
+  --ds-screen-kanban-column-height: 100%;
+  --ds-screen-kanban-top-border-radius: 16px;
+  --ds-screen-kanban-bottom-border-radius: 10px;
+  --ds-screen-kanba-column-margin-right: 18px;
+  --ds-screen-kanban-content-padding: 5px;
+  --ds-screen-kanban-content-min-height: 200px;
+  --ds-screen-kanban-content-border-radius: 10px;
+  --ds-screen-kanban-content-background-color: rgb(250, 250, 250);
+  --ds-screen-background: #F1F3F5;
+  --ds-screen-header-background: var(--ds-white-background);
+  --ds-screen-header-padding-vertical: 8px;
+  --ds-screen-header-padding-horizontal: 16px;
+  --ds-screen-header-border-color: var(--ds-border-color);
+  --ds-screen-header-border-radius: 12px;
+  --ds-screen-header-title-font-family: "Poppins", sans-serif;
+  --ds-screen-header-title-font-size: 16px;
+  --ds-screen-header-results-count-font-size: 13px;
+  --ds-screen-header-title-font-color: var(--ds-black-font);
+  --ds-screen-header-elements-margin-right: 16px;
+  --ds-screen-header-col-background: var(--ds-light-gray-background);
+  --ds-screen-table-background: var(--ds-white-background);
+  --ds-screen-table-border-radius: 6px;
+  --ds-screen-table-resizer-width: 2px;
+  --ds-screen-table-resizer-background: var(--ds-border-color);
+  --ds-screen-table-header-col-padding-vertical: 7px;
+  --ds-screen-table-header-col-padding-horizontal: 8px;
+  --ds-screen-table-content-row-height: 36px;
+  --ds-screen-table-content-row-hover-background: var(--ds-white-background-hover);
+  --ds-screen-calendar-header-cell-font-family: "Inter", sans-serif;
+  --ds-screen-calendar-header-cell-border: 1px solid var(--ds-border-color);
+  --ds-screen-calendar-header-cell-font-size: 14px;
+  --ds-screen-calendar-header-cell-font-color: var(--ds-light-gray-font);
+  --ds-screen-calendar-header-cell-padding: 12px;
+  --ds-screen-table-row-expanded-resizer-height: 2.5px;
+  --ds-screen-table-row-expanded-resizer-background: var(--ds-border-color);
+  --ds-row-expanded-aside-resizer-width: 2px;
+  --ds-row-expanded-aside-resizer-background: var(--ds-border-color);
+  --ds-row-expanded-aside-padding-vertical: 8px;
+  --ds-row-expanded-aside-padding-horizontal: 8px;
+  --ds-row-expanded-body-padding: var(--ds-box-padding);
+  --ds-row-expanded-secondary-aside-padding: var(--ds-box-padding);
+  --ds-floating-block-box-shadow: 0 1px 3px #E5E5E5 !important;
+  --ds-popover-border-radius: 6px;
+  --ds-popover-padding: 8px;
+  --ds-popover-primary-width: auto;
+  --ds-popover-z-index: 200030000 !important;
+  --ds-totalum-aside-background: var(--ds-white-background);
+  --ds-aside-width: 350px;
+  --ds-card-margin-bottom-between-data: 12px;
+  --ds-card-background: var(--ds-white-background);
+  --ds-card-background-hover: var(--ds-white-background-hover);
+  --ds-card-border-radius: 6px;
+  --ds-card-box-shadow: var(--ds-floating-block-box-shadow);
+  --ds-card-padding: var(--ds-box-padding);
+  --ds-card-gallery-height: 400px;
+  --ds-card-gallery-width: 300px;
+  --ds-card-kanban-height: 190px;
+  --ds-card-kanban-max-width: 274px;
+  --ds-card-kanban-width: 100%;
+  --ds-card-image-footer-font-size: 9px;
+  --ds-card-image-width: 100%;
+  --ds-card-image-height: 180px;
+  --ds-header-notsavedchanges-color: var(--ds-danger-color);
+  --ds-header-notsavedchanges-font-size: 14px;
+  --ds-font-family: "Poppins", sans-serif;
+  --ds-font-color: var(--ds-dark-gray-font);
+  --ds-h1-font-color: var(--ds-black-font);
+  --ds-h1-font-size: 16px;
+  --ds-h2-font-size: 15px;
+  --ds-text-font-size: 13px;
+  --ds-text-font-family: "Inter", sans-serif;
+  --ds-text-font-color: var(--ds-dark-gray-font);
+}
+
+* {
+  font-family: "Inter", sans-serif;
+}
+
+.ds-buttonsgroup-navigation, .ds-button-icon-only, .ds-button-empty-icon-only, .ds-button-empty-dropdown, .ds-button-empty, .ds-button-tertiary, .ds-button-secondary, .ds-button-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ds-button-font-size);
+  border-radius: var(--ds-button-border-radius);
+  padding: 0 var(--ds-button-padding-horizontal);
+  height: var(--ds-button-height);
+  user-select: none;
+  transition: 0.2s all ease;
+}
+.ds-buttonsgroup-navigation ion-icon, .ds-button-icon-only ion-icon, .ds-button-empty-icon-only ion-icon, .ds-button-empty-dropdown ion-icon, .ds-button-empty ion-icon, .ds-button-tertiary ion-icon, .ds-button-secondary ion-icon, .ds-button-primary ion-icon {
+  font-size: 20px;
+  width: 20px;
+  min-width: 20px;
+  max-width: 20px;
+  margin-right: 4px;
+}
+.ds-buttonsgroup-navigation:disabled, .ds-button-icon-only:disabled, .ds-button-empty-icon-only:disabled, .ds-button-empty-dropdown:disabled, .ds-button-empty:disabled, .ds-button-tertiary:disabled, .ds-button-secondary:disabled, .ds-button-primary:disabled, [disabled].ds-buttonsgroup-navigation, [disabled].ds-button-icon-only, [disabled].ds-button-empty-icon-only, [disabled].ds-button-empty-dropdown, [disabled].ds-button-empty, [disabled].ds-button-tertiary, [disabled].ds-button-secondary, [disabled].ds-button-primary {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
+  transition: 0.2s all ease;
+}
+.ds-buttonsgroup-navigation ion-spinner, .ds-button-icon-only ion-spinner, .ds-button-empty-icon-only ion-spinner, .ds-button-empty-dropdown ion-spinner, .ds-button-empty ion-spinner, .ds-button-tertiary ion-spinner, .ds-button-secondary ion-spinner, .ds-button-primary ion-spinner {
+  color: white;
+  width: 23px;
+  margin-right: 8px;
+}
+.ds-buttonsgroup-navigation ion-spinner circle, .ds-button-icon-only ion-spinner circle, .ds-button-empty-icon-only ion-spinner circle, .ds-button-empty-dropdown ion-spinner circle, .ds-button-empty ion-spinner circle, .ds-button-tertiary ion-spinner circle, .ds-button-secondary ion-spinner circle, .ds-button-primary ion-spinner circle {
+  stroke-width: 6px;
+}
+
+.ds-button-magicwand-completed, .ds-button-tertiary-small, .ds-button-secondary-small, .ds-button-primary-small {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ds-button-small-font-size);
+  border-radius: var(--ds-button-small-border-radius);
+  padding: 0 var(--ds-button-small-padding-horizontal);
+  height: var(--ds-button-small-height);
+  user-select: none;
+}
+.ds-button-magicwand-completed ion-icon, .ds-button-tertiary-small ion-icon, .ds-button-secondary-small ion-icon, .ds-button-primary-small ion-icon {
+  font-size: 16px;
+  margin-right: 4px;
+}
+.ds-button-magicwand-completed ion-spinner, .ds-button-tertiary-small ion-spinner, .ds-button-secondary-small ion-spinner, .ds-button-primary-small ion-spinner {
+  color: white;
+  width: 16px;
+  margin-right: 8px;
+}
+.ds-button-magicwand-completed ion-spinner circle, .ds-button-tertiary-small ion-spinner circle, .ds-button-secondary-small ion-spinner circle, .ds-button-primary-small ion-spinner circle {
+  stroke-width: 4px;
+}
+
+.ds-button-primary {
+  background: var(--ds-button-primary-background);
+  color: var(--ds-button-primary-color);
+  min-width: 85px;
+  /*&:disabled, &[disabled] {
+      background: var(--ds-primary-color-disabled);
+  }*/
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-primary:hover {
+  background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-primary:active {
+  background-color: var(--ds-primary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-primary-small {
+  background: var(--ds-button-primary-background);
+  color: var(--ds-button-primary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-primary-small:hover {
+  background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-primary-small:active {
+  background-color: var(--ds-primary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-primary-small-danger {
+  background: var(--ds-danger-color);
+  color: var(--ds-button-primary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-primary-small-danger:hover {
+  background: var(--ds-danger-color) radial-gradient(circle, transparent 1%, var(--ds-danger-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-primary-small-danger:active {
+  background-color: var(--ds-danger-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-secondary {
+  background: var(--ds-button-secondary-background);
+  color: var(--ds-button-secondary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-secondary:hover {
+  background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-secondary:active {
+  background-color: var(--ds-secondary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-secondary-small {
+  background: var(--ds-button-secondary-background);
+  color: var(--ds-button-secondary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-secondary-small ion-spinner {
+  color: var(--ds-button-secondary-color);
+}
+.ds-button-secondary-small:hover {
+  background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-secondary-small:active {
+  background-color: var(--ds-secondary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-tertiary {
+  background: var(--ds-button-tertiary-background);
+  color: var(--ds-button-tertiary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-tertiary:hover {
+  background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-tertiary:active {
+  background-color: var(--ds-tertiary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-tertiary-small {
+  background: var(--ds-button-tertiary-background);
+  color: var(--ds-button-tertiary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-tertiary-small:hover {
+  background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-tertiary-small:active {
+  background-color: var(--ds-tertiary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-magicwand-completed {
+  transition: none;
+  background: var(--ds-button-tertiary-background);
+  color: var(--ds-button-tertiary-color);
+}
+.ds-button-magicwand-completed:hover {
+  transition: none;
+  background: var(--ds-button-secondary-background);
+  color: var(--ds-button-secondary-color);
+}
+.ds-button-magicwand-completed:hover .ds-button-magicwand-completed-completed {
+  display: none;
+}
+.ds-button-magicwand-completed:hover .ds-button-magicwand-completed-undo {
+  display: flex;
+  align-items: center;
+}
+.ds-button-magicwand-completed-completed {
+  display: flex;
+  align-items: center;
+}
+.ds-button-magicwand-completed-undo {
+  display: none;
+}
+
+.ds-button-empty {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  white-space: nowrap;
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-empty:hover {
+  background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-empty:active {
+  background-color: var(--ds-empty-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-empty-dropdown {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  transition: 0.2s all ease;
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-empty-dropdown:hover {
+  background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-empty-dropdown:active {
+  background-color: var(--ds-empty-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+.ds-button-empty-dropdown-active {
+  border: 2px solid var(--ds-primary-color);
+}
+.ds-button-empty-dropdown ion-icon {
+  font-size: 18px;
+  margin-left: 4px;
+}
+
+.ds-button-empty-icon-only {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-empty-icon-only:hover {
+  background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-empty-icon-only:active {
+  background-color: var(--ds-empty-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+.ds-button-empty-icon-only ion-icon {
+  margin: 0;
+  font-size: 18px;
+}
+
+.ds-button-icon-only {
+  padding: 4px;
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  height: auto;
+  transition: 0.2s all ease;
+}
+.ds-button-icon-only ion-icon, .ds-button-icon-only i {
+  margin: 0;
+  font-size: 20px;
+  min-width: 20px;
+}
+.ds-button-icon-only:hover {
+  color: var(--ds-primary-color);
+  background: var(--ds-light-gray-background);
+}
+
+* {
+  font-family: "Inter", sans-serif;
+}
+
+.ds-buttonsgroup-navigation, .ds-button-primary, .ds-button-secondary, .ds-button-tertiary, .ds-button-empty, .ds-button-empty-dropdown, .ds-button-empty-icon-only, .ds-button-icon-only {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ds-button-font-size);
+  border-radius: var(--ds-button-border-radius);
+  padding: 0 var(--ds-button-padding-horizontal);
+  height: var(--ds-button-height);
+  user-select: none;
+  transition: 0.2s all ease;
+}
+.ds-buttonsgroup-navigation ion-icon, .ds-button-primary ion-icon, .ds-button-secondary ion-icon, .ds-button-tertiary ion-icon, .ds-button-empty ion-icon, .ds-button-empty-dropdown ion-icon, .ds-button-empty-icon-only ion-icon, .ds-button-icon-only ion-icon {
+  font-size: 20px;
+  width: 20px;
+  min-width: 20px;
+  max-width: 20px;
+  margin-right: 4px;
+}
+.ds-buttonsgroup-navigation:disabled, .ds-button-primary:disabled, .ds-button-secondary:disabled, .ds-button-tertiary:disabled, .ds-button-empty:disabled, .ds-button-empty-dropdown:disabled, .ds-button-empty-icon-only:disabled, .ds-button-icon-only:disabled, [disabled].ds-buttonsgroup-navigation, [disabled].ds-button-primary, [disabled].ds-button-secondary, [disabled].ds-button-tertiary, [disabled].ds-button-empty, [disabled].ds-button-empty-dropdown, [disabled].ds-button-empty-icon-only, [disabled].ds-button-icon-only {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
+  transition: 0.2s all ease;
+}
+.ds-buttonsgroup-navigation ion-spinner, .ds-button-primary ion-spinner, .ds-button-secondary ion-spinner, .ds-button-tertiary ion-spinner, .ds-button-empty ion-spinner, .ds-button-empty-dropdown ion-spinner, .ds-button-empty-icon-only ion-spinner, .ds-button-icon-only ion-spinner {
+  color: white;
+  width: 23px;
+  margin-right: 8px;
+}
+.ds-buttonsgroup-navigation ion-spinner circle, .ds-button-primary ion-spinner circle, .ds-button-secondary ion-spinner circle, .ds-button-tertiary ion-spinner circle, .ds-button-empty ion-spinner circle, .ds-button-empty-dropdown ion-spinner circle, .ds-button-empty-icon-only ion-spinner circle, .ds-button-icon-only ion-spinner circle {
+  stroke-width: 6px;
+}
+
+.ds-button-primary-small, .ds-button-secondary-small, .ds-button-tertiary-small, .ds-button-magicwand-completed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ds-button-small-font-size);
+  border-radius: var(--ds-button-small-border-radius);
+  padding: 0 var(--ds-button-small-padding-horizontal);
+  height: var(--ds-button-small-height);
+  user-select: none;
+}
+.ds-button-primary-small ion-icon, .ds-button-secondary-small ion-icon, .ds-button-tertiary-small ion-icon, .ds-button-magicwand-completed ion-icon {
+  font-size: 16px;
+  margin-right: 4px;
+}
+.ds-button-primary-small ion-spinner, .ds-button-secondary-small ion-spinner, .ds-button-tertiary-small ion-spinner, .ds-button-magicwand-completed ion-spinner {
+  color: white;
+  width: 16px;
+  margin-right: 8px;
+}
+.ds-button-primary-small ion-spinner circle, .ds-button-secondary-small ion-spinner circle, .ds-button-tertiary-small ion-spinner circle, .ds-button-magicwand-completed ion-spinner circle {
+  stroke-width: 4px;
+}
+
+.ds-button-primary {
+  background: var(--ds-button-primary-background);
+  color: var(--ds-button-primary-color);
+  min-width: 85px;
+  /*&:disabled, &[disabled] {
+      background: var(--ds-primary-color-disabled);
+  }*/
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-primary:hover {
+  background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-primary:active {
+  background-color: var(--ds-primary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-primary-small {
+  background: var(--ds-button-primary-background);
+  color: var(--ds-button-primary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-primary-small:hover {
+  background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-primary-small:active {
+  background-color: var(--ds-primary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-primary-small-danger {
+  background: var(--ds-danger-color);
+  color: var(--ds-button-primary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-primary-small-danger:hover {
+  background: var(--ds-danger-color) radial-gradient(circle, transparent 1%, var(--ds-danger-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-primary-small-danger:active {
+  background-color: var(--ds-danger-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-secondary {
+  background: var(--ds-button-secondary-background);
+  color: var(--ds-button-secondary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-secondary:hover {
+  background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-secondary:active {
+  background-color: var(--ds-secondary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-secondary-small {
+  background: var(--ds-button-secondary-background);
+  color: var(--ds-button-secondary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-secondary-small ion-spinner {
+  color: var(--ds-button-secondary-color);
+}
+.ds-button-secondary-small:hover {
+  background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-secondary-small:active {
+  background-color: var(--ds-secondary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-tertiary {
+  background: var(--ds-button-tertiary-background);
+  color: var(--ds-button-tertiary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-tertiary:hover {
+  background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-tertiary:active {
+  background-color: var(--ds-tertiary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-tertiary-small {
+  background: var(--ds-button-tertiary-background);
+  color: var(--ds-button-tertiary-color);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-tertiary-small:hover {
+  background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-tertiary-small:active {
+  background-color: var(--ds-tertiary-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-magicwand-completed {
+  transition: none;
+  background: var(--ds-button-tertiary-background);
+  color: var(--ds-button-tertiary-color);
+}
+.ds-button-magicwand-completed:hover {
+  transition: none;
+  background: var(--ds-button-secondary-background);
+  color: var(--ds-button-secondary-color);
+}
+.ds-button-magicwand-completed:hover .ds-button-magicwand-completed-completed {
+  display: none;
+}
+.ds-button-magicwand-completed:hover .ds-button-magicwand-completed-undo {
+  display: flex;
+  align-items: center;
+}
+.ds-button-magicwand-completed-completed {
+  display: flex;
+  align-items: center;
+}
+.ds-button-magicwand-completed-undo {
+  display: none;
+}
+
+.ds-button-empty {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  white-space: nowrap;
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-empty:hover {
+  background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-empty:active {
+  background-color: var(--ds-empty-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.ds-button-empty-dropdown {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  transition: 0.2s all ease;
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-empty-dropdown:hover {
+  background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-empty-dropdown:active {
+  background-color: var(--ds-empty-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+.ds-button-empty-dropdown-active {
+  border: 2px solid var(--ds-primary-color);
+}
+.ds-button-empty-dropdown ion-icon {
+  font-size: 18px;
+  margin-left: 4px;
+}
+
+.ds-button-empty-icon-only {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  background-position: center;
+  transition: background 0.6s;
+}
+.ds-button-empty-icon-only:hover {
+  background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
+  transition: 0.6s all ease;
+}
+.ds-button-empty-icon-only:active {
+  background-color: var(--ds-empty-color-ripple);
+  background-size: 100%;
+  transition: background 0s;
+}
+.ds-button-empty-icon-only ion-icon {
+  margin: 0;
+  font-size: 18px;
+}
+
+.ds-button-icon-only {
+  padding: 4px;
+  background: var(--ds-button-empty-background);
+  color: var(--ds-button-empty-color);
+  height: auto;
+  transition: 0.2s all ease;
+}
+.ds-button-icon-only ion-icon, .ds-button-icon-only i {
+  margin: 0;
+  font-size: 20px;
+  min-width: 20px;
+}
+.ds-button-icon-only:hover {
+  color: var(--ds-primary-color);
+  background: var(--ds-light-gray-background);
+}
+
+.ds-buttonsgroup-navigation {
+  padding: 0 var(--ds-button-padding-horizontal-smaller);
+  background: var(--ds-buttonsgroup-navigation-background);
+  color: var(--ds-button-empty-color);
+  box-shadow: var(--ds-button-empty-border);
+  display: inline-block;
+}
+.ds-buttonsgroup-navigation-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.ds-buttonsgroup-navigation-button {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ds-buttonsgroup-navigation-button ion-icon {
+  color: var(--ds-buttonsgroup-navigation-button-color);
+  font-size: var(--ds-buttonsgroup-navigation-button-icon-size);
+  transition: 0.2s all ease;
+}
+.ds-buttonsgroup-navigation-button:hover ion-icon {
+  color: var(--ds-primary-color);
+}
+.ds-buttonsgroup-navigation-content {
+  width: 75px;
+  text-align: center;
+  margin: var(--ds-buttonsgroup-navigation-content-margin);
+  color: var(--ds-black-font);
+}
+.ds-buttonsgroup-navigation-content span {
+  color: var(--ds-buttonsgroup-navigation-button-color);
+}
+
+.ds-input-searchbar ion-input, .ds-input-primary-range ion-input, .ds-input-primary-content ion-textarea, .ds-input-primary-content ion-input, .ds-input-primary-content ion-select {
+  height: var(--ds-input-height);
+  font-size: var(--ds-input-font-size);
+  border-radius: var(--ds-input-border-radius);
+  box-shadow: var(--ds-button-empty-border);
+  padding: 0 var(--ds-input-padding-horizontal);
+  --padding-start: var(--ds-input-padding-horizontal);
+  --padding-end: var(--ds-input-padding-end);
+  font-family: var(--ds-input-font-family) !important;
+  transition: var(--ds-input-transition);
+}
+.ds-input-searchbar ion-input:focus-within, .ds-input-primary-range ion-input:focus-within, .ds-input-primary-content ion-textarea:focus-within, .ds-input-primary-content ion-input:focus-within, .ds-input-primary-content ion-select:focus-within {
+  box-shadow: 0 0 0 2px var(--ds-primary-color);
+  transition: 0.1s all ease;
+}
+.ds-input-searchbar ion-input:disabled, .ds-input-primary-range ion-input:disabled, .ds-input-primary-content ion-textarea:disabled, .ds-input-primary-content ion-input:disabled, .ds-input-primary-content ion-select:disabled, .ds-input-searchbar ion-input[disabled], .ds-input-primary-range ion-input[disabled], .ds-input-primary-content ion-textarea[disabled], .ds-input-primary-content ion-input[disabled], .ds-input-primary-content ion-select[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.ds-input-primary {
+  position: relative;
+  font-family: var(--ds-input-font-family) !important;
+}
+.ds-input-primary-label {
+  font-size: var(--ds-input-label-font-size);
+  color: var(--ds-input-label-color);
+  margin-bottom: var(--ds-label-margin-bottom);
+  font-weight: 500;
+  transition: var(--ds-input-transition);
+}
+.ds-input-primary-content {
+  position: relative;
+}
+.ds-input-primary-content-filebox {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.ds-input-primary-content-insertfile {
+  position: relative;
+}
+.ds-input-primary-content ion-textarea {
+  height: var(--ds-input-textarea-height);
+  --padding-start: var(--ds-input-textarea-padding);
+  --padding-top: var(--ds-input-textarea-padding);
+  --padding-bottom: var(--ds-input-textarea-padding);
+  --padding-end: var(--ds-input-textarea-padding);
+  padding: 0;
+  overflow-y: auto;
+}
+.ds-input-primary-content ion-textarea .textarea-wrapper {
+  height: 100%;
+}
+.ds-input-primary-content-symbol {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--ds-global-font-size);
+  right: var(--ds-input-symbol-margin-right);
+}
+.ds-input-primary-content .ds-block-checkboxandtext {
+  margin-top: var(--ds-input-margin-bottom);
+}
+.ds-input-primary-content-references-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-input-primary-content-references-buttons button:first-child {
+  margin-right: 12px;
+}
+.ds-input-primary-content .ds-element-reference {
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+.ds-input-primary-content-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ds-input-primary-content-checkboxes .ds-block-checkboxandtext {
+  margin-top: var(--ds-input-margin-bottom);
+  width: 48%;
+  margin-right: 2%;
+}
+.ds-input-primary-suggestions-container {
+  width: 100%;
+  position: relative;
+}
+.ds-input-primary-suggestions {
+  position: absolute;
+  z-index: 100000000000000000000000000000000000;
+  background: var(--ds-white-background);
+  width: 100%;
+  border: var(--ds-input-border);
+  border-bottom-left-radius: var(--ds-input-border-radius);
+  border-bottom-right-radius: var(--ds-input-border-radius);
+  border-top: 0;
+  padding: var(--ds-input-suggestions-padding);
+  max-height: var(--ds-input-suggestions-max-height);
+  overflow-x: auto;
+}
+.ds-input-primary-suggestions .ds-item-checkbox {
+  margin-bottom: var(--ds-item-margin-between-items);
+}
+.ds-input-primary-range {
+  display: flex;
+  align-items: center;
+}
+.ds-input-primary-range-separator {
+  margin: 0 var(--ds-margin-icon-and-content);
+  font-size: 13px;
+  color: var(--ds-input-label-color);
+}
+.ds-input-primary-range .ds-button-icon-only {
+  margin-left: var(--ds-margin-icon-and-content);
+}
+.ds-input-primary-range .ds-button-icon-only i, .ds-input-primary-range .ds-button-icon-only ion-icon {
+  font-size: 16px;
+  min-width: 16px;
+}
+
+.ds-input-primary-with-icon {
+  display: flex;
+}
+.ds-input-primary-with-icon-right {
+  margin-left: var(--ds-margin-icon-and-content);
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 8px;
+}
+.ds-input-primary-with-icon-right i, .ds-input-primary-with-icon-right ion-icon {
+  font-size: 23px;
+  min-width: 23px;
+  cursor: pointer;
+  color: var(--button-icon-color);
+}
+
+.ds-input-primary-margin-bottom {
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+
+.ds-input-primary:focus-within .ds-input-primary-label {
+  color: var(--ds-primary-color); /* Replace with your desired color */
+}
+
+.ds-input-primary:focus-within .ds-input-primary-content ion-input {
+  box-shadow: 0 0 0 2px var(--ds-primary-color);
+}
+
+.ds-input-references {
+  font-family: var(--ds-input-font-family) !important;
+}
+.ds-input-references-label {
+  font-size: var(--ds-input-label-font-size);
+  color: var(--ds-input-label-color);
+  margin-bottom: var(--ds-label-margin-bottom);
+  font-weight: 500;
+  transition: var(--ds-input-transition);
+}
+.ds-input-references-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-input-references-buttons button:first-child {
+  margin-right: 12px;
+}
+.ds-input-searchbar ion-input, .ds-input-primary-content ion-input, .ds-input-primary-content ion-select, .ds-input-primary-content ion-textarea, .ds-input-primary-range ion-input {
+  height: var(--ds-input-height);
+  font-size: var(--ds-input-font-size);
+  border-radius: var(--ds-input-border-radius);
+  box-shadow: var(--ds-button-empty-border);
+  padding: 0 var(--ds-input-padding-horizontal);
+  --padding-start: var(--ds-input-padding-horizontal);
+  --padding-end: var(--ds-input-padding-end);
+  font-family: var(--ds-input-font-family) !important;
+  transition: var(--ds-input-transition);
+}
+.ds-input-searchbar ion-input:focus-within, .ds-input-primary-content ion-input:focus-within, .ds-input-primary-content ion-select:focus-within, .ds-input-primary-content ion-textarea:focus-within, .ds-input-primary-range ion-input:focus-within {
+  box-shadow: 0 0 0 2px var(--ds-primary-color);
+  transition: 0.1s all ease;
+}
+.ds-input-searchbar ion-input:disabled, .ds-input-primary-content ion-input:disabled, .ds-input-primary-content ion-select:disabled, .ds-input-primary-content ion-textarea:disabled, .ds-input-primary-range ion-input:disabled, .ds-input-searchbar ion-input[disabled], .ds-input-primary-content ion-input[disabled], .ds-input-primary-content ion-select[disabled], .ds-input-primary-content ion-textarea[disabled], .ds-input-primary-range ion-input[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.ds-input-primary {
+  position: relative;
+  font-family: var(--ds-input-font-family) !important;
+}
+.ds-input-primary-label {
+  font-size: var(--ds-input-label-font-size);
+  color: var(--ds-input-label-color);
+  margin-bottom: var(--ds-label-margin-bottom);
+  font-weight: 500;
+  transition: var(--ds-input-transition);
+}
+.ds-input-primary-content {
+  position: relative;
+}
+.ds-input-primary-content-filebox {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.ds-input-primary-content-insertfile {
+  position: relative;
+}
+.ds-input-primary-content ion-textarea {
+  height: var(--ds-input-textarea-height);
+  --padding-start: var(--ds-input-textarea-padding);
+  --padding-top: var(--ds-input-textarea-padding);
+  --padding-bottom: var(--ds-input-textarea-padding);
+  --padding-end: var(--ds-input-textarea-padding);
+  padding: 0;
+  overflow-y: auto;
+}
+.ds-input-primary-content ion-textarea .textarea-wrapper {
+  height: 100%;
+}
+.ds-input-primary-content-symbol {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--ds-global-font-size);
+  right: var(--ds-input-symbol-margin-right);
+}
+.ds-input-primary-content .ds-block-checkboxandtext {
+  margin-top: var(--ds-input-margin-bottom);
+}
+.ds-input-primary-content-references-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-input-primary-content-references-buttons button:first-child {
+  margin-right: 12px;
+}
+.ds-input-primary-content .ds-element-reference {
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+.ds-input-primary-content-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ds-input-primary-content-checkboxes .ds-block-checkboxandtext {
+  margin-top: var(--ds-input-margin-bottom);
+  width: 48%;
+  margin-right: 2%;
+}
+.ds-input-primary-suggestions-container {
+  width: 100%;
+  position: relative;
+}
+.ds-input-primary-suggestions {
+  position: absolute;
+  z-index: 100000000000000000000000000000000000;
+  background: var(--ds-white-background);
+  width: 100%;
+  border: var(--ds-input-border);
+  border-bottom-left-radius: var(--ds-input-border-radius);
+  border-bottom-right-radius: var(--ds-input-border-radius);
+  border-top: 0;
+  padding: var(--ds-input-suggestions-padding);
+  max-height: var(--ds-input-suggestions-max-height);
+  overflow-x: auto;
+}
+.ds-input-primary-suggestions .ds-item-checkbox {
+  margin-bottom: var(--ds-item-margin-between-items);
+}
+.ds-input-primary-range {
+  display: flex;
+  align-items: center;
+}
+.ds-input-primary-range-separator {
+  margin: 0 var(--ds-margin-icon-and-content);
+  font-size: 13px;
+  color: var(--ds-input-label-color);
+}
+.ds-input-primary-range .ds-button-icon-only {
+  margin-left: var(--ds-margin-icon-and-content);
+}
+.ds-input-primary-range .ds-button-icon-only i, .ds-input-primary-range .ds-button-icon-only ion-icon {
+  font-size: 16px;
+  min-width: 16px;
+}
+
+.ds-input-primary-with-icon {
+  display: flex;
+}
+.ds-input-primary-with-icon-right {
+  margin-left: var(--ds-margin-icon-and-content);
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 8px;
+}
+.ds-input-primary-with-icon-right i, .ds-input-primary-with-icon-right ion-icon {
+  font-size: 23px;
+  min-width: 23px;
+  cursor: pointer;
+  color: var(--button-icon-color);
+}
+
+.ds-input-primary-margin-bottom {
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+
+.ds-input-primary:focus-within .ds-input-primary-label {
+  color: var(--ds-primary-color); /* Replace with your desired color */
+}
+
+.ds-input-primary:focus-within .ds-input-primary-content ion-input {
+  box-shadow: 0 0 0 2px var(--ds-primary-color);
+}
+
+.ds-input-references {
+  font-family: var(--ds-input-font-family) !important;
+}
+.ds-input-references-label {
+  font-size: var(--ds-input-label-font-size);
+  color: var(--ds-input-label-color);
+  margin-bottom: var(--ds-label-margin-bottom);
+  font-weight: 500;
+  transition: var(--ds-input-transition);
+}
+.ds-input-references-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-input-references-buttons button:first-child {
+  margin-right: 12px;
+}
+.ds-input-searchbar ion-icon {
+  font-size: var(--ds-input-searchbar-icon-size);
+  margin-left: var(--ds-margin-icon-and-content);
+  color: var(--ds-light-gray-font);
+}
+.ds-input-searchbar ion-input {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  --padding-start: var(--ds-margin-icon-and-content);
+}
+
+.ds-input-searchbar-responsive {
+  transition: 0.1s all ease;
+}
+.ds-input-searchbar-responsive:focus-within {
+  width: 210px !important;
+}
+
+.ds-item-blue-small, .ds-item-tree, .ds-item-checkbox, .ds-item-with-icon, .ds-item-with-right-icon, .ds-item-primary-no-background-only-icon, .ds-item-primary-no-background, .ds-item-primary-with-hover, .ds-item-primary {
+  font-family: var(--ds-item-font-family) !important;
+  font-size: var(--ds-item-font-size);
+  height: var(--ds-item-height);
+  min-height: var(--ds-item-height);
+  padding: 0 var(--ds-item-padding-horizontal);
+  background: var(--ds-item-background);
+  border-radius: var(--ds-item-border-radius);
+  color: var(--ds-item-font-color);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ds-item-with-icon, .ds-item-with-right-icon, .ds-item-primary-no-background-only-icon, .ds-item-primary-no-background, .ds-item-primary-with-hover {
+  transition: 0.2s all ease;
+}
+.ds-item-with-icon:hover, .ds-item-with-right-icon:hover, .ds-item-primary-no-background-only-icon:hover, .ds-item-primary-no-background:hover, .ds-item-primary-with-hover:hover {
+  transition: 0.2s all ease;
+  background: var(--ds-item-background-hover);
+}
+
+.ds-item-list .ds-item-primary, .ds-item-list .ds-item-primary-with-hover, .ds-item-list .ds-item-with-icon, .ds-item-list .ds-item-checkbox, .ds-item-list .ds-item-tree, .ds-item-list .ds-item-tree-no-hover {
+  margin-bottom: var(--ds-margin-between-items);
+}
+.ds-item-list .ds-item-primary:last-child, .ds-item-list .ds-item-primary-with-hover:last-child, .ds-item-list .ds-item-with-icon:last-child, .ds-item-list .ds-item-checkbox:last-child, .ds-item-list .ds-item-tree:last-child, .ds-item-list .ds-item-tree-no-hover:last-child {
+  margin-bottom: 0;
+}
+
+.ds-item-primary-with-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-item-without-height {
+  height: auto;
+}
+
+.ds-item-primary-no-background {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: transparent;
+}
+.ds-item-primary-no-background ion-icon, .ds-item-primary-no-background i {
+  font-size: var(--ds-item-icon-font-size);
+  width: var(--ds-item-icon-font-size);
+  min-width: var(--ds-item-icon-font-size);
+  margin-right: var(--ds-margin-icon-and-content);
+}
+
+.ds-item-primary-no-background-only-icon {
+  justify-content: center;
+  text-align: center;
+  background: transparent;
+}
+.ds-item-primary-no-background-only-icon ion-icon, .ds-item-primary-no-background-only-icon i {
+  font-size: var(--ds-item-icon-font-size);
+  width: var(--ds-item-icon-font-size);
+  min-width: var(--ds-item-icon-font-size);
+  text-align: center;
+}
+
+.ds-item-with-right-icon {
+  justify-content: space-between;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: transparent;
+}
+.ds-item-with-right-icon ion-icon, .ds-item-with-right-icon i {
+  font-size: var(--ds-item-icon-font-size-smaller);
+  width: var(--ds-item-icon-font-size-smaller);
+  min-width: var(--ds-item-icon-font-size-smaller);
+  margin-right: var(--ds-margin-icon-and-content);
+}
+.ds-item-with-right-icon-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.ds-item-primary-active {
+  background: var(--ds-item-background-hover);
+}
+
+.ds-item-primary-active-blue {
+  background: rgba(24, 78, 216, 0.1);
+}
+
+.ds-item-with-button {
+  display: flex;
+  justify-content: space-between;
+}
+.ds-item-with-button-left {
+  display: flex;
+  align-items: center;
+}
+
+.ds-item-with-icon ion-icon, .ds-item-with-icon i {
+  font-size: var(--ds-item-icon-font-size);
+  margin-right: var(--ds-margin-icon-and-content);
+  width: var(--ds-item-icon-font-size);
+  min-width: var(--ds-item-icon-font-size);
+}
+.ds-item-with-icon button {
+  margin-left: var(--ds-margin-icon-and-content);
+}
+
+.ds-item-checkbox ion-checkbox {
+  --border-radius: 100px;
+  --border-width: 1px;
+  --border-color: var(--ds-border-color);
+  --checkbox-background: var(--ds-primary-color);
+  --background-checked: var(--ds-primary-color);
+  margin-right: var(--ds-item-checkbox-margin-right);
+}
+.ds-item-checkbox ion-checkbox::part(container) {
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+}
+
+.ds-item-tree {
+  justify-content: space-between;
+  height: var(--ds-item-tree-height);
+  min-height: var(--ds-item-tree-height);
+  max-height: var(--ds-item-tree-height);
+  border-radius: var(--ds-item-tree-border-radius);
+  background: var(--ds-item-tree-background);
+  color: var(--ds-item-tree-color);
+  transition: none;
+}
+.ds-item-tree-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ds-item-tree-left-folder {
+  font-size: var(--ds-item-tree-icon-font-size);
+  min-width: var(--ds-item-tree-icon-font-size);
+  color: var(--ds-item-tree-color);
+  margin-right: var(--ds-item-tree-folder-margin-right);
+}
+.ds-item-tree-left-arrow {
+  font-size: var(--ds-item-tree-arrow-font-size);
+  min-width: var(--ds-item-tree-arrow-font-size);
+  color: var(--ds-item-tree-color);
+  margin-right: var(--ds-item-tree-icons-margin-right);
+}
+.ds-item-tree-left-icon {
+  font-size: var(--ds-item-tree-icon-font-size);
+  min-width: var(--ds-item-tree-icon-font-size);
+  color: var(--ds-item-tree-color);
+  margin-right: var(--ds-item-tree-icons-margin-right);
+}
+.ds-item-tree-left-text {
+  color: var(--ds-item-tree-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-item-tree-right ion-icon {
+  font-size: 14px;
+  min-width: 14px;
+}
+.ds-item-tree:hover {
+  background: var(--ds-item-tree-background-active);
+}
+.ds-item-tree-active {
+  background: rgba(24, 78, 216, 0.1);
+  /*.ds-item-tree-left {
+
+      .ds-item-tree-left-icon {
+          color: var(--ds-primary-color);
+      }
+
+      .ds-item-tree-left-text {
+          color: var(--ds-primary-color);
+
+      }
+  }*/
+}
+.ds-item-tree-active:hover {
+  background: none;
+  background: rgba(0, 72, 255, 0.158) !important;
+}
+
+.ds-item-tree-no-hover:hover {
+  background: var(--ds-item-tree-background);
+}
+
+.ds-item-chip {
+  padding: var(--ds-item-chip-padding);
+  border-radius: var(--ds-item-chip-border-radius);
+  font-family: var(--ds-item-font-family) !important;
+  font-size: var(--ds-item-chip-font-size);
+  color: var(--ds-item-chip-primary-font-color);
+  background-color: var(--ds-item-chip-primary-background);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+}
+
+.ds-item-image {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--ds-item-padding-horizontal);
+  height: auto;
+  min-height: auto;
+}
+.ds-item-image-image {
+  width: 40px;
+  max-width: 40px;
+  margin-right: 4px;
+}
+.ds-item-image-image img {
+  width: 100%;
+}
+.ds-item-image-texts-title {
+  font-family: var(--ds-modal-header-title-font-family);
+  font-size: var(--ds-item-title-font-size);
+  color: var(--ds-item-title-font-color);
+  font-weight: bold;
+}
+.ds-item-image-texts-subtitle {
+  font-family: var(--ds-modal-header-subtitle-font-family);
+  font-size: var(--ds-item-subtitle-font-size);
+  color: var(--ds-item-subtitle-font-color);
+}
+
+.ds-items-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-items-list .ds-item-primary {
+  margin-right: 16px;
+  flex-grow: 1;
+  margin-top: var(--ds-margin-between-items);
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
+}
+
+.ds-items-vertical-list {
+  overflow-x: hidden;
+}
+.ds-items-vertical-list .ds-item-primary, .ds-items-vertical-list .ds-item-primary-with-hover, .ds-items-vertical-list .ds-item-with-icon, .ds-items-vertical-list .ds-item-checkbox, .ds-items-vertical-list .ds-item-tree, .ds-items-vertical-list .ds-item-tree-no-hover {
+  margin-bottom: var(--ds-margin-between-items);
+}
+
+.ds-item-blue-small {
+  border-radius: var(--ds-item-border-radius);
+  background: var(--ds-item-small-background);
+  color: var(--ds-white-font);
+  height: var(--ds-item-small-height);
+  min-height: var(--ds-item-small-height);
+  padding: 0 var(--ds-item-small-padding-horizontal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ds-item-blue-small ion-icon {
+  font-size: var(--ds-item-small-icon-font-size);
+  width: var(--ds-item-small-icon-font-size);
+  min-width: var(--ds-item-small-icon-font-size);
+  margin-right: var(--ds-margin-icon-and-content);
+}
+.ds-item-blue-small span {
+  font-weight: 500;
+}
+
+.ds-item-danger {
+  background: var(--ds-item-danger-background);
+  color: var(--ds-item-danger-font-color);
+}
+.ds-item-danger ion-icon, .ds-item-danger i {
+  color: var(--ds-item-danger-font-color);
+}
+.ds-item-danger:hover {
+  background: var(--ds-item-danger-background-hover);
+}
+
+.ds-element-reference {
+  padding: var(--ds-element-reference-padding);
+  padding-bottom: var(--ds-element-reference-padding-bottom);
+  box-shadow: var(--ds-button-empty-border);
+  border-radius: var(--ds-element-reference-border-radius);
+}
+.ds-element-reference-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--ds-element-reference-heading-margin-bottom);
+  overflow-x: hidden;
+}
+.ds-element-reference-header-title {
+  font-family: var(--ds-element-reference-title-font-family);
+  font-size: var(--ds-element-reference-title-font-size);
+  color: var(--ds-element-reference-title-font-color);
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-element-reference-header-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ds-element-reference-header-buttons .ds-button-primary-small:first-child, .ds-element-reference-header-buttons .ds-button-primary:first-child, .ds-element-reference-header-buttons .ds-button-tertiary:first-child {
+  margin-right: 8px;
+}
+.ds-element-reference-header-subtitle {
+  font-family: var(--ds-element-reference-subtitle-font-family);
+  font-size: var(--ds-element-reference-subtitle-font-size);
+  color: var(--ds-element-reference-subtitle-font-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-element-reference-header-subtitle-bigger {
+  font-family: var(--ds-element-reference-subtitle-font-family);
+  font-size: var(--ds-element-reference-subtitle-bigger-font-size);
+  color: var(--ds-element-reference-subtitle-font-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-element-reference-content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  overflow-x: hidden;
+}
+.ds-element-reference-content .ds-block-propertyandvalue {
+  margin-bottom: 8px;
+  width: 30%;
+}
+.ds-element-reference-content .ds-block-propertyandvalue-history-value {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.ds-element-reference-margin-bottom {
+  margin-bottom: var(--ds-element-references-margin-bottom);
+}
+
+.ds-element-reference-clickable {
+  cursor: pointer;
+  transition: 0.2s all ease;
+}
+.ds-element-reference-clickable:hover {
+  background-color: var(--ds-element-reference-hover-background);
+  transition: 0.2s all ease;
+}
+
+.ds-block-propertyandvalue {
+  max-width: 140px;
+  min-width: 80px;
+}
+.ds-block-propertyandvalue-property {
+  color: var(--ds-light-gray-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 13px;
+  font-weight: 600;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-block-propertyandvalue-value {
+  color: var(--ds-black-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-block-propertyandvalue-large-property {
+  color: var(--ds-light-gray-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 14px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-block-propertyandvalue-large-value {
+  color: var(--ds-black-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-block-propertyandvalue-history-property {
+  color: var(--ds-black-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 13px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+}
+.ds-block-propertyandvalue-history-value {
+  font-family: var(--ds-item-font-family);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.ds-block-propertyandvalue-history-value-old {
+  color: var(--ds-light-gray-font);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-block-propertyandvalue-history-value ion-icon {
+  margin: 0 var(--ds-margin-icon-and-content-smaller);
+}
+.ds-block-propertyandvalue-history-value-new {
+  color: var(--ds-black-font);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-block-toggleandtext {
+  display: flex;
+  align-items: center;
+}
+.ds-block-toggleandtext .ds-ion-toggle {
+  margin-right: var(--ds-margin-icon-and-content);
+}
+.ds-block-toggleandtext-text {
+  color: var(--ds-black-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-block-checkboxandtext {
+  display: flex;
+  align-items: center;
+}
+.ds-block-checkboxandtext .ds-ion-checkbox {
+  margin-right: var(--ds-margin-icon-and-content);
+}
+.ds-block-checkboxandtext-text {
+  color: var(--ds-black-font);
+  font-family: var(--ds-item-font-family);
+  font-size: 13px;
+  user-select: none;
+  cursor: pointer;
+}
+
+.ds-modal-row-expanded-modal, .ds-modal-secondary-modal, .ds-modal-primary-modal {
+  z-index: var(--ds-modal-z-index);
+  --box-shadow: var(--ds-floating-block-box-shadow);
+  --border-radius: var(--ds-modal-border-radius);
+  background-color: transparent !important;
+  align-items: start;
+  justify-content: end;
+  border: 1px solid var(--ds-border-color);
+  /*&::part(backdrop) {
+      display: none !important;
+  }*/
+}
+
+.ds-modal-primary-modal {
+  --width: var(--ds-modal-primary-width);
+  --height: var(--ds-modal-primary-height);
+  right: 0;
+}
+.ds-modal-primary-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: var(--ds-modal-header-border-bottom);
+  padding: var(--ds-modal-header-padding-vertical) var(--ds-modal-header-padding);
+  position: sticky;
+  top: 0;
+  background: var(--ds-white-background);
+  z-index: 100000;
+}
+.ds-modal-primary-header-title {
+  font-family: var(--ds-modal-header-title-font-family);
+  font-size: var(--ds-modal-header-title-font-size);
+  color: var(--ds-modal-header-title-font-color);
+  font-weight: bold;
+}
+.ds-modal-primary-header-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.ds-modal-primary-header-buttons button:first-child {
+  margin-right: var(--ds-modal-header-buttons-margin-right);
+}
+.ds-modal-primary-content {
+  padding: var(--ds-box-padding);
+  margin-top: var(--ds-header-and-content-margin-bottom);
+  /*.ds-block-toggleandtext, .ds-input-primary {
+      margin-bottom: var(--ds-modal-header-buttons-margin-right);
+  }*/
+}
+.ds-modal-secondary {
+  padding: var(--ds-box-padding);
+  display: flex;
+  flex-direction: column;
+}
+.ds-modal-secondary-modal {
+  --width: var(--ds-modal-secondary-width-2);
+  --height: auto !important;
+  align-items: center;
+  justify-content: center;
+}
+.ds-modal-secondary-modal::part(backdrop) {
+  display: block !important;
+}
+.ds-modal-secondary-content {
+  overflow-y: auto;
+  flex-grow: 1;
+  max-height: 400px;
+  margin-top: var(--ds-header-and-content-margin-bottom);
+  padding: 2px;
+}
+.ds-modal-secondary-content .ds-element-reference {
+  margin-bottom: var(--ds-element-references-margin-bottom);
+  max-width: 500px;
+}
+.ds-modal-secondary-content-larger {
+  max-height: 500px;
+}
+.ds-modal-secondary-content-larger .ds-element-reference {
+  margin-bottom: var(--ds-element-references-margin-bottom);
+  max-width: 100%;
+}
+
+.ds-modal-row-expanded-modal {
+  --width: var(--ds-modal-row-expanded-width);
+  --height: var(--ds-modal-row-expanded-height);
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-item-list-column-selection .ds-item-primary {
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
+}
+
+ion-popover.ds-popover-primary {
+  --backdrop-opacity: 0;
+  z-index: var(--ds-popover-z-index);
+  --box-shadow: var(--ds-floating-block-box-shadow);
+  --border-radius: var(--ds-popover-border-radius);
+}
+
+ion-popover.ds-popover-primary {
+  --width: var(--ds-popover-primary-width);
+  margin-top: 8px;
+}
+
+.ds-popover-body {
+  padding: var(--ds-popover-padding);
+}
+
+.ds-screen {
+  background: var(--ds-screen-background);
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  height: 100vh; /* 100% of the viewport height */
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 600px) {
+  .ds-screen {
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 3x;
+    padding-bottom: 3px;
+  }
+}
+@media screen and (max-width: 1000px) {
+  .ds-screen-header {
+    overflow: auto;
+    min-height: 50px;
+  }
+}
+.ds-screen-loader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 32px;
+}
+
+.ds-screen-header {
+  background: var(--ds-screen-header-background);
+  padding: var(--ds-screen-header-padding-vertical) var(--ds-screen-header-padding-horizontal);
+  border-color: 1px solid var(--ds-screen-header-border-color);
+  border-radius: var(--ds-screen-header-border-radius);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ds-screen-header-right {
+  display: flex;
+  align-items: center;
+}
+.ds-screen-header-title {
+  font-family: var(--ds-screen-header-title-font-family);
+  font-size: var(--ds-screen-header-title-font-size);
+  font-weight: var(--ds-screen-header-title-font-weight);
+  color: var(--ds-screen-header-title-font-color);
+  font-weight: bold;
+}
+.ds-screen-header-results-count {
+  padding-left: 10px;
+  font-family: var(--ds-screen-header-title-font-family);
+  font-size: var(--ds-screen-header-results-count-font-size);
+  color: var(--ds-screen-header-title-font-color);
+}
+.ds-screen-header-el {
+  margin-right: var(--ds-screen-header-elements-margin-right);
+}
+.ds-screen-header .ds-input-searchbar {
+  width: 160px;
+}
+
+.ds-screen-customhtml {
+  width: 100%;
+  margin-top: 16px;
+  position: relative;
+}
+.ds-screen-customhtml iframe {
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+}
+
+.ds-screen-table {
+  flex-grow: 1;
+  margin-top: 16px;
+  overflow-y: auto;
+  overflow-x: auto;
+  background: var(--ds-screen-table-background);
+  border-radius: var(--ds-screen-table-border-radius);
+}
+.ds-screen-table-columns-header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px solid var(--ds-border-color);
+  box-sizing: border-box;
+  width: fit-content;
+  min-width: 100%;
+}
+.ds-screen-table-columns-header button {
+  margin-left: var(--ds-margin-between-items);
+}
+.ds-screen-table-header-col {
+  position: relative;
+  font-size: 13px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid var(--ds-border-color);
+  margin-bottom: -1px;
+  padding: var(--ds-screen-table-header-col-padding-vertical);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: var(--ds-screen-header-col-background);
+  user-select: none;
+}
+.ds-screen-table-header-col ion-icon {
+  font-size: 16px;
+  min-width: 16px;
+  margin-left: var(--ds-margin-icon-and-content);
+}
+.ds-screen-table-header-col .ds-button-icon-only {
+  margin-left: 0;
+  padding: 0;
+}
+.ds-screen-table-header-col-sorticon {
+  position: absolute;
+  height: 100%;
+  background: white;
+  right: 2px;
+  z-index: 1000000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--ds-screen-header-col-background);
+}
+.ds-screen-table-header-col-sorticon ion-icon {
+  font-size: 14px;
+  min-width: 14px;
+  margin-left: 0;
+}
+.ds-screen-table-header-col-resizer {
+  width: var(--ds-screen-table-resizer-width);
+  background: var(--ds-screen-table-resizer-background);
+  height: 100%;
+  top: 0;
+  position: absolute;
+  right: 0;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100000;
+  transition: 0.2s all ease;
+}
+.ds-screen-table-header-col-resizer:hover {
+  background: var(--ds-primary-color);
+  width: 3px;
+}
+.ds-screen-table-header-col-resizer:focus-within {
+  background: var(--ds-primary-color);
+  width: 3px;
+}
+.ds-screen-table-header-col-editor {
+  position: relative;
+  font-size: 13px;
+  width: 130px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid var(--ds-border-color);
+  margin-bottom: -1px;
+  padding: var(--ds-screen-table-header-col-padding-vertical);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  background: var(--ds-primary-color);
+  color: white;
+}
+.ds-screen-table-header-col-editor ion-icon {
+  font-size: 16px;
+  min-width: 16px;
+  margin-right: var(--ds-margin-icon-and-content);
+}
+.ds-screen-table-header-col-editor .ds-button-icon-only {
+  margin-left: 0;
+  padding: 0;
+}
+.ds-screen-table-header-col-editor .ds-screen-table-header-col-sorticon {
+  background: var(--ds-primary-color) !important;
+}
+.ds-screen-table-header-col-editor .ds-screen-table-header-col-sorticon ion-icon {
+  color: white;
+}
+.ds-screen-table-content {
+  width: fit-content;
+  min-width: 100%;
+}
+.ds-screen-table-content-row {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--ds-screen-table-content-row-height);
+  border-bottom: 1px solid var(--ds-border-color);
+  /*
+  todo: poner esto cuando se clique en una row expanded
+  border: 2px solid var(--ds-primary-color);
+  border-radius: 6px;*/
+  cursor: pointer;
+  transition: 0.2s all ease;
+}
+.ds-screen-table-content-row:hover {
+  background: var(--ds-screen-table-content-row-hover-background);
+}
+.ds-screen-table-content-row-magicWandButtons {
+  position: absolute;
+  left: 0;
+  background: red;
+  height: 20px;
+  z-index: 1000000;
+}
+.ds-screen-table-content-row-rowexpandedlink {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 8px;
+  background: white;
+  bottom: -2px;
+  z-index: 10000;
+  border: 1px solid #dfdfdf;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+  border-bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.2s all ease;
+  display: none;
+}
+.ds-screen-table-content-row-rowexpandedlink ion-icon {
+  font-size: 10px;
+  color: #b1b1b1;
+}
+.ds-screen-table-content-row-activated {
+  background: var(--ds-primary-color-smooth-background);
+  border-radius: 6px;
+}
+.ds-screen-table-content-row-activated .ds-screen-table-content-col {
+  margin-bottom: 0;
+}
+.ds-screen-table-content-row-activated .ds-screen-table-content-row-rowexpandedlink {
+  display: flex;
+  transition: 0.2s all ease;
+}
+.ds-screen-table-content-row-expanded {
+  height: 50px;
+  position: relative;
+}
+.ds-screen-table-content-row-expanded-resizer {
+  height: var(--ds-screen-table-row-expanded-resizer-height);
+  background: var(--ds-screen-table-row-expanded-resizer-background);
+  width: 100%;
+  bottom: 0;
+  z-index: 100000;
+  position: absolute;
+  cursor: row-resize;
+  user-select: none;
+  transition: 0.2s all ease;
+}
+.ds-screen-table-content-row-expanded-resizer:hover {
+  background: var(--ds-primary-color);
+  height: 3px;
+}
+.ds-screen-table-content-row-expanded-resizer:focus-within {
+  background: var(--ds-primary-color);
+  height: 3px;
+}
+.ds-screen-table-content-col {
+  height: 100%;
+  border-bottom: 1px solid var(--ds-border-color);
+  margin-bottom: -1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+}
+
+.ds-table-header-col-width-fastDataEditor {
+  width: 130px;
+  min-width: 130px;
+  max-width: 130px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ds-table-header-col-width-multipleSelect {
+  width: 90px;
+  min-width: 90px;
+  max-width: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ds-table-header-col-width-multipleSelect-header {
+  background: var(--ds-screen-header-col-background) !important;
+}
+.ds-table-header-col-width-multipleSelect-header .ds-screen-table-header-col-sorticon {
+  background: var(--ds-screen-header-col-background) !important;
+}
+.ds-table-header-col-width-multipleSelect-header .ds-screen-table-header-col-sorticon ion-icon {
+  color: var(--ds-dark-gray-font);
+}
+
+.ds-screen-gallery {
+  flex-grow: 1;
+  margin-top: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.ds-screen-kanban {
+  flex-grow: 1;
+  margin-top: 16px;
+  overflow-y: auto;
+  overflow-x: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.ds-screen-kanban-column {
+  width: var(--ds-screen-kanban-column-width);
+  min-width: var(--ds-screen-kanban-column-width);
+  max-width: var(--ds-screen-kanban-column-width);
+  height: var(--ds-screen-kanban-column-height);
+  background: var(--ds-white-background);
+  margin-right: var(--ds-screen-kanba-column-margin-right);
+  border-top-right-radius: var(--ds-screen-kanban-top-border-radius);
+  border-top-left-radius: var(--ds-screen-kanban-top-border-radius);
+  border-bottom-right-radius: var(--ds-screen-kanban-bottom-border-radius);
+  border-bottom-left-radius: var(--ds-screen-kanban-bottom-border-radius);
+  display: flex;
+  flex-direction: column;
+}
+.ds-screen-kanban-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-top-right-radius: var(--ds-screen-kanban-top-border-radius);
+  border-top-left-radius: var(--ds-screen-kanban-top-border-radius);
+  padding: 12px 16px;
+  background: #D4D4D4;
+  font-size: var(--ds-global-font-size-large);
+  color: var(--ds-black-font);
+  font-weight: 500;
+}
+.ds-screen-kanban-column-content {
+  min-height: var(--ds-screen-kanban-content-min-height);
+  padding: var(--ds-screen-kanban-content-padding);
+  padding-right: 0;
+  flex-grow: 1;
+  overflow-y: auto;
+  background-color: var(--ds-screen-kanban-content-background-color);
+  border-radius: var(--ds-screen-kanban-content-border-radius);
+}
+.ds-screen-kanban-column-content .ds-card-kanban {
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+
+.ds-screen-calendar {
+  flex-grow: 1;
+}
+
+::ng-deep .cal-month-view .cal-header .cal-cell {
+  border: 3px solid red !important;
+}
+
+.ds-row-expanded {
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+  border-right: 2px solid var(--ds-border-color);
+}
+.ds-row-expanded-aside {
+  height: 100%;
+  position: relative;
+  width: 60px;
+}
+.ds-row-expanded-aside-container {
+  overflow-y: auto;
+  height: 100%;
+}
+.ds-row-expanded-aside-resizer {
+  width: var(--ds-row-expanded-aside-resizer-width);
+  background: var(--ds-row-expanded-aside-resizer-background);
+  height: 100%;
+  right: 0;
+  top: 0;
+  position: absolute;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100000;
+  transition: 0.2s all ease;
+}
+.ds-row-expanded-aside-resizer:hover {
+  background: var(--ds-primary-color);
+  width: 3px;
+}
+.ds-row-expanded-aside-resizer:focus-within {
+  background: var(--ds-primary-color);
+  width: 3px;
+}
+.ds-row-expanded-customhtmlcode {
+  width: 100%;
+  height: 100%;
+}
+.ds-row-expanded-body {
+  height: 100%;
+  position: relative;
+  overflow-y: auto;
+}
+.ds-row-expanded-secondary-aside {
+  height: 100%;
+  position: relative;
+}
+.ds-row-expanded-secondary-aside-collapse-button {
+  position: absolute;
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid #eaeaea;
+  top: 50%;
+  left: -12px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000000;
+  background: white;
+}
+.ds-row-expanded-secondary-aside-collapse-button:hover {
+  background: #f2f2f2;
+}
+.ds-row-expanded-secondary-aside-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding: var(--ds-row-expanded-secondary-aside-padding);
+  display: flex;
+  flex-direction: column;
+}
+.ds-row-expanded-secondary-aside-container .ds-button-empty {
+  margin-bottom: var(--ds-element-references-margin-bottom);
+}
+.ds-row-expanded-secondary-aside .ds-element-reference {
+  margin-bottom: var(--ds-element-references-margin-bottom);
+}
+.ds-row-expanded-secondary-aside-resizer {
+  width: var(--ds-row-expanded-aside-resizer-width);
+  background: var(--ds-row-expanded-aside-resizer-background);
+  height: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  cursor: col-resize;
+  z-index: 100000;
+  user-select: none;
+  transition: 0.2s all ease;
+}
+.ds-row-expanded-secondary-aside-resizer:hover {
+  background: var(--ds-primary-color);
+  width: 3px;
+}
+.ds-row-expanded-secondary-aside-resizer:focus-within {
+  background: var(--ds-primary-color);
+  width: 3px;
+}
+
+@media screen and (max-width: 600px) {
+  .ds-row-expanded {
+    overflow: auto;
+  }
+}
+.ds-row-expanded-aside {
+  padding: var(--ds-row-expanded-aside-padding-vertical) var(--ds-row-expanded-aside-padding-horizontal);
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.ds-row-expanded-aside-header {
+  margin-bottom: 8px;
+}
+.ds-row-expanded-aside-tree {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+}
+.ds-row-expanded-aside-tree .ds-item-tree {
+  margin-bottom: 4px;
+}
+
+.ds-row-expanded-body {
+  width: 100%;
+  position: relative;
+  min-width: 500px;
+}
+.ds-row-expanded-body .ds-header-basic {
+  width: auto;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+  position: sticky;
+  top: 0;
+  padding: var(--ds-row-expanded-body-padding);
+  z-index: 100000;
+}
+.ds-row-expanded-body-content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: var(--ds-row-expanded-body-padding);
+}
+.ds-row-expanded-body-content .ds-input-primary {
+  margin-right: 1%;
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+.ds-row-expanded-body-lastusersactions {
+  position: sticky;
+  bottom: 0;
+  z-index: 10000;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 16px;
+  padding-bottom: 16px;
+}
+.ds-row-expanded-body .ds-item-blue-small {
+  width: fit-content;
+}
+
+.ds-header-basic {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+  background: var(--ds-white-background);
+}
+.ds-header-basic-notsavedchanges {
+  position: absolute;
+  color: var(--ds-header-notsavedchanges-color);
+  right: var(--ds-row-expanded-body-padding);
+  bottom: 0;
+  font-size: var(--ds-header-notsavedchanges-font-size);
+}
+.ds-header-basic-title {
+  font-family: var(--ds-modal-header-title-font-family);
+  font-size: var(--ds-modal-header-title-font-size);
+  color: var(--ds-modal-header-title-font-color);
+  margin-right: var(--ds-modal-header-title-margin-right);
+  font-weight: bold;
+}
+.ds-header-basic-subtitle {
+  font-family: var(--ds-modal-header-subtitle-font-family);
+  font-size: var(--ds-modal-header-subtitle-font-size);
+  color: var(--ds-modal-header-subtitle-font-color);
+}
+.ds-header-basic-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.ds-header-basic-buttons button {
+  margin-right: var(--ds-modal-header-buttons-margin-right);
+}
+.ds-header-basic-buttons button.ds-buttonsgroup-navigation-button {
+  margin-right: 0;
+}
+.ds-header-basic-buttons button:last-child {
+  margin-right: 0;
+}
+
+.ds-header-basic.ds-header-basic--border {
+  border-bottom: var(--ds-modal-header-border-bottom);
+}
+
+.ds-header-basic.ds-header-basic--padding {
+  padding: var(--ds-modal-header-padding-small);
+}
+
+.ds-header-basic.ds-header-basic--itemscenter {
+  align-items: center;
+}
+
+.ds-header-basic.ds-header-basic--nomarginbottom {
+  margin-bottom: 0;
+}
+
+.ds-header-back {
+  display: flex;
+  align-items: center;
+}
+.ds-header-back button {
+  margin-right: var(--ds-header-and-content-margin-bottom);
+}
+.ds-header-back-title {
+  font-family: var(--ds-modal-header-title-font-family);
+  font-size: var(--ds-modal-header-title-font-size);
+  color: var(--ds-modal-header-title-font-color);
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+  font-weight: bold;
+}
+
+.ds-header-secondary {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-header-secondary-title {
+  font-family: var(--ds-modal-header-title-font-family);
+  font-size: var(--ds-modal-header-title-font-size);
+  color: var(--ds-modal-header-title-font-color);
+  text-align: center;
+  font-weight: bold;
+}
+
+.ds-button-empty-active {
+  box-shadow: 0 0 0 2px var(--ds-primary-color);
+  transition: 0.1s all ease;
+}
+
+.ds-ion-toggle {
+  --handle-background: var(--ds-white-background);
+  --handle-background-checked: var(--ds-white-background);
+  --handle-height: 16px;
+  --handle-width: 16px;
+  --handle-box-shadow: none;
+  height: 20px;
+  width: 39px;
+  --background-checked: var(--ds-primary-color);
+  --background: var(--ds-gray-background);
+}
+
+.ds-ion-checkbox {
+  --border-width: 1px;
+  --border-color: var(--ds-border-color);
+  --border-radius: 4px;
+  --checkbox-background: var(--ds-primary-color);
+  --background-checked: var(--ds-primary-color);
+  margin-right: var(--ds-item-checkbox-margin-right);
+  --size: 20px;
+  --transition: 0.1s all ease;
+  min-width: 20px;
+  max-width: 20px;
+  width: 20px;
+}
+.ds-ion-checkbox ion-checkbox::part(container) {
+  border-radius: 6px;
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+}
+
+.ds-ion-checkbox-bigger {
+  --border-width: 1px;
+  --border-color: var(--ds-border-color);
+  --border-radius: 4px;
+  --checkbox-background: var(--ds-primary-color);
+  --background-checked: var(--ds-primary-color);
+  margin-right: var(--ds-item-checkbox-margin-right);
+  --size: 22px;
+  --transition: 0.1s all ease;
+  min-width: 22px;
+  max-width: 22px;
+  width: 22px;
+}
+.ds-ion-checkbox-bigger ion-checkbox::part(container) {
+  border-radius: 6px;
+  width: 22px;
+  height: 22px;
+  padding: 0px;
+}
+
+.ds-ion-checbox-round {
+  --border-width: 1px;
+  --border-color: var(--ds-border-color);
+  --checkbox-background: var(--ds-primary-color);
+  --background-checked: var(--ds-primary-color);
+  --size: 20px;
+  width: 20px;
+  max-width: 20px;
+  min-width: 20px;
+  --transition: 0.1s all ease;
+}
+.ds-ion-checbox-round ion-checkbox::part(container) {
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+}
+
+.ds-title-pages {
+  font-family: "Inter", sans-serif;
+  font-size: 11px;
+  color: var(--ds-dark-gray-font);
+  margin-bottom: 8px;
+}
+
+.ds-title-h1 {
+  font-family: var(--ds-font-family);
+  font-size: var(--ds-h1-font-size);
+  font-weight: bold;
+  color: var(--ds-h1-font-color);
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+
+.ds-title-h2 {
+  font-family: var(--ds-font-family);
+  font-size: var(--ds-h2-font-size);
+  color: var(--ds-font-color);
+  font-weight: 600;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+
+.ds-title-margin-bottom {
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+
+.ds-titlecase {
+  text-transform: capitalize;
+}
+
+.ds-text {
+  font-family: var(--ds-text-font-family);
+  font-size: var(--ds-text-font-size);
+  color: var(--ds-text-font-color);
+}
+
+.ds-text-margin-bottom {
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+
+.ds-title-pages-small {
+  font-family: "Inter", sans-serif;
+  font-size: 9px;
+  color: var(--ds-dark-gray-font);
+  margin-bottom: 8px;
+}
+
+.ds-modal-title {
+  font-family: "Poppins", sans-serif;
+  font-size: var(--ds-global-font-size-bigger);
+  font-weight: bold;
+  color: var(--ds-dark-gray-font);
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+
+.ds-link {
+  text-decoration: none;
+}
+
+.ds-block-inputs-full-width {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.ds-block-inputs-full-width app-smart-form {
+  width: 100%;
+}
+.ds-block-inputs-full-width .ds-input-primary, .ds-block-inputs-full-width .ds-input-secondary, .ds-block-inputs-full-width .ds-input-tertiary {
+  width: 100%;
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+
+.ds-block-inputs-half-width {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.ds-block-inputs-half-width app-smart-input {
+  width: 48%;
+  margin-right: 1%;
+  margin-bottom: var(--ds-input-margin-bottom);
+}
+.ds-block-inputs-half-width .ds-block-inputs-margin {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.ds-block-buttons-end {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.ds-block-inputs-100w app-smart-input {
+  width: 100%;
+}
+
+/*::-webkit-scrollbar,
+*::-webkit-scrollbar-thumb {
+  height: 28px;
+  width: 28px;
+  border-radius: 13px;
+  background-clip: padding-box;
+  border: 10px solid transparent;
+}
+
+*::-webkit-scrollbar-thumb {        
+  box-shadow: inset 0 0 0 10px var(--ds-scrollbar-color);
+}*/
+.ds-totalum-aside {
+  width: 250px;
+  height: 100%;
+  position: relative;
+  background: var(--ds-totalum-aside-background);
+  box-shadow: var(--ds-floating-block-box-shadow);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.ds-totalum-aside-collapse-button {
+  position: absolute;
+  cursor: pointer;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid #eaeaea;
+  top: 50%;
+  right: -12px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000000;
+  background: white;
+}
+.ds-totalum-aside-collapse-button:hover {
+  background: #f2f2f2;
+}
+.ds-totalum-aside-top {
+  flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ds-totalum-aside-top-top-small {
+  align-items: center;
+}
+.ds-totalum-aside-top-corporative {
+  width: 100%;
+  height: 52px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.ds-totalum-aside-top-corporative img {
+  width: 100%;
+  max-height: 36px;
+  max-width: 180px;
+}
+.ds-totalum-aside-top-pages {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: var(--ds-box-padding);
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ds-totalum-aside-top-pages .ds-item-primary-no-background, .ds-totalum-aside-top-pages .ds-item-primary-no-background-only-icon, .ds-totalum-aside-top-pages .ds-item-with-right-icon {
+  margin-bottom: var(--ds-margin-between-items);
+}
+.ds-totalum-aside-top-pages .ds-item-primary-no-background-only-icon {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.ds-totalum-aside-top-pages-group-pages {
+  padding-left: var(--ds-box-padding);
+}
+.ds-totalum-aside-top-pages-emptyaside {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ds-totalum-aside-top-pages-emptyaside button {
+  display: inline-block;
+}
+.ds-totalum-aside-bottom {
+  border-top: 1px solid var(--ds-border-color);
+  padding: var(--ds-box-padding);
+}
+.ds-totalum-aside-bottom .ds-item-primary-no-background, .ds-totalum-aside-bottom .ds-item-primary-no-background-only-icon {
+  margin-bottom: var(--ds-margin-between-items);
+}
+.ds-totalum-aside-resizer {
+  width: var(--ds-big-resizer-width);
+  background: var(--ds-row-expanded-aside-resizer-background);
+  height: 100%;
+  right: 0;
+  top: 0;
+  position: absolute;
+  cursor: col-resize;
+  z-index: 100000;
+  user-select: none;
+  transition: 0.2s all ease;
+}
+.ds-totalum-aside-resizer:hover {
+  background: var(--ds-primary-color);
+  width: 4px;
+}
+.ds-totalum-aside-resizer:focus-within {
+  background: var(--ds-primary-color);
+  width: 4px;
+}
+
+.ds-card-statistic, .ds-card-withimage, .ds-card-kanban, .ds-card-gallery {
+  background: var(--ds-card-background);
+  border-radius: var(--ds-card-border-radius);
+  box-shadow: var(--ds-card-box-shadow);
+  padding: var(--ds-card-padding);
+  transition: transform 0.3s ease-in-out;
+}
+
+.ds-card-gallery {
+  height: var(--ds-card-gallery-height);
+  max-height: var(--ds-card-gallery-height);
+  min-height: var(--ds-card-gallery-height);
+  width: var(--ds-card-gallery-width);
+  max-width: var(--ds-card-gallery-width);
+  min-width: var(--ds-card-gallery-width);
+  margin: 16px;
+}
+.ds-card-gallery-nophoto {
+  height: auto;
+  max-height: auto;
+  min-height: auto;
+}
+.ds-card-gallery-image {
+  width: var(--ds-card-image-width);
+  max-width: var(--ds-card-image-width);
+  display: flex;
+  justify-content: center;
+  object-fit: cover;
+  border-radius: var(--ds-card-border-radius);
+  max-height: var(--ds-card-image-height);
+  height: var(--ds-card-image-height);
+  background-size: cover; /* Cover the entire div without stretching the image */
+  background-position: center; /* Center the image within the div */
+  background-repeat: no-repeat; /* Do not repeat the image */
+  margin-bottom: var(--ds-card-margin-bottom-between-data);
+}
+.ds-card-gallery-image-footer {
+  width: 100%;
+  text-align: center;
+  color: var(--ds-light-gray-font);
+  font-size: var(--ds-card-image-footer-font-size);
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+}
+.ds-card-gallery-properties .ds-block-propertyandvalue-large {
+  margin-bottom: var(--ds-card-margin-bottom-between-data);
+}
+
+.ds-card-hover {
+  cursor: pointer;
+}
+.ds-card-hover:hover {
+  transition: transform 0.3s ease-in-out;
+  transform: translateY(-7px);
+}
+
+.ds-card-kanban {
+  width: var(--ds-card-kanban-max-width);
+  max-width: var(--ds-card-kanban-max-width);
+  min-width: var(--ds-card-kanban-max-width);
+  user-select: none;
+}
+.ds-card-kanban:hover {
+  cursor: grab;
+}
+.ds-card-kanban:focus {
+  cursor: grabbing;
+}
+.ds-card-kanban-properties .ds-block-propertyandvalue-large {
+  margin-bottom: var(--ds-card-margin-bottom-between-data);
+}
+.ds-card-kanban-properties .ds-block-propertyandvalue-large:last-child {
+  margin-bottom: 0;
+}
+
+.ds-card-withimage {
+  padding: 0;
+  display: inline-block;
+  cursor: pointer;
+}
+.ds-card-withimage-image {
+  display: flex;
+  justify-content: center;
+  object-fit: cover;
+  border-radius: var(--ds-card-border-radius);
+  background-size: cover; /* Cover the entire div without stretching the image */
+  background-position: center; /* Center the image within the div */
+  background-repeat: no-repeat; /* Do not repeat the image */
+  margin-bottom: 0;
+}
+.ds-card-withimage-content {
+  padding: var(--ds-card-padding);
+}
+
+.ds-card-clicked {
+  border: 2px solid var(--ds-primary-color);
+}
+
+.ds-card-withimage-max-height .ds-card-withimage-image {
+  max-height: var(--ds-card-image-height);
+  height: var(--ds-card-image-height);
+}
+
+.ds-card-no-shadow {
+  box-shadow: none !important;
+}
+
+.ds-card-statistic {
+  background: #f6f7f9;
+  padding: 0 !important;
+  display: inline-block;
+}
+.ds-card-statistic-content {
+  display: flex;
+  align-items: center;
+  padding: var(--ds-card-padding);
+}
+.ds-card-statistic-left {
+  display: flex;
+  align-items: center;
+  margin-right: var(--ds-modal-header-title-margin-right);
+}
+.ds-card-statistic-right-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.ds-card-statistic-right-subtitle {
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.ds-icon-square-background {
+  background: rgba(70, 113, 223, 0.2);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+}
+.ds-icon-square-background ion-icon {
+  color: rgb(70, 113, 223);
+  font-size: 18px;
+  min-width: 18px;
+  width: 18px;
+}
+
+.ds-card-p-title {
+  font-size: var(--ds-global-font-size-large);
+  color: var(--ds-black-font);
+  margin-bottom: var(--ds-card-margin-bottom-between-data);
+  font-weight: bold;
+}
+
+.ds-calendar-cell {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 8px;
+}
+.ds-calendar-cell-title {
+  font-family: var(--ds-screen-calendar-header-cell-font-family);
+  color: var(--ds-screen-calendar-header-cell-font-color);
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+.ds-calendar-cell-events-chip-container {
+  width: 100%;
+}
+.ds-calendar-cell-events-chip-container .ds-item-chip {
+  margin-bottom: 8px;
+}
+.ds-calendar-cell-events-chip-container .ds-item-chip:last-child {
+  margin-bottom: 0;
+}
+
+.ds-structurator {
+  background: var(--ds-white-background);
+  height: 100vh; /* 100% of the viewport height */
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+}
+.ds-structurator .ds-aside-primary {
+  height: 100vh;
+  overflow-y: auto;
+}
+.ds-structurator-element-header {
+  position: fixed;
+  z-index: 100000000000000000000000;
+  width: 60%;
+  padding-left: 20px;
+  padding-top: 20px;
+  padding-bottom: 5px;
+}
+.ds-structurator-no-select-content {
+  padding: 40px;
+}
+.ds-structurator-content {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.ds-structurator-content-form {
+  overflow-y: auto;
+  padding: 20px;
+  margin-top: 50px;
+  padding-bottom: 50px;
+}
+.ds-structurator-content-form div {
+  max-width: 600px;
+}
+.ds-structurator-content-structurator-block {
+  padding: 16px;
+  max-width: 600px;
+}
+.ds-structurator-content-swipedown {
+  position: absolute;
+  right: 12px;
+  margin-bottom: -11px;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  border-radius: 50%;
+  background: var(--ds-light-gray-background);
+  z-index: 100000000000000000000000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: row-resize;
+  border: 1px solid var(--ds-border-color);
+}
+.ds-structurator-content-swipedown ion-icon {
+  font-size: 12px;
+  color: var(--ds-dark-gray-font);
+  rotate: 135deg;
+}
+.ds-structurator-content-top {
+  width: 100%;
+  padding: var(--ds-box-padding);
+  flex-grow: 1;
+  overflow-y: auto;
+  position: relative;
+}
+.ds-structurator-content-bottom {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  z-index: 100000;
+  flex-grow: 1;
+}
+.ds-structurator-content-bottom-resizer {
+  height: 4px;
+  background: var(--ds-primary-color);
+  width: 100%;
+  top: 0;
+  position: absolute;
+  cursor: row-resize;
+  user-select: none;
+  z-index: 100000;
+  transition: 0.2s all ease;
+}
+.ds-structurator-content-bottom-resizer:hover {
+  background: var(--ds-primary-color);
+  height: 4px;
+}
+.ds-structurator-content-bottom-resizer:focus-within {
+  background: var(--ds-primary-color);
+  height: 4px;
+}
+.ds-structurator-content-bottom-code-editor-savebutton {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  margin: 4px;
+  z-index: 100000000000000000000000;
+}
+.ds-structurator-content-code-editor {
+  width: 100%;
+  height: 100%;
+  padding-top: 10px;
+  z-index: 100000;
+}
+
+.ds-aside-primary {
+  width: var(--ds-aside-width);
+  max-width: var(--ds-aside-width);
+  min-width: var(--ds-aside-width);
+  background: var(--ds-white-background);
+  padding: var(--ds-box-padding);
+  position: relative;
+}
+.ds-aside-primary-resizer {
+  width: var(--ds-big-resizer-width);
+  background: var(--ds-row-expanded-aside-resizer-background);
+  height: 100%;
+  right: 0;
+  top: 0;
+  position: absolute;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100000;
+  transition: 0.2s all ease;
+}
+.ds-aside-primary-resizer:hover {
+  background: var(--ds-primary-color);
+  width: 4px;
+}
+.ds-aside-primary-resizer:focus-within {
+  background: var(--ds-primary-color);
+  width: 4px;
+}
+.ds-aside-primary .ds-header-basic {
+  align-items: center;
+  margin-bottom: var(--ds-header-and-content-margin-bottom);
+  overflow-x: hidden;
+}
+.ds-aside-primary-content {
+  overflow-x: hidden;
+}
+
+@media (max-width: 600px) {
+  .ds-aside-primary {
+    width: 190px !important;
+    max-width: 190px !important;
+    min-width: 190px !important;
+  }
+}
+
+/*# sourceMappingURL=totalum-design-system.css.map */