/* Input */
.input-component {
  width: 330px;
}
.input-component.margin {
  margin-top: 20px;
  margin-bottom: 20px;
}
.input-component.input-based-size {
  width: auto;
}
.input-label-wrapper {
  margin-bottom: 10px;
}
.input-label-wrapper > label {
  font-size: 14px;
}
.input-description-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.input-description-wrapper > span {
  font-size: 12px;
  color: var(--color-dark-grey);
}
.input-tag-wrapper {
  display: flex;
  position: relative;
}
input.input_text_default {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 1px solid var(--color-grey);
  height: 37px;
  background: var(--color-white);
  box-sizing: border-box;
  color: var(--color-black);
  font-weight: 400;
  font-size: 13px;
  width: 100%;
}
.input-with-icon > input.input_text_default {
  padding-right: calc(10px + 10px + 16px);
}
input.input_text_default:hover,
input.input_text_default:active {
  border: 1px solid var(--color-lancom-electric-blue);
}
input.input_text_default:read-only {
  border: 1px solid var(--color-grey);
  background: var(--color-input-background-readonly);
}
input.input_text_default:disabled {
  border: 1px solid var(--color-grey);
  background: var(--color-input-background-disabled);
}
input.input_text_default:focus {
  border: 1px solid var(--color-lancom-electric-blue);
  outline: none;
}
.input-icon-click-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  right: 0px;
  height: 37px;
  width: calc(10px + 16px + 10px);
  outline: none;
  pointer-events: none;
}
.input-icon-click-wrapper.click-event {
  cursor: pointer;
  pointer-events: initial;
}
.input-icon-wrapper {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.input-icon-click-wrapper.click-event:hover > .input-icon-wrapper {
  fill: var(--color-lancom-electric-blue);
}
.input-icon-wrapper.click-event {
  cursor: pointer;
  pointer-events: initial;
}

/* FileUpload */
.fileupload-component {
  width: 330px;
}
.fileupload-component.margin {
  margin-top: 20px;
  margin-bottom: 20px;
}
.fileupload-component > .fileupload-label-wrapper {
  margin-bottom: 10px;
}
.fileupload-component > .fileupload-label-wrapper > label {
  font-size: 14px;
}
.fileupload-component > .fileupload-control-wrapper {
  display: flex;
  flex-direction: column;
}
.fileupload-component >.fileupload-control-wrapper > input {
  display: none;
}
.fileupload-component > .fileupload-control-wrapper > .button-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.fileupload-component > .fileupload-control-wrapper > .button-wrapper > button {
  flex-shrink: 0;
  flex-grow: 0;
  margin-right: 8px;
}
.fileupload-component > .fileupload-control-wrapper > .button-wrapper > .reset-button.inactive {
  display: none;
}
.fileupload-component > .fileupload-control-wrapper > .filename-wrapper {
  display: flex;
}
.fileupload-component > .fileupload-control-wrapper > .filename-wrapper > .filename-label {
  margin-right: 4px;
  font-weight: 400;
}
.fileupload-component > .fileupload-control-wrapper > .filename-wrapper > .nofile {
  font-style: italic;
  padding-right: 2px;
}
.fileupload-component > .fileupload-control-wrapper > .filename-wrapper > .nofile.inactive {
  display: none;
}
.fileupload-component > .fileupload-control-wrapper > .filename-wrapper > .filename.inactive {
  display: none;
}

/* groupsection */
.groupsection-component {
  border: 1px solid var(--color-grey);
  background-color: var(--color-white);
  padding-top: 0;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
}
.groupsection-component.fit-content {
  width: fit-content;
}

/* select */
.select-component {
  width: 330px;
}
.select-component > .label-wrapper {
  margin-bottom: 10px;
}
.select-component > .label-wrapper > .label {
  font-size: 14px;
  font-weight: 300;
}
.select-component > .input-wrapper {
  display: flex;
  position: relative;
  cursor: pointer;
}
.select-component > .input-wrapper > input.value {
  display: none;
}
.select-component > .input-wrapper > input.value:read-only + input.label {
  border: 1px solid var(--color-grey);
  background: var(--color-input-background-readonly);
  cursor: default;
}
.select-component > .input-wrapper > input.value:disabled + input.label {
  border: 1px solid var(--color-grey);
  background: var(--color-input-background-disabled);
  cursor: default;
}
.select-component > .input-wrapper > input.label {
  padding-right: calc(15px + 15px + 21px);
  padding-left: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 1px solid var(--color-grey);
  height: 37px;
  background: var(--color-white);
  box-sizing: border-box;
  color: var(--color-black);
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  caret-color: transparent;
}
.select-component > .input-wrapper > input.label:hover,
.select-component > .input-wrapper > input.label:active {
  background: var(--color-lancom-light-blue);
}
.select-component > .input-wrapper > input.label:focus {
  border: 1px solid var(--color-lancom-electric-blue);
  outline: none;
}
.select-component > .input-wrapper > .select-icon-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  right: 0px;
  height: 37px;
  width: 21px;
  outline: none;
  pointer-events: none;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: content-box;
}
.select-component > .input-wrapper > .select-icon-wrapper > .select-control-icon-up-wrapper,
.select-component > .input-wrapper > .select-icon-wrapper > .select-control-icon-down-wrapper {
  width: 16px;
  height: 16px;
}
.select-component.inactive > .input-wrapper > .select-icon-wrapper > .select-control-icon-up-wrapper {
  display: none;
}
.select-component.active > .input-wrapper > .select-icon-wrapper > .select-control-icon-down-wrapper {
  display: none;
}
.select-dropdown-wrapper {
  cursor: default;
  font-style: normal;
  line-height: 33px;
  position: absolute;
  background-color: var(--color-white);
  min-width: 210px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  padding-bottom: 15px;
  overflow-x: auto;
  box-sizing: border-box;
}
.select-dropdown-wrapper > .selectoption-component {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 13px;
  font-weight: 400;
  min-height: 33px;
  color: var(--color-black);
  text-align: left;
}
.select-dropdown-wrapper > .selectoption-component:hover {
  background-color: var(--color-lancom-light-blue);
  cursor: pointer;
}

/* Dropdown menu*/
.dropdownmenu-component-wrapper {
  display: flex;
  width: fit-content;
}
.dropdownmenu-component-wrapper > .component-content-wrapper {
  position: relative;
}
.dropdownmenu-label-wrapper {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dropdownmenu-label-icon-wrapper {
  width: 37px;
  height: 37px;
}
.dropdownmenu-label-text-wrapper {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.dropdownmenu-label {
  font-weight: 400;
  color: var(--color-black);
}
.dropdownmenu-label.main {
  font-size: 14px;
}
.dropdownmenu-label.sub {
  font-size: 12px;
}
.dropdownmenu-control-icon-down-wrapper,
.dropdownmenu-control-icon-up-wrapper {
  margin-left: 16px;
  width: 18px;
  height: 18px;
}
.dropdownmenu-component-wrapper.active > .component-content-wrapper > .dropdownmenu-label-wrapper > .dropdownmenu-control-icon-down-wrapper {
  display: none;
}
.dropdownmenu-component-wrapper.inactive > .component-content-wrapper > .dropdownmenu-label-wrapper > .dropdownmenu-control-icon-up-wrapper {
  display: none;
}
.dropdownmenu-dropdown-wrapper {
  cursor: default;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: var(--color-black);
  line-height: 27px;
  position: absolute;
  background-color: var(--color-white);
  min-width: 210px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  padding-bottom: 15px;
  overflow-x: auto;
  box-sizing: border-box;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-dropdown-group-separator {
  border-top: 1px solid var(--color-light-grey);
  margin-top: 15px;
  margin-bottom: 15px;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-label {
  padding-left: 15px;
  padding-right: 15px;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper.disabled > a {
  color: var(--color-grey);
  text-decoration: none;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper.enabled > a {
  color: var(--color-black);
  text-decoration: none;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper.enabled:hover {
  background-color: var(--color-lancom-light-blue);
  cursor: pointer;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper .dropdownmenu-entry-label-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper .dropdownmenu-entry-label-icon-wrapper {
  height: 14px;
  width: 14px;
  margin-right: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper .dropdownmenu-entry-label-icon-wrapper > svg {
  height: 100%;
  width: 100%;
}
.dropdownmenu-dropdown-wrapper > .dropdownmenu-group-wrapper > .dropdownmenu-group-entries-wrapper > .dropdownmenu-entry-wrapper .dropdownmenu-entry-label-text-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

/* chevron */
.chevron-component {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
.chevron-component > .chevron-wrapper {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
.chevron-component > .chevron-wrapper > .chevron {
  box-sizing: border-box;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
  display: inline-block;
  content: "";
  position: relative;
}
.chevron-component > .chevron-wrapper > .chevron.right {
  transform: rotate(315deg);
}
.chevron-component > .chevron-wrapper > .chevron.down {
  transform: rotate(45deg);
}
.chevron-component > .chevron-wrapper > .chevron.left {
  transform: rotate(135deg);
}
.chevron-component > .chevron-wrapper > .chevron.up {
  transform: rotate(225deg);
}

/* pagetitlecontrol */
.pagetitlecontrol-component-wrapper {
  display: flex;
  align-items: center;
  align-content: center;
  min-width: 0;
}
.pagetitlecontrol-component-wrapper > form {
  display: flex;
  align-items: center;
  align-content: center;
}
.pagetitlecontrol-component-wrapper.active.clickable {
  cursor: pointer;
}
.pagetitlecontrol-component-wrapper .icon {
  width: 20px;
  height: 20px;
}
.pagetitlecontrol-component-wrapper .label {
  font-size: 16px;
  font-weight: 300;
}
.pagetitlecontrol-component-wrapper.active .label {
  color: var(--color-lancom-electric-blue);
}
.pagetitlecontrol-component-wrapper.inactive .label {
  color: var(--color-grey);
}
.pagetitlecontrol-component-wrapper.active .icon {
  fill: var(--color-lancom-electric-blue);
}
.pagetitlecontrol-component-wrapper.inactive .icon {
  fill: var(--color-grey);
}
.pagetitlecontrol-component-wrapper .label + .icon {
  margin-left: 3px;
}
.pagetitlecontrol-component-wrapper.active .label + .icon {
  fill: var(--color-black);
}
.pagetitlecontrol-component-wrapper.inactive .label + .icon {
  fill: var(--color-disabled);
}

/* statuslabel */
.statuslabel-component {
  min-width: 87px;
  padding-left: 8px;
  padding-right: 8px;
  height: 18px;
  color: var(--color-black);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* utilizationbar */
.utilizationbar-component {
  height: 18px;
  width: 87px;
  font-size: 12px;
  color: var(--color-black);
  font-weight: 400;
  position: relative;
}
.utilizationbar-component > .background {
  background-color: var(--color-statuslabel-grey);
  width: 100%;
  height: 100%;
  position: absolute;
}
.utilizationbar-component > .bar {
  position: absolute;
  height: 100%;
}
.utilizationbar-component > .label {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

/* button */
.button-component,
.inputbutton-component {
  border: none;
  color: var(--color-black);
  fill: var(--color-black);
  min-width: 140px;
  height: 39px;
  font-size: 13px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  cursor: pointer;
}
.button-component > span.loading {
  display: none;
}
.button-component.loading > span.loading {
  display: inline;
}
.button-component.loading > span.icon {
  display: none;
}
.button-component.loading > span.label {
  display: none;
}
.button-component.icon-only,
.button-component.primary.icon-only,
.button-component.secondary.icon-only {
  min-width: 0;
  width: 60px;
}
.button-component.primary,
.inputbutton-component.primary {
  width: 244px;
  background-color: var(--color-lancom-electric-blue);
  color: var(--color-white);
  fill: var(--color-white);
}
.button-component.primary:hover,
.inputbutton-component.primary:hover {
  background-color: var(--color-lancom-light-blue);
  color: var(--color-white);
  fill: var(--color-white);
}
.button-component.primary:active,
.inputbutton-component.primary:active {
  background-color: var(--color-lancom-blue);
  color: var(--color-white);
  fill: var(--color-white);
}
.button-component.secondary,
.inputbutton-component.secondary {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
}
.button-component.secondary:hover,
.inputbutton-component.secondary:hover {
  background-color: var(--color-lancom-light-blue);
  color: var(--color-black);
  fill: var(--color-black);
  border: 1px solid transparent;
}
.button-component.secondary:active,
.inputbutton-component.secondary:active {
  background-color: var(--color-lancom-electric-blue);
  color: var(--color-white);
  fill: var(--color-white);
  border: 1px solid transparent;
}
.button-component.quaternary,
.inputbutton-component.quaternary {
  background-color: var(--color-transparent);
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  height: 20px;
  width: fit-content;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  margin-right: 30px;
  color: var(--color-lancom-electric-blue);
}
.button-component.quaternary.no-margin,
.inputbutton-component.quaternary.no-margin {
  margin: 0;
}
.button-component.quaternary:hover,
.inputbutton-component.quaternary:hover {
  color: var(--color-lancom-light-blue);
}
.button-component.quaternary.inactive,
.button-component.quaternary:disabled,
.inputbutton-component.quaternary:disabled {
  background-color: var(--color-transparent);
  color: var(--color-grey);
  cursor: default;
  pointer-events: none;
}
.button-component.inactive,
.button-component.primary:disabled,
.button-component.secondary:disabled,
.inputbutton-component.inactive,
.inputbutton-component.primary:disabled,
.inputbutton-component.secondary:disabled {
  background-color: var(--color-grey);
  color: var(--color-black);
  fill: var(--color-black);
  cursor: default;
  border: none;
  pointer-events: none;
}
.button-component > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.button-component > .placeholder {
  width: 15px;
  flex: 0 0 auto;
}
.ui-button {
  border: none !important;
  color: var(--color-black) !important;
  fill: var(--color-black) !important;
  min-width: 140px !important;
  height: 39px !important;
  font-size: var(--font-size-normal) !important;
  font-weight: var(--font-weight-regular) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  cursor: pointer !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-grey) !important;
}
.ui-button:hover {
  background-color: var(--color-lancom-light-blue) !important;
  color: var(--color-black) !important;
  fill: var(--color-black) !important;
  border: 1px solid transparent !important;
}
.ui-button:active {
  background-color: var(--color-lancom-electric-blue) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  border: 1px solid transparent !important;
}

/* radiobutton */
.radiobutton-component {
  display: flex;
  align-items: center;
  align-content: center;
  position: static;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-black);
}
.radiobutton-component > input {
  display: none;
}
.radiobutton-component > input ~ .control {
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-lancom-dark-blue);
  background-color: var(--color-white);
  box-sizing: content-box;
}
.radiobutton-component:hover > input ~ .control {
  border: 1px solid var(--color-lancom-electric-blue);
}
.radiobutton-component > input:disabled ~ .control {
  border: 1px solid var(--color-grey);
  background-color: var(--color-light-grey);
  cursor: initial;
}
.radiobutton-component > input:disabled ~ .label {
  cursor: initial;
}
.radiobutton-component > input:checked ~ .control {
  border: 1px solid var(--color-lancom-electric-blue);
  background-color: var(--color-lancom-electric-blue);
}
.radiobutton-component > input:disabled:checked ~ .control {
  border: 1px solid var(--color-grey);
  background-color: var(--color-grey);
}
.radiobutton-component > input ~ .control:after {
  display: none;
  position: absolute;
  content: "";
}
.radiobutton-component > input:checked ~ .control:after {
  display: block;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white);
}
.radiobutton-component > input:disabled:checked ~ .control:after {
  display: block;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white);
}
.radiobutton-component > input ~ .label {
  padding-left: 10px;
}

/* radiobuttongroup */
.radiobuttongroup-component {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

/* checkbox */
.checkbox-component {
  display: flex;
  align-items: center;
  align-content: center;
  position: static;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-black);
}
.checkbox-component > .control {
  flex: 0 0 auto;
}
.checkbox-component.margin {
  margin-top: 20px;
  margin-bottom: 20px;
}
.checkbox-component > input {
  display: none;
}
.checkbox-component > input ~ .control {
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 1px solid var(--color-lancom-dark-blue);
  background-color: var(--color-white);
  box-sizing: content-box;
}
.checkbox-component:hover > input ~ .control {
  border: 1px solid var(--color-lancom-electric-blue);
}
.checkbox-component > input:disabled ~ .control {
  border: 1px solid var(--color-grey);
  background-color: var(--color-light-grey);
  cursor: initial;
}
.checkbox-component > input:disabled ~ .label {
  cursor: initial;
}
.checkbox-component > input:checked ~ .control {
  border: 1px solid var(--color-lancom-electric-blue);
  background-color: var(--color-lancom-electric-blue);
}
.checkbox-component > input:disabled:checked ~ .control {
  border: 1px solid var(--color-grey);
  background-color: var(--color-grey);
}
.checkbox-component > input ~ .control:after {
  display: none;
  position: absolute;
  content: "";
}
.checkbox-component > input:checked ~ .control:after {
  display: block;
  top: 0px;
  left: 4px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checkbox-component > input:disabled:checked ~ .control:after {
  display: block;
  top: 0px;
  left: 4px;
  width: 5px;
  height: 10px;
  background: solid var(--color-white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checkbox-component > input ~ .label {
  padding-left: 10px;
}

/* checkboxgroup */
.checkboxgroup-component {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

/* loadingspinner */
span.loadingspinner-component {
  display: block;
}
.loadingspinner-component {
  background-image: conic-gradient(var(--color-lancom-blue), var(--color-lancom-electric-blue));
  border-radius: 50%;
  animation: spinner-rotate 1.2s linear infinite;
}
@keyframes spinner-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

/* progressbar */
.progressbar-component {
  display: flex;
  align-items: center;
  align-content: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-black);
}
.progressbar-component > .bar {
  height: 9px;
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
}
.progressbar-component > .bar > .progress {
  height: 100%;
  background: var(--color-lancom-blue);
  position: relative;
  z-index: 1;
}
.progressbar-component > .bar > .animation {
  height: 100%;
  width: 100px;
  background: linear-gradient(to right, var(--color-lancom-blue) 0%, var(--color-lancom-electric-blue) 40%, var(--color-lancom-electric-blue) 60%, var(--color-lancom-blue) 100%); 
  position: absolute;
  z-index: 2;
}
.progressbar-component > .bar > .animation.right {
  animation: progressbar-glow-toright 3s linear infinite;
}
.progressbar-component > .bar > .animation.left {
  animation: progressbar-glow-toleft 3s linear infinite;
}
.progressbar-component > .bar > .background {
  width: 100%;
  height: 100%;
  background-color: var(--color-statuslabel-grey);
  position: relative;
  z-index: 3;
}
.progressbar-component > .label {
  min-width: 42px;
  text-align: right;
  flex: 0 0 auto;
}
.progressbar-component > .label::before {
  content: "";
  display: inline-block;
  width: 10px;
  flex: 0 0 auto;
}
@keyframes progressbar-glow-toright
{
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}
@keyframes progressbar-glow-toleft
{
  0% {
    left: 100%;
  }
  100% {
    left: -100px;
  }
}

/* dialog */
#overlay .dialog-component-overlay {
  width: 100%;
  height: 100%;
  background:rgba(0, 0, 0, 0.4);
  position: absolute;
}
#overlay .dialog-component-overlay > .box-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box {
  background-color: var(--color-white);
  min-width: 400px;
  width: 650px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header {
  height: 70px;
  padding-left: 30px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 100px;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header > .header-left,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header > .header-left {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 12px;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header > .header-left > h2,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header > .header-left > h2 {
  margin: 0;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header > .header-right,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header > .header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header > .header-left > .icon,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header > .header-left > .icon {
  height: 30px;
  width: 30px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-right: 10px;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header > .header-right > .closebutton,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header > .header-right > .closebutton {
  height: 25px;
  width: 25px;
  flex-shrink: 0;
  flex-grow: 0;
  fill: var(--color-light-grey);
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-header > .header > .header-right > .closebutton:hover,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-header > .header > .header-right > .closebutton:hover {
  fill: var(--color-black);
  cursor: pointer;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-content,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-content {
  padding-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 40px;
  border-top: 1px solid var(--color-light-grey);
  flex: 0 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-wrap: break-word;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-footer,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-footer {
  height: 70px;
  padding-left: 30px;
  padding-right: 15px;
  border-top: 1px solid var(--color-light-grey);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > .dialog-footer > *,
#overlay .dialog-component-overlay > .box-wrapper > .dialog-box > form > .dialog-footer > * {
  margin-left: 4px;
}

/* tile */
.tile-component {
  padding: 30px;
  background-color: var(--color-very-light-grey);
  display: flex;
  flex-direction: column;
}

.tile-component > h2 {
  margin: 0;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-black);
  flex: 0 0 auto;
}
.tile-component > .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tile-component > .footer {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.tile-component > .footer > * {
  margin-left: 4px;
}

/* coloredicon */
.coloredicon-component {
  display: flex;
  align-items: center;
  align-content: center;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  width: fit-content;
}
.coloredicon-component > .icon {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.coloredicon-component > .icon > div {
  height: 90%;
  width: 90%;
  border-radius: 50%;
}
.coloredicon-component > .icon + div {
  padding-left: 8px;
  padding-right: 8px;
}

/* table */
.table-component {
  border: 1px solid var(--color-light-grey);
  width: 100%;
  font-weight: 300;
  min-width: min-content;
}
.table-component.content-width {
  width: fit-content;
}
.table-component > .header {
  padding: 18px;
  background-color: var(--color-input-background-readonly);
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 30px;
}
.table-component > .header.hidden {
  display: none;
}
.table-component > .header > div {
  display: flex;
  align-items: center;
  align-content: center;
}
.table-component > .table {
  width: 100%;
  overflow: auto;
}
.table-component > .table > table {
  border-spacing: 0;
  width: 100%;
}
.table-component > .footer {
  padding: 18px;
  background-color: var(--color-input-background-readonly);
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.table-component > .footer > .paginator-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.table-component > .footer > .entries-count {
  flex: 0 0 auto;
}
.table-component > .footer > .entries-count:only-child {
  margin-left: auto;
}
.table-component > .table > table > thead > tr > th {
  font-weight: 400;
  vertical-align: bottom;
}
.table-component > .table > table > thead > tr > th,
.table-component > .table > table > tbody > tr > td {
  text-align: left;
  border-bottom: 1px solid var(--color-light-grey);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
}
.table-component > .table > table > thead > tr > th.breakable-col,
.table-component > .table > table > tbody > tr > td.breakable-col {
  word-wrap: break-word;
  word-wrap: anywhere;
}
.table-component > .table > table > tbody > tr > td.empty {
  text-align: center;
}
.table-component > .table > table > thead > tr > th:first-child,
.table-component > .table > table > tbody > tr > td:first-child {
  padding-left: 20px;
}
.table-component > .table > table > thead > tr > th:last-child,
.table-component > .table > table > tbody > tr > td:last-child {
  padding-right: 20px;
}
.table-component > .table > table > tbody > tr > td.tablebodyentryicon-component > div {
  width: 18px;
  height: 18px;
}
.table-component > .table > table > tbody > tr > td.tablebodyentrybutton-component > div > button {
  height: 30px;
}
.table-component > .table > table > tbody > tr > td.tablebodyentrybutton-component {
  padding-top: 0;
  padding-bottom: 0;
  width: 0px;
}

/* contentnotification*/
div.contentnotification-component > div {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
}
div.contentnotification-component > div.info {
  border-color: var(--color-lancom-light-blue);
}
div.contentnotification-component > div.success {
  border-color: var(--color-apple-green-soft);
}
div.contentnotification-component > div.warning {
  border-color: var(--color-orange-soft);
}
div.contentnotification-component > div.error {
  border-color: var(--color-red-soft);
}
div.contentnotification-component > div > div.icon {
  display: flex;
  align-items: flex-start;
}
div.contentnotification-component > div > div.icon > div {
  flex: 0 0 auto;
  height: 36px;
  width: 36px;
}
div.contentnotification-component > div > div.icon > div > svg.svg-icon > .icon {
  fill: var(--color-black);
}
div.contentnotification-component > div.info > div.icon > div > svg.svg-icon > use,
div.contentnotification-component > div.info > div.icon > div > svg.svg-icon > .circle {
  fill: var(--color-lancom-light-blue);
  color: var(--color-black);
}
div.contentnotification-component > div.success > div.icon > div > svg.svg-icon > use,
div.contentnotification-component > div.success > div.icon > div > svg.svg-icon > .circle {
  fill: var(--color-apple-green-soft);
  color: var(--color-black);
}
div.contentnotification-component > div.warning > div.icon > div > svg.svg-icon > use,
div.contentnotification-component > div.warning > div.icon > div > svg.svg-icon > .circle {
  fill: var(--color-orange-soft);
  color: var(--color-black);
}
div.contentnotification-component > div.error > div.icon > div > svg.svg-icon > use,
div.contentnotification-component > div.error > div.icon > div > svg.svg-icon > .circle {
  fill: var(--color-red-soft);
  color: var(--color-black);
}
div.contentnotification-component > div > div.text {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* pwstrengthmeter */
div.pwmeter-component > div.wrapper {
  font-size: 12px;
  font-weight: 300;
  color: var(--color-dark-grey);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
div.pwmeter-component > div.wrapper.border {
  border: 1px solid var(--color-grey);
  padding: 15px;
}
div.pwmeter-component > div.wrapper .title {
  font-weight: 400;
}
div.pwmeter-component > div.wrapper > div.strength-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars {
  display: flex;
  gap: 2px;
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars > div.bar {
  width: 60px;
  height: 5px;
  background-color: var(--color-statuslabel-grey);
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended > div.bar {
  width: 50px;
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.poor > div.bar.bar0 {
  background-color: var(--color-red-soft);
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.weak > div.bar.bar0,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.weak > div.bar.bar1 {
  background-color: var(--color-orange-soft);
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.weak > div.bar.bar0,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.weak > div.bar.bar1 {
  background-color: var(--color-red-soft);
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.moderate > div.bar.bar0,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.moderate > div.bar.bar1,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.moderate > div.bar.bar2 {
  background-color: var(--color-orange-soft);
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.good > div.bar.bar0,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.good > div.bar.bar1,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.good > div.bar.bar2,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.good > div.bar.bar3 {
  background-color: var(--color-apple-green-soft);
}
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.strong > div.bar.bar0,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.strong > div.bar.bar1,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.strong > div.bar.bar2,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.strong > div.bar.bar3,
div.pwmeter-component > div.wrapper > div.strength-section > div.bars.extended.strong > div.bar.bar4 {
  background-color: var(--color-apple-green-soft);
}
div.pwmeter-component > div.wrapper > div.requirements-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement {
  display: flex;
  flex-direction: column;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row {
  display: flex;
  gap: 8px;
  align-items: center;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon {
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-common > svg.svg-icon.inverted > use,
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-common > svg.svg-icon.inverted > .circle {
  fill: var(--color-statuslabel-grey);
  color: var(--color-black);
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-common.active > svg.svg-icon.inverted > use,
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-common.active > svg.svg-icon.inverted > .circle {
  fill: var(--color-apple-green-soft);
  color: var(--color-black);
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-ok.inactive,
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-fail.inactive {
  display: none;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-ok.active > svg.svg-icon.inverted > use,
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-ok.active > svg.svg-icon.inverted > .circle {
  fill: var(--color-apple-green-soft);
  color: var(--color-black);
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-fail.active > svg.svg-icon.inverted > use,
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.icon.icon-fail.active > svg.svg-icon.inverted > .circle {
  fill: var(--color-red-soft);
  color: var(--color-black);
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.descr.inactive {
  display: none;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.details {
  font-size: 12px;
  margin-left: 40px;
}
div.pwmeter-component > div.wrapper > div.requirements-section > div.requirements > div.requirement > div.row > div.details.inactive {
  color: var(--color-grey);
}

/* tooltip */
.tooltipbutton-component {
  cursor: pointer;
}
.tooltipbutton-component > .icon {
  width: 16px;
  height: 16px;
}
#overlay .tooltip-wrapper {
  position: relative;
  max-width: 280px;
  min-height: 41px;
  background-color: var(--color-white);
  padding: 15px;
  border: 1px solid var(--color-grey);
  box-sizing: border-box;
  cursor: default;
}
#overlay .tooltip-wrapper > .before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  pointer-events: none;
}
#overlay .tooltip-wrapper.up > .before {
  top: 100%;
  border-top-color: var(--color-grey);
}
#overlay .tooltip-wrapper.down > .before {
  bottom: 100%;
  border-bottom-color: var(--color-grey);
}
#overlay .tooltip-wrapper.left > .before {
  right: 100%;
  border-right-color: var(--color-grey);
}
#overlay .tooltip-wrapper.right > .before {
  left: 100%;
  border-left-color: var(--color-grey);
}
#overlay .tooltip-wrapper.up > .after {
  top: 100%;
  border-top-color: var(--color-white);
}
#overlay .tooltip-wrapper.down > .after {
  bottom: 100%;
  border-bottom-color: var(--color-white);
}
#overlay .tooltip-wrapper.left > .after {
  right: 100%;
  border-right-color: var(--color-white);
}
#overlay .tooltip-wrapper.right > .after {
  left: 100%;
  border-left-color: var(--color-white);
}
#overlay .tooltip-wrapper > .after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  pointer-events: none;
}
#overlay .tooltip-wrapper > .content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 12px;
  height: 100%;
  overflow: auto;
  font-weight: 300;
  color: var(--color-dark-grey);
}
#overlay .tooltip-wrapper > .content > .title {
  font-weight: 400;
}