@ihk-gfi/lux-components-theme 14.0.0 → 14.2.0

package/prebuilt-themes/luxtheme-blue.css

@@ -108,6 +108,7 @@ lux-side-nav .lux-side-nav-item:hover:not(.lux-side-nav-disabled) {
 /** ########## Card ########## **/
 lux-card mat-card[class~=lux-cursor]:focus-visible {
   outline: 2px dotted #000000 !important;
+  outline-offset: -2px;
 }
 lux-card mat-card[class~=lux-cursor]:hover {
   background-color: #f2f2f2 !important;
@@ -126,10 +127,6 @@ lux-list:focus-visible {
 lux-list lux-list-item:focus-visible {
   outline: none;
 }
-lux-list lux-list-item:focus-visible mat-card {
-  outline: 2px dotted #000000 !important;
-  outline-offset: -2px;
-}
 lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card {
   background-color: #e2e8ee !important;
   position: relative;
@@ -204,17 +201,36 @@ lux-form-control .lux-form-control:not(.lux-form-control-disabled).lux-focused.l
   outline: 2px dotted #000000 !important;
 }
 
+lux-icon.lux-error-icon:focus-visible {
+  outline: 2px dotted #000000 !important;
+}
+
 /** ########## Datepicker ########## **/
-lux-datepicker mat-datepicker-toggle button:focus-visible, lux-datepicker-ac mat-datepicker-toggle button:focus-visible {
+lux-datepicker mat-datepicker-toggle button:focus-visible {
   outline: 2px dotted #000000 !important;
   border-radius: 4px;
 }
-lux-datepicker mat-datepicker-toggle button:hover, lux-datepicker-ac mat-datepicker-toggle button:hover {
+lux-datepicker mat-datepicker-toggle button:hover {
   background-color: #f2f2f2 !important;
   border-radius: 4px;
   border-radius: 4px;
 }
-lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay, lux-datepicker-ac mat-datepicker-toggle .mat-button-focus-overlay {
+lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay {
+  display: none;
+}
+
+lux-datepicker-ac mat-datepicker-toggle button:focus-visible, lux-datetimepicker-ac mat-datepicker-toggle button:focus-visible {
+  outline: 2px dotted #000000 !important;
+  border-radius: 4px;
+}
+lux-datepicker-ac mat-datepicker-toggle button:hover, lux-datetimepicker-ac mat-datepicker-toggle button:hover {
+  background-color: #fff;
+  border-radius: 4px;
+}
+lux-datepicker-ac mat-datepicker-toggle button:hover lux-icon.lux-datepicker-toggle-icon.lux-color-blue, lux-datetimepicker-ac mat-datepicker-toggle button:hover lux-icon.lux-datepicker-toggle-icon.lux-color-blue {
+  color: #f2f2f2;
+}
+lux-datepicker-ac mat-datepicker-toggle .mat-button-focus-overlay, lux-datetimepicker-ac mat-datepicker-toggle .mat-button-focus-overlay {
   display: none;
 }
 
@@ -239,16 +255,16 @@ lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay, lux-datepicker-a
 }
 
 /** ########## Datetimepicker ########## **/
-lux-datetimepicker mat-datepicker-toggle button:focus-visible, lux-datetimepicker-ac mat-datepicker-toggle button:focus-visible {
+lux-datetimepicker mat-datepicker-toggle button:focus-visible {
   outline: 2px dotted #000000 !important;
   border-radius: 4px;
 }
-lux-datetimepicker mat-datepicker-toggle button:hover, lux-datetimepicker-ac mat-datepicker-toggle button:hover {
+lux-datetimepicker mat-datepicker-toggle button:hover {
   background-color: #f2f2f2 !important;
   border-radius: 4px;
   border-radius: 4px;
 }
-lux-datetimepicker mat-datepicker-toggle .mat-button-focus-overlay, lux-datetimepicker-ac mat-datepicker-toggle .mat-button-focus-overlay {
+lux-datetimepicker mat-datepicker-toggle .mat-button-focus-overlay {
   display: none;
 }
 
@@ -332,26 +348,70 @@ lux-table th.cdk-keyboard-focused div.mat-sort-header-container {
   border-radius: 4px;
 }
 
-.lux-select-panel-ac mat-option.mat-selected.mat-option:not(.mat-option-disabled) {
-  background: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
-  background-color: #fff;
-  border: 1px solid #335c85;
-  box-shadow: 0 0 0 2px var(--lux-theme-primary-500) inset;
+/** ########## Select-AC ########## **/
+.lux-select-panel-ac mat-option.mat-selected.mat-option:not(.mat-option-disabled) .mat-option-text {
   position: relative;
-  border-radius: 4px;
 }
-.lux-select-panel-ac mat-option.mat-selected.mat-option:not(.mat-option-disabled):after {
-  width: 0px;
-  border: none;
+.lux-select-panel-ac mat-option.mat-selected.mat-option:not(.mat-option-disabled) .mat-option-text::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 14px;
+  margin: 0 6px;
+  background-color: #335c85;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: cover;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
 }
-.lux-select-panel-ac mat-option.mat-active:not(.cdk-mouse-focused) {
+
+.lux-select-panel-ac.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active) {
+  color: #335c85;
+  background-color: #ffffff;
+  font-weight: 600;
+}
+.lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) {
   outline: 2px dotted #000000 !important;
   outline-offset: -2px;
-  border-radius: 4px;
+  background-color: #708daa;
+  color: #ffffff;
 }
-.lux-select-panel-ac mat-option:hover:not(.invalid, .mat-option-disabled) {
-  background-color: #f2f2f2 !important;
-  border-radius: 4px;
+.lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox {
+  color: #ffffff;
+}
+.lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked {
+  background-color: #ffffff;
+}
+.lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after {
+  border-color: #335c85 !important;
+}
+.lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after {
+  background-color: #fff;
+}
+.lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) {
+  background-color: #708daa;
+  color: #ffffff;
+  border-radius: 0px !important;
+}
+.lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox {
+  color: #ffffff;
+}
+.lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked {
+  background-color: #ffffff;
+}
+.lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after {
+  border-color: #335c85 !important;
+}
+.lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox {
+  color: #ffffff;
+}
+.lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after {
+  background-color: #fff;
 }
 
 /** ########## Button ########## **/
@@ -418,7 +478,7 @@ lux-tabs .mat-tab-label:not(.mat-tab-disabled):focus-visible {
   border-radius: 4px;
 }
 lux-tabs .mat-tab-label:not(.mat-tab-disabled):hover:not(.mat-tab-disabled) {
-  background-color: #f2f2f2 !important;
+  background-color: #f2f2f2;
   border-radius: 4px;
 }
 lux-tabs mat-ink-bar.mat-ink-bar {
@@ -436,7 +496,7 @@ mat-card lux-tabs .mat-tab-label:not(.mat-tab-disabled):focus-visible {
   border-radius: 4px;
 }
 mat-card lux-tabs .mat-tab-label:not(.mat-tab-disabled):hover:not(.mat-tab-disabled) {
-  background-color: #f2f2f2 !important;
+  background-color: #f2f2f2;
   border-radius: 4px;
 }
 mat-card lux-tabs mat-ink-bar.mat-ink-bar {
@@ -647,24 +707,30 @@ lux-app-header-ac {
 }
 lux-app-header-ac .lux-image {
   cursor: pointer;
-  padding: 4px;
+  padding: 0px;
 }
 lux-app-header-ac .lux-image:focus-visible {
   outline: 2px dotted #000000 !important;
   border-radius: 4px;
 }
-lux-app-header-ac .lux-image:hover {
-  background-color: #f2f2f2 !important;
-  border-radius: 4px;
-}
 lux-app-header-ac lux-button button.lux-button.lux-button-rounded {
   min-width: 36px;
   width: 36px;
   padding-left: 0px !important;
   padding-right: 0px !important;
   background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
 }
+lux-app-header-ac lux-button button.lux-button.lux-button-rounded.mat-fab .mat-button-wrapper {
+  line-height: 20px;
+  max-height: 20px;
+}
+lux-app-header-ac lux-button button.lux-button.lux-button-rounded.mat-fab .mat-button-wrapper .lux-no-size {
+  display: block;
+}
 lux-app-header-ac lux-button button.lux-button.lux-button-rounded lux-icon {
   color: #335c85;
 }
@@ -696,8 +762,8 @@ lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-button.lux-butt
   color: #274a72 !important;
 }
 lux-app-header-ac .lux-app-header-top-bar {
-  padding: 4px 24px;
-  min-height: 52px;
+  padding: 10px 24px;
+  min-height: 64px;
   font-size: 1rem;
   color: rgba(0, 0, 0, 0.87);
   background-color: #fff;
@@ -710,6 +776,11 @@ lux-app-header-ac .lux-app-header-top-bar lux-menu {
 }
 lux-app-header-ac .lux-app-header-top-bar lux-menu .lux-menu-extended {
   overflow: unset;
+  padding: 0px;
+}
+lux-app-header-ac .lux-app-header-top-bar lux-menu button.mat-button.lux-button {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 lux-app-header-ac .lux-app-header-nav-bar {
   background-color: #e7ebf0;
@@ -723,9 +794,8 @@ lux-app-header-ac .lux-app-header-nav-bar.lux-mobile {
 }
 lux-app-header-ac .lux-app-header-nav-bar .lux-app-title {
   color: rgba(0, 0, 0, 0.87);
-  padding: 4px;
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 400;
   font-family: Roboto, Roboto, Helvetica Neue, sans-serif;
 }
 lux-app-header-ac .lux-app-header-nav-bar .lux-app-title.lux-mobile {
@@ -743,6 +813,54 @@ lux-app-header-ac .lux-app-header-nav-bar .lux-header-ac-nav-menu .lux-menu-exte
   padding: 0;
 }
 
+.cdk-overlay-pane button.lux-menu-item {
+  margin: 0px;
+}
+.cdk-overlay-pane button.lux-menu-item.lux-selected-item-ac {
+  font-weight: 600;
+}
+.cdk-overlay-pane button.lux-menu-item.lux-selected-item-ac .lux-button-label::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  right: 0;
+  top: 14px;
+  margin: 0 10px 0 4px;
+  background-color: #335c85;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: cover;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
+}
+.cdk-overlay-pane button.lux-menu-item:not([disabled=true]):hover {
+  background-color: #708daa !important;
+  color: #ffffff;
+}
+.cdk-overlay-pane button.lux-menu-item:not([disabled=true]):hover .mat-icon-no-color {
+  color: #ffffff;
+}
+.cdk-overlay-pane button.lux-menu-item:not([disabled=true]):hover::after {
+  background-color: #ffffff;
+}
+.cdk-overlay-pane button.lux-menu-item:not([disabled=true]):focus-visible {
+  background-color: #708daa;
+  color: #ffffff;
+  outline: 2px dotted #000000 !important;
+  outline-offset: -2px;
+}
+.cdk-overlay-pane button.lux-menu-item:not([disabled=true]):focus-visible .mat-icon-no-color {
+  color: #ffffff;
+}
+.cdk-overlay-pane button.lux-menu-item:not([disabled=true]):focus-visible::after {
+  width: 16px;
+  background-color: #ffffff;
+}
+
 lux-link-plain .link-wrapper {
   display: inline-block;
   font-family: inherit;
@@ -770,11 +888,13 @@ lux-link-plain .link-wrapper.lux-disabled lux-icon i, lux-link-plain .link-wrapp
   color: rgba(0, 0, 0, 0.4);
 }
 lux-link-plain .link-wrapper:hover:not(.lux-disabled) {
-  background-color: #f2f2f2 !important;
-  border-radius: 4px;
+  color: #f2f2f2;
   text-decoration: underline;
   cursor: pointer;
 }
+lux-link-plain .link-wrapper:hover:not(.lux-disabled) lux-icon i, lux-link-plain .link-wrapper:hover:not(.lux-disabled) lux-icon mat-icon {
+  color: #f2f2f2;
+}
 lux-link-plain .link-wrapper:focus:not(.lux-disabled, :hover) {
   outline: 2px dotted #000000 !important;
   border-radius: 2px;
@@ -831,8 +951,7 @@ lux-tile-ac .mat-card.lux-tile-ac[class~=lux-cursor]:focus-visible {
   outline: 2px dotted #000000 !important;
 }
 lux-tile-ac .mat-card.lux-tile-ac[class~=lux-cursor]:hover {
-  background-color: #f2f2f2;
-  background-image: unset;
+  border-color: #335c85;
 }
 
 :root {
@@ -1152,11 +1271,6 @@ h6 {
   flex: 1 1 100%;
 }
 
-.lux-tile-ac-wrapper-demo .lux-tile-ac {
-  width: 260px;
-  min-height: 120px;
-}
-
 body {
   -webkit-overflow-scrolling: touch;
 }
@@ -4023,6 +4137,7 @@ lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-a
   border-radius: 4px;
 }
 lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row {
+  background-color: transparent;
   border: none;
   padding: 0.75em 0em;
 }
@@ -4115,28 +4230,66 @@ lux-form-control-wrapper select:-webkit-autofill:focus {
 /*
  * Theming for LUX-Select
  */
-lux-select-ac mat-select {
+lux-select-ac mat-select, lux-lookup-combobox-ac mat-select {
   font-family: Roboto, Helvetica Neue, sans-serif;
   height: calc(1.5em - 1px) !important;
 }
-lux-select-ac mat-select .mat-select-arrow-wrapper {
+lux-select-ac mat-select .mat-select-arrow-wrapper, lux-lookup-combobox-ac mat-select .mat-select-arrow-wrapper {
   margin-left: 2px;
+  height: 24px;
+  width: 24px;
 }
-lux-select-ac mat-select[aria-disabled=true] .mat-select-arrow {
-  border-width: 10px;
-  margin: 0 2px 0 0;
-  color: rgba(0, 0, 0, 0.4);
+lux-select-ac mat-select .mat-select-arrow-wrapper .mat-select-arrow, lux-lookup-combobox-ac mat-select .mat-select-arrow-wrapper .mat-select-arrow {
+  border: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: #335c85;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,3.85 L6.65,10 C6.74073333,10.0966772 6.86741409,10.1515186 7,10.1515186 C7.13258591,10.1515186 7.25926667,10.0966772 7.35,10 L13.5,3.85'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: cover;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,3.85 L6.65,10 C6.74073333,10.0966772 6.86741409,10.1515186 7,10.1515186 C7.13258591,10.1515186 7.25926667,10.0966772 7.35,10 L13.5,3.85'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
+}
+lux-select-ac mat-select[aria-disabled=true] .mat-select-arrow, lux-lookup-combobox-ac mat-select[aria-disabled=true] .mat-select-arrow {
+  background-color: rgba(0, 0, 0, 0.4);
 }
-lux-select-ac mat-select[aria-disabled=false] .mat-select-arrow {
-  border-width: 10px;
-  margin: 0 2px 0 0;
-  color: #335c85;
+lux-select-ac mat-select[aria-disabled=false] .mat-select-arrow, lux-lookup-combobox-ac mat-select[aria-disabled=false] .mat-select-arrow {
+  background-color: #335c85;
 }
 
-.lux-select-panel-ac .mat-pseudo-checkbox-checked {
+.lux-select-panel-ac .mat-pseudo-checkbox-checked,
+.lux-select-panel-ac-multiple .mat-pseudo-checkbox-checked {
   background-color: #335c85;
 }
 
+.cdk-overlay-pane .mat-option {
+  font-family: Roboto, Helvetica Neue, sans-serif;
+}
+.cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-ac,
+.cdk-overlay-pane .mat-select-panel.lux-select-panel-ac,
+.cdk-overlay-pane .mat-select-panel.lux-select-panel-ac-multiple {
+  border: 2px solid #335c85;
+  border-radius: 4px;
+  box-shadow: none !important;
+}
+.cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-ac .mat-pseudo-checkbox,
+.cdk-overlay-pane .mat-select-panel.lux-select-panel-ac .mat-pseudo-checkbox,
+.cdk-overlay-pane .mat-select-panel.lux-select-panel-ac-multiple .mat-pseudo-checkbox {
+  color: #335c85;
+}
+.cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-ac {
+  min-width: calc(100% + 14px) !important;
+  max-width: calc(100% + 14px) !important;
+  margin: 13px -9px;
+  border: 2px solid #335c85;
+  border-radius: 4px;
+  box-shadow: none !important;
+}
+
 /*
 * Theming für Lux-Checkbox
 */
@@ -4151,9 +4304,6 @@ lux-checkbox-ac label .mat-checkbox-label {
   word-break: break-word;
   white-space: normal;
 }
-lux-checkbox-ac .mat-checkbox-disabled label {
-  color: rgba(0, 0, 0, 0.4);
-}
 lux-checkbox-ac .mat-checkbox-ripple {
   display: none;
 }
@@ -4162,6 +4312,15 @@ lux-checkbox-ac .mat-checkbox-inner-container {
   height: 1.25em;
   margin-top: 3px;
 }
+lux-checkbox-ac .mat-checkbox-inner-container .mat-checkbox-frame {
+  border-color: #335c85;
+}
+lux-checkbox-ac .mat-checkbox-disabled label {
+  color: rgba(0, 0, 0, 0.4);
+}
+lux-checkbox-ac .mat-checkbox-disabled .mat-checkbox-inner-container .mat-checkbox-frame {
+  border-color: rgba(0, 0, 0, 0.4);
+}
 
 lux-datepicker-ac mat-datepicker-toggle, lux-datetimepicker-ac mat-datepicker-toggle {
   height: 24px !important;
@@ -4182,6 +4341,18 @@ lux-datepicker-ac mat-datepicker-toggle .mat-icon-button.mat-button-disabled svg
   color: rgba(0, 0, 0, 0.4);
 }
 
+.cdk-overlay-pane .mat-datepicker-content,
+.lux-datetimepicker-overlay .mat-card.lux-card {
+  border: 2px solid #335c85;
+  box-shadow: none !important;
+  margin: 13px -9px;
+}
+.cdk-overlay-pane .mat-datepicker-content .mat-calendar-header button:hover,
+.lux-datetimepicker-overlay .mat-card.lux-card .mat-calendar-header button:hover {
+  background-color: #fff !important;
+  color: #708daa;
+}
+
 /*
 * Theming für lux-Toggle
 */
@@ -4284,11 +4455,13 @@ lux-chips-ac .lux-chips mat-chip-list div.mat-chip-list-wrapper {
   margin: 0px 0px 0px -4px;
 }
 
-.lux-chips-ac-autocomplete-panel {
-  margin-top: -20px;
+.lux-chips-ac-autocomplete-panel.mat-autocomplete-panel {
+  margin-top: -21px;
   margin-left: 0;
   margin-right: 0;
   border-radius: 4px;
+  box-shadow: none !important;
+  border: 2px solid #335c85;
 }
 
 /*
@@ -4310,9 +4483,9 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
   border-left-style: none;
   border-radius: 0 4px 4px 0;
   padding: 0;
-  width: 35px;
-  min-width: 35px;
-  max-width: 35px;
+  width: 25px;
+  min-width: 25px;
+  max-width: 25px;
   background-color: #fff;
 }
 .lux-master-detail-ac .lux-master-ac-container.lux-master-ac-container-mobile {
@@ -4326,25 +4499,37 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
 .lux-master-detail-ac .lux-master-header-container-ac lux-button.master-ac-toggle {
   position: absolute;
   right: -18px;
-  top: 20px;
+  top: 17px;
   z-index: 1000;
 }
 .lux-master-detail-ac .lux-master-header-container-ac lux-button.master-ac-toggle button.lux-button.lux-button-rounded {
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
   border: 1px solid rgba(0, 0, 0, 0.12);
   color: #335c85;
-}
-.lux-master-detail-ac .lux-master-header-container-ac lux-button.master-ac-toggle button.lux-button.lux-button-rounded:hover:not([disabled]) {
-  background-color: #f2f2f2 !important;
-  color: #fff;
-  border-radius: 50%;
+  background-color: #fff !important;
 }
 .lux-master-detail-ac .lux-master-header-container-ac lux-button.master-ac-toggle .lux-button-icon-round.lux-lx-icon.lux-no-size {
   padding-bottom: 2px;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+.lux-master-detail-ac .lux-master-header-container-ac button.lux-button.lux-button-rounded:hover:not([disabled]) {
+  color: #f2f2f2;
+  border-radius: 50%;
+}
+.lux-master-detail-ac .lux-master-header-container-ac button.lux-button.lux-button-rounded:active:not([disabled]) {
+  color: #274a72;
+  background-color: #fff !important;
 }
 .lux-master-detail-ac .lux-master-header-container-ac .lux-menu-extended {
   padding: 0px;
 }
+.lux-master-detail-ac .lux-master-header-container-ac mat-card-title, .lux-master-detail-ac .lux-master-header-container-ac h2 {
+  font-size: 16px;
+}
+.lux-master-detail-ac .lux-master-header-container-ac mat-card-subtitle.mat-card-subtitle {
+  font-size: 14px;
+}
 .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card.mat-card,
 .lux-master-detail-ac .detail-header-container .lux-detail-header-ac mat-card.mat-card,
 .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card {
@@ -5006,7 +5191,7 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
 .lux-form-control-error .lux-form-control-container:after {
   border-bottom: 1px solid #b01211;
 }
-.lux-form-control-error .lux-form-control-misc > * {
+.lux-form-control-error .lux-form-control-misc div > * {
   color: #b01211 !important;
 }
 
@@ -5017,6 +5202,24 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
   border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
 }
 
+lux-icon.lux-error-icon {
+  font-size: 12px;
+  max-height: 12px;
+  max-width: 12px;
+  padding: 0 4px 0 4px;
+}
+lux-icon.lux-error-icon mat-icon {
+  padding: 0 !important;
+  min-width: 12px;
+  max-width: 12px;
+  min-height: 12px;
+  max-height: 12px;
+  color: #b01211;
+}
+lux-icon.lux-error-icon mat-icon:hover {
+  cursor: pointer;
+}
+
 /*
  * Theming for LUX-Layout-Card-Row
  */
@@ -5417,6 +5620,7 @@ lux-filter-form lux-menu.filter-menu .lux-filter-menu-trigger button.lux-button-
   background-color: transparent;
   color: #335c85;
   padding: 0px !important;
+  margin: 0px 4px !important;
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
 }
 
@@ -5616,7 +5820,7 @@ lux-stepper-large {
   flex-direction: column;
   flex: 0 1 30%;
   gap: 12px;
-  padding: 12px;
+  padding: 12px 33px 12px 12px;
   overflow-y: auto;
   min-width: 400px;
 }
@@ -5645,6 +5849,24 @@ lux-stepper-large {
 }
 .lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a {
   color: #2E8533;
+  position: relative;
+}
+.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a::after {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  width: 23px;
+  height: 23px;
+  margin: 5px 10px 0px;
+  background-color: #2E8533;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: cover;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
 }
 .lux-stepper-large-nav-item.lux-touched:not(.lux-disabled):not(.lux-completed):not(.lux-active) .lux-stepper-large-nav-item-number-container {
   color: #ffffff;
@@ -5826,6 +6048,11 @@ lux-stepper-large {
   color: #2E8533;
   font-size: 18px;
 }
+.lux-stepper-large-mobile-nav-item.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a::after {
+  width: 18px;
+  height: 18px;
+  margin-top: 4px;
+}
 
 .mat-badge-content {
   font-weight: 600;