@messaia/cdk 18.2.3 → 19.0.0-rc02

package/lib/common/styles/utilities/_general.scss

@@ -1,6 +1,10 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
 @mixin vd-general-utilities() {
+    $primary-color: var(--mat-sys-primary);
+    $secondary-color: var(--mat-sys-secondary);
 
-    // Angular 4 added tabindex to everything, this style removes the outline:
     [tabindex]:focus {
         outline: none;
     }
@@ -121,10 +125,6 @@
         font-size: 0.9em;
     }
 
-    .bg-grey {
-        background-color: #e0e0e0 !important;
-    }
-
     .txt-bold {
         font-weight: 500 !important;
     }
@@ -138,14 +138,6 @@
         font-style: italic;
     }
 
-    .font-18 {
-        font-size: 18px !important;
-    }
-
-    .font-20 {
-        font-size: 20px !important;
-    }
-
     .nowrap {
         white-space: nowrap;
         overflow: hidden;
@@ -173,7 +165,6 @@
         }
     }
 
-
     .tree-dashes {
         color: #b5b5b5;
         letter-spacing: 4px;
@@ -193,692 +184,731 @@
             display: table-cell;
         }
     }
-}
-
-/* #region Layout & Commons */
 
-.main-container {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    /* #region MatFormField  */
 
-    .main-toolbar {
-        z-index: 2;
+    mat-form-field {
+        @include mat.form-field-density(-2);
 
-        .mat-mdc-icon-button {
-            margin-left: 0;
+        &[dense-1] {
+            @include mat.form-field-density(-3);
+            @include mat.icon-button-density(-3);
         }
-    }
 
-    .main-sidenav.mat-drawer-side,
-    .mat-drawer-container {
-        background-color: #e8e8e8;
-        border-right: none;
-    }
+        &[dense-2] {
+            @include mat.form-field-density(-4);
+            @include mat.icon-button-density(-4);
+        }
 
-    .main-sidenav {
-        max-width: 290px;
-        min-width: 290px;
-        display: flex;
-        background-color: red;
+        &[dense-3] {
+            @include mat.form-field-density(-5);
+            @include mat.icon-button-density(-5);
+        }
 
-        .mat-drawer-inner-container {
+        .mat-mdc-form-field-infix {
+            width: auto;
             display: flex;
-            flex-direction: column;
         }
 
-        mat-nav-list {
-            padding-top: 16px;
-
-            a {
-                font-size: 14px;
+        .mat-mdc-text-field-wrapper {
+            .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+                top: 23px !important;
             }
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-        .mat-mdc-list-item {
-            mat-icon {
-                margin-left: 4px;
-                margin-right: 18px;
-                color: #737373;
-                fill: #737373;
-            }
+        .mat-mdc-select-arrow-wrapper {
+            height: 20px;
         }
 
-        .main-footer {
-            font-size: 13px;
-            margin: 12px 15px 12px 24px;
-            color: #909090;
+        vd-select {
+            width: 100%;
         }
-    }
 
-    .app-name {
-        margin-left: 8px;
-    }
+        &.form-field-type-calendar {
+            .mat-mdc-text-field-wrapper {
+                padding: 0;
+            }
 
-    .sidenav-container {
-        flex: 1;
+            .mat-mdc-form-field-infix {
+                padding-top: 0px !important;
+                padding-bottom: 0px !important;
+            }
+        }
     }
 
-    .content-center {
-        margin: 0 auto;
-    }
+    /* #endregion */
+
+    /* #region Layout & Commons */
+
+    .main-container {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
 
-    &.mobile {
         .main-toolbar {
-            position: fixed;
             z-index: 2;
-        }
 
-        .sidenav-container {
-            flex: 1 0 auto;
+            .mat-mdc-icon-button {
+                margin-left: 0;
+            }
         }
-    }
-}
-
-.panel-wrap {
-    padding: 8px;
-    background: #e0e0e0;
 
-    .mat-expansion-panel-spacing {
-        margin: 8px 0;
-    }
-}
+        .main-sidenav.mat-drawer-side,
+        .mat-drawer-container {
+            background-color: #e8e8e8;
+            border-right: none;
+        }
 
-.full-screen {
-    width: 100vw !important;
-    height: 100vh !important;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    max-width: 100vw !important;
-    max-height: 100vh !important;
-}
+        .main-sidenav {
+            max-width: 290px;
+            min-width: 290px;
+            display: flex;
+            background-color: red;
 
-.scrollbar-secondary {
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 12px;
-    }
+            .mat-drawer-inner-container {
+                display: flex;
+                flex-direction: column;
+            }
 
-    &::-webkit-scrollbar-track {
-        background-color: inherit;
-    }
+            mat-nav-list {
+                padding-top: 16px;
 
-    &::-webkit-scrollbar-thumb {
-        border-radius: 100px;
-    }
+                a {
+                    font-size: 14px;
+                }
+            }
 
-    &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-    }
+            .mat-mdc-list-item {
+                mat-icon {
+                    margin-left: 4px;
+                    margin-right: 18px;
+                    color: #737373;
+                    fill: #737373;
+                }
+            }
 
-    &:hover {
-        &::-webkit-scrollbar-thumb {
-            background: var(--mat-slider-ripple-color);
+            .main-footer {
+                font-size: 13px;
+                margin: 12px 15px 12px 24px;
+                color: #909090;
+            }
         }
-    }
-}
 
-vd-layout-footer-inner {
-    .mat-mdc-paginator {
-        background-color: transparent;
-        min-height: 48px;
+        .app-name {
+            margin-left: 8px;
+        }
 
-        .mat-mdc-paginator-page-size {
-            @media (max-width: 599px) {
-                display: none;
-            }
+        .sidenav-container {
+            flex: 1;
         }
-    }
 
-    &.pagination {
-        &.vd-layout-footer {
-            padding: 0;
+        .content-center {
+            margin: 0 auto;
         }
 
-        .mat-fab-bottom-left {
-            bottom: 28px;
-            z-index: 1000;
+        &.mobile {
+            .main-toolbar {
+                position: fixed;
+                z-index: 2;
+            }
 
-            &.mat-mdc-mini-fab {
-                bottom: 36px;
-                left: 22px;
+            .sidenav-container {
+                flex: 1 0 auto;
             }
         }
     }
-}
-
-/* #endregion */
 
-/* #region MatFormField  */
+    .panel-wrap {
+        padding: 8px;
+        border-radius: var(--mat-expansion-container-shape, 12px);
 
-mat-form-field {
-    @include mat.form-field-density(-2);
-
-    &[dense-1] {
-        @include mat.form-field-density(-3);
-        @include mat.icon-button-density(-3);
+        .mat-expansion-panel-spacing {
+            margin: 8px 0;
+        }
     }
 
-    &[dense-2] {
-        @include mat.form-field-density(-4);
-        @include mat.icon-button-density(-4);
+    .full-screen {
+        width: 100vw !important;
+        height: 100vh !important;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        max-width: 100vw !important;
+        max-height: 100vh !important;
     }
 
-    &[dense-3] {
-        @include mat.form-field-density(-5);
-        @include mat.icon-button-density(-5);
-    }
+    .scrollbar-primary,
+    .scrollbar-secondary {
+        &::-webkit-scrollbar {
+            width: 0px;
+            height: 12px;
+        }
 
-    min-width: auto !important;
+        @media (min-width: 960px) {
+            &::-webkit-scrollbar {
+                width: 8px;
+            }
+        }
 
-    .mat-mdc-form-field-infix {
-        width: auto;
-        display: flex;
-    }
+        &::-webkit-scrollbar-track {
+            background-color: inherit;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 100px;
+        }
 
-    .mat-mdc-text-field-wrapper {
-        .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
-            top: 23px !important;
+        &::-webkit-scrollbar-thumb {
+            background-color: transparent;
         }
     }
 
-    .mat-mdc-select-arrow-wrapper {
-        height: 20px;
+    .scrollbar-primary {
+        &:hover {
+            &::-webkit-scrollbar-thumb {
+                background-color: $primary-color;
+            }
+        }
     }
 
-    vd-select {
-        width: 100%;
+    .scrollbar-secondary {
+        &:hover {
+            &::-webkit-scrollbar-thumb {
+                background-color: $secondary-color;
+            }
+        }
     }
 
-    &.form-field-type-calendar {
-        .mat-mdc-text-field-wrapper {
-            padding: 0;
+    vd-layout {
+        vd-layout-footer-inner {
+            .mat-mdc-paginator {
+                background-color: transparent;
+                min-height: 48px;
+
+                .mat-mdc-paginator-page-size {
+                    @media (max-width: 599px) {
+                        display: none;
+                    }
+                }
+            }
+
+            &.pagination {
+                &.vd-layout-footer {
+                    padding: 0;
+                }
+
+                .mat-fab-bottom-left {
+                    z-index: 1000;
+
+                    &.mat-mdc-mini-fab {
+                        left: 22px;
+                    }
+                }
+            }
         }
 
-        .mat-mdc-form-field-infix {
-            padding-top: 0px !important;
-            padding-bottom: 0px !important;
+        &:not(.m3) {
+            vd-layout-footer-inner {
+                &.pagination {
+                    .mat-fab-bottom-left {
+                        bottom: 28px;
+
+                        &.mat-mdc-mini-fab {
+                            bottom: 36px;
+                        }
+                    }
+                }
+            }
         }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region  MatToolbar */
+    /* #region  MatToolbar */
 
-mat-toolbar {
-    &[dense] {
-        height: 52px;
-    }
+    mat-toolbar {
+        &[dense] {
+            height: 52px;
+        }
 
-    [mat-icon-button] {
-        &.vd-layout-menu-button {
-            margin-right: 0px;
+        [mat-icon-button] {
+            &.vd-layout-menu-button {
+                margin-right: 0px;
+            }
         }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region  MatExpansionPanel */
+    /* #region  MatExpansionPanel */
 
-mat-expansion-panel {
-    .mat-expansion-panel-header {
-        padding: 0 16px;
+    mat-expansion-panel {
+        .mat-expansion-panel-header {
+            padding: 0 16px;
 
-        &[aria-disabled=true]:not(.disabled) {
-            color: rgba(0, 0, 0, 0.87);
-        }
+            &[aria-disabled=true]:not(.disabled) {
+                color: rgba(0, 0, 0, 0.87);
+            }
 
-        .mat-expansion-panel-header-title {
-            align-items: center;
+            .mat-expansion-panel-header-title {
+                align-items: center;
+            }
         }
-    }
 
-    @media (max-width: 599px) {
-        .mat-expansion-panel-body {
-            padding: 0 8px 8px;
+        @media (max-width: 599px) {
+            .mat-expansion-panel-body {
+                padding: 0 8px 8px;
+            }
         }
-    }
 
-    .mat-expansion-panel-body {
-        padding: 0 8px 16px;
-    }
+        &:not(.raw) {
+            .mat-expansion-panel-body {
+                padding: 0 8px 16px;
+            }
+        }
 
-    .mat-action-row {
-        padding: 8px 8px 8px 8px;
+        .mat-action-row {
+            padding: 8px 8px 8px 8px;
 
-        &.pagination {
-            padding: 0;
+            &.pagination {
+                padding: 0;
+            }
         }
-    }
 
-    &.wrap {
-        >.mat-expansion-panel-content {
-            >.mat-expansion-panel-body {
-                background: #e0e0e0;
-                padding: 10px;
+        &.wrap {
+            >.mat-expansion-panel-content {
+                >.mat-expansion-panel-body {
+                    background: #e0e0e0;
+                    padding: 10px;
 
-                .panel-content {
-                    background: white;
-                }
+                    .panel-content {
+                        background: white;
+                    }
 
-                .mat-mdc-card {
-                    margin-left: 0;
-                    margin-right: 0;
+                    .mat-mdc-card {
+                        margin-left: 0;
+                        margin-right: 0;
 
-                    .mat-mdc-card-title {
-                        font-size: 20px;
+                        .mat-mdc-card-title {
+                            font-size: 20px;
+                        }
                     }
                 }
             }
         }
-    }
 
-    &.flat,
-    &.no-margin {
-        >.mat-expansion-panel-content {
-            >.mat-expansion-panel-body {
-                padding: 0;
+        &.flat,
+        &.no-margin {
+            >.mat-expansion-panel-content-wrapper {
+                >.mat-expansion-panel-content {
+                    >.mat-expansion-panel-body {
+                        padding: 0;
+                    }
+                }
             }
         }
-    }
-}
-
-/* #endregion */
 
-/* #region  MatStep */
+        .mat-expansion-panel-header {
 
-.mat-step {
-    font-size: 0.9rem;
+            &.sub-panel-header,
+            &.sub-panel-header:hover {
+                background-color: var(--mat-sys-primary) !important;
+                border-radius: 0 !important;
 
-    .wrap {
-
-        /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-        mat-card-content {
-            padding: 8px;
-            background: #e0e0e0;
+                *,
+                .mat-expansion-indicator::after {
+                    color: white !important;
+                }
+            }
         }
     }
 
-    .mat-step-label {
-        display: flex;
-        width: 100%;
+    /* #endregion */
+
+    /* #region  MatStep */
+
+    .mat-step {
+        font-size: 0.9rem;
 
-        .mat-step-text-label {
+        .wrap {
+            mat-card-content {
+                padding: 8px;
+                background: #e0e0e0;
+            }
+        }
+
+        .mat-step-label {
             display: flex;
-            align-items: center;
             width: 100%;
-        }
-    }
 
-    .sub-card {
-        .mat-mdc-card {
-            .mat-mdc-card-title {
-                font-size: 20px;
+            .mat-step-text-label {
+                display: flex;
+                align-items: center;
+                width: 100%;
             }
         }
-    }
 
-    @media (max-width: 599px) {
-        .mat-vertical-stepper-header {
-            padding: 24px 8px;
+        .sub-card {
+            .mat-mdc-card {
+                .mat-mdc-card-title {
+                    font-size: 20px;
+                }
+            }
         }
 
-        .mat-vertical-content-container {
-            margin-left: 20px;
-        }
+        @media (max-width: 599px) {
+            .mat-vertical-stepper-header {
+                padding: 24px 8px;
+            }
 
-        .mat-vertical-content {
-            padding: 0 8px 8px 8px;
+            .mat-vertical-content-container {
+                margin-left: 20px;
+            }
+
+            .mat-vertical-content {
+                padding: 0 8px 8px 8px;
+            }
         }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region  MatCard */
+    /* #region  MatCard */
 
-mat-card {
-
-    .mat-mdc-card-actions,
-    .mat-mdc-card-content,
-    .mat-mdc-card-subtitle,
-    .mat-mdc-card-title {
-        display: block;
-        margin-bottom: 16px;
-    }
+    mat-card {
 
-    .mat-mdc-card-title {
-        font-size: 24px;
-        font-weight: 400;
+        .mat-mdc-card-actions,
+        .mat-mdc-card-content,
+        .mat-mdc-card-subtitle,
+        .mat-mdc-card-title {
+            display: block;
+            margin-bottom: 16px;
+        }
     }
-}
-
-/* #endregion */
 
-/* #region  MatDialog */
+    /* #endregion */
 
-.dialog-full-screen {
-    @media (max-width: 599px) {
-        max-width: 100% !important;
-        height: 100%;
+    /* #region  MatDialog */
 
-        .mat-mdc-dialog-container {
-            max-width: 100vw;
-            max-height: 100vh;
+    .dialog-full-screen {
+        @media (max-width: 599px) {
+            max-width: 100% !important;
             height: 100%;
-            width: 100%;
 
-            .mat-mdc-dialog-content {
-                max-height: 100% !important;
+            .mat-mdc-dialog-container {
+                max-width: 100vw;
+                max-height: 100vh;
+                height: 100%;
+                width: 100%;
+
+                .mat-mdc-dialog-content {
+                    max-height: 100% !important;
+                }
             }
         }
     }
-}
 
-.dialog-resizable {
-    resize: both;
-    overflow: auto;
-}
+    .dialog-resizable {
+        resize: both;
+        overflow: auto;
+    }
 
-.mat-mdc-dialog-surface {
-    overflow: hidden !important;
-}
+    .mat-mdc-dialog-surface {
+        overflow: hidden !important;
+    }
 
-.mat-mdc-dialog-container {
-    vd-dynamic-table {
-        max-height: calc(100% - 127px - 37px - 4px);
+    .mat-mdc-dialog-container {
+        vd-dynamic-table {
+            max-height: calc(100% - 127px - 37px - 4px);
 
-        .mat-table-container {
-            height: 100%;
-        }
+            .mat-table-container {
+                height: 100%;
+            }
 
-        .table-footer {
-            background-color: var(--mat-tree-container-background-color);
+            .table-footer {
+                background-color: var(--mat-tree-container-background-color);
+            }
         }
     }
-}
-
-/* #endregion */
 
-/* #region  MatSidenav */
+    /* #endregion */
 
-mat-sidenav {
-    .mat-toolbar {
-        padding-right: 0;
-        font-size: 1.1em;
-    }
+    /* #region  MatSidenav */
 
-    .mat-drawer-inner-container {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+    mat-sidenav {
+        .mat-toolbar {
+            padding-right: 0;
+            font-size: 1.1em;
+        }
 
-        vd-navigation-drawer {
-            width: 100%;
-            height: 100%;
+        .mat-drawer-inner-container {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
 
-            .vd-navigation-drawer-content {
+            vd-navigation-drawer {
                 width: 100%;
-                height: calc(100% - 58px);
-                overflow: overlay;
+                height: 100%;
 
-                &::-webkit-scrollbar {
-                    width: 4px;
-                }
+                .vd-navigation-drawer-content {
+                    width: 100%;
+                    height: calc(100% - 58px);
+                    overflow: overlay;
 
-                &::-webkit-scrollbar-track {
-                    background-color: inherit;
-                }
+                    @media (min-width: 960px) {
+                        &::-webkit-scrollbar {
+                            width: 4px;
+                        }
+                    }
+
+                    &::-webkit-scrollbar-track {
+                        background-color: inherit;
+                    }
 
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 100px;
+                    &::-webkit-scrollbar-thumb {
+                        border-radius: 100px;
+                    }
                 }
             }
         }
-    }
 
-    mat-nav-list {
-        .mat-mdc-list-item {
-            .mat-mdc-list-item-icon {
-                margin-right: 18px;
-                color: #737373;
-                fill: #737373;
+        mat-nav-list {
+            .mat-mdc-list-item {
+                .mat-mdc-list-item-icon {
+                    margin-right: 18px;
+                }
             }
         }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region  MatSidenavContent */
+    /* #region  MatSidenavContent */
 
-mat-sidenav-content {
-    .mat-toolbar {
-        font-size: 1.1em;
+    mat-sidenav-content {
+        .mat-toolbar {
+            font-weight: 400;
+        }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region  MatDialog */
+    /* #region  MatDialog */
 
-.mat-mdc-dialog-container {
-    .mat-form-field-appearance-outline {
+    .mat-mdc-dialog-container {
+        .mat-form-field-appearance-outline {
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-        .mat-form-field-infix {
-            padding: 0.77em 0 0.77em 0;
+            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+            .mat-form-field-infix {
+                padding: 0.77em 0 0.77em 0;
+            }
         }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region MatPaginator */
+    /* #region MatPaginator */
 
-mat-paginator {
-    mat-form-field {
-        @include mat.form-field-density(-5);
+    mat-paginator {
+        mat-form-field {
+            @include mat.form-field-density(-5);
+        }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region MatTable */
+    /* #region MatTable */
 
-.mat-mdc-table {
-    overflow: auto;
-    width: 100%;
-    border-collapse: separate;
-    table-layout: auto;
-
-    .mat-mdc-header-row,
-    .mat-mdc-row {
-        cursor: default;
+    .mat-mdc-table {
+        overflow: auto;
+        width: 100%;
+        border-collapse: separate;
+        table-layout: auto;
 
-        .mat-mdc-cell,
-        .mat-mdc-header-cell {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            padding-left: 8px;
-            padding-right: 8px;
-            line-height: 1.0rem;
+        .mat-mdc-header-row,
+        .mat-mdc-row {
+            cursor: default;
 
-            &:first-of-type {
-                padding-left: 16px;
-            }
+            .mat-mdc-cell,
+            .mat-mdc-header-cell {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                padding-left: 8px;
+                padding-right: 8px;
+                line-height: 1.0rem;
 
-            &.right {
-                display: flex;
-                justify-content: flex-end;
-                text-align: right;
-            }
+                &:first-of-type {
+                    padding-left: 16px;
+                }
 
-            .mat-sort-header-content {
-                text-align: left;
-                overflow: hidden;
+                &.right {
+                    display: flex;
+                    justify-content: flex-end;
+                    text-align: right;
+                }
 
-                span {
+                .mat-sort-header-content {
+                    text-align: left;
                     overflow: hidden;
-                    text-overflow: ellipsis;
+
+                    span {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                 }
             }
-        }
-
-        .cdk-column-select,
-        .cdk-column-filter-select {
-            width: 46px;
-            max-width: 46px;
-            min-width: 46px !important;
-            padding-left: 4px !important;
-            padding-right: 6px;
-            overflow: initial;
-        }
 
-        .cdk-column-filter-action,
-        .cdk-column-action {
-            width: 48px;
-            max-width: 48px;
-            min-width: 48px !important;
-            margin-right: 8px;
-            padding-right: 0;
+            .cdk-column-select,
+            .cdk-column-filter-select {
+                width: 46px;
+                max-width: 46px;
+                min-width: 46px !important;
+                padding-left: 4px !important;
+                padding-right: 6px;
+                overflow: initial;
+            }
 
-            .mdc-icon-button {
-                width: 42px;
-                height: 42px;
-                padding: 9px
+            .cdk-column-filter-action,
+            .cdk-column-action {
+                width: 48px;
+                max-width: 48px;
+                min-width: 48px !important;
+                margin-right: 8px;
+                padding-right: 0;
+
+                .mdc-icon-button {
+                    width: 42px;
+                    height: 42px;
+                    padding: 9px
+                }
             }
-        }
 
-        .cdk-column-id,
-        .cdk-column-filter-id {
-            width: 75px;
-            max-width: 75px;
-            text-align: right;
-            justify-content: flex-end;
+            .cdk-column-id,
+            .cdk-column-filter-id {
+                width: 75px;
+                max-width: 75px;
+                text-align: right;
+                justify-content: flex-end;
 
-            .vd-table-filter {
-                margin-right: 0px;
+                .vd-table-filter {
+                    margin-right: 0px;
+                }
             }
-        }
 
-        .cdk-column-filter-date,
-        .cdk-column-filter-createdDate,
-        .cdk-column-filter-updatedDate,
-        .cdk-column-date,
-        .cdk-column-createdDate,
-        .cdk-column-updatedDate {
-            width: 104px;
-            max-width: 104px;
-            justify-content: flex-end;
-            text-align: right;
-        }
+            .cdk-column-filter-date,
+            .cdk-column-filter-createdDate,
+            .cdk-column-filter-updatedDate,
+            .cdk-column-date,
+            .cdk-column-createdDate,
+            .cdk-column-updatedDate {
+                width: 104px;
+                max-width: 104px;
+                justify-content: flex-end;
+                text-align: right;
+            }
 
-        mat-form-field {
-            flex: 1;
-            display: flex;
-            align-items: flex-start;
-            width: 100%;
+            mat-form-field {
+                flex: 1;
+                display: flex;
+                align-items: flex-start;
+                width: 100%;
 
-            .mat-mdc-text-field-wrapper {
-                padding: 0 3px;
+                .mat-mdc-text-field-wrapper {
+                    padding: 0 3px;
+                }
             }
-        }
 
-        .mat-mdc-cell {
-            >span {
-                &:empty {
-                    &:after {
-                        content: 'k. A.';
-                        opacity: 0.6;
-                        font-style: italic;
-                        font-size: 0.9em;
+            .mat-mdc-cell {
+                >span {
+                    &:empty {
+                        &:after {
+                            content: 'k. A.';
+                            opacity: 0.6;
+                            font-style: italic;
+                            font-size: 0.9em;
+                        }
                     }
                 }
             }
-        }
 
-        &.succeeded {
-            border-left: 3px solid rgb(0, 167, 64);
-        }
+            &.succeeded {
+                border-left: 3px solid rgb(0, 167, 64);
+            }
 
-        &.warn {
-            border-left: 3px solid rgb(253, 165, 0);
-        }
+            &.warn {
+                border-left: 3px solid rgb(253, 165, 0);
+            }
 
-        &.error {
-            border-left: 3px solid rgba(255, 0, 0, 0.637);
+            &.error {
+                border-left: 3px solid rgba(255, 0, 0, 0.637);
+            }
         }
-    }
 
-    .cdk-column-emptyResult {
-        font-style: italic;
-        color: #8c8c8c;
-    }
+        .cdk-column-emptyResult {
+            font-style: italic;
+            color: #8c8c8c;
+        }
 
-    &[multitemplatedatarows] {
-        .mat-mdc-row {
-            &.expanded-row {
-                .mat-mdc-cell {
-                    border-bottom-width: 0;
-                    background-color: #f6f6f6;
-                }
+        &[multitemplatedatarows] {
+            .mat-mdc-row {
+                &.expanded-row {
+                    .mat-mdc-cell {
+                        border-bottom-width: 0;
+                        background-color: #f6f6f6;
+                    }
 
-                +.detail-row {
-                    background-color: #f6f6f6;
-                    display: table-row;
+                    +.detail-row {
+                        background-color: #f6f6f6;
+                        display: table-row;
 
-                    .mat-mdc-cell {
-                        padding-top: 8px;
-                        padding-bottom: 8px;
+                        .mat-mdc-cell {
+                            padding-top: 8px;
+                            padding-bottom: 8px;
+                        }
                     }
                 }
-            }
 
-            &:not(.expanded-row) {
-                +.detail-row {
-                    display: none;
+                &:not(.expanded-row) {
+                    +.detail-row {
+                        display: none;
 
-                    .mat-mdc-cell {
-                        border-bottom-width: 0;
+                        .mat-mdc-cell {
+                            border-bottom-width: 0;
+                        }
                     }
                 }
-            }
 
-            .element-detail {
-                overflow: hidden;
-                display: flex;
+                .element-detail {
+                    overflow: hidden;
+                    display: flex;
+                }
             }
         }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region MatAutocomplete */
+    /* #region MatAutocomplete */
 
-.mat-mdc-autocomplete-panel {
-    &.table-autocomplete {
-        margin-top: 0px !important;
-        padding: 0 !important;
-        max-height: 400px !important;
+    .mat-mdc-autocomplete-panel {
+        &.table-autocomplete {
+            margin-top: 0px !important;
+            padding: 0 !important;
+            max-height: 400px !important;
+        }
     }
-}
 
-/* #endregion */
+    /* #endregion */
 
-/* #region MatTooltip */
+    /* #region MatTooltip */
 
-.mat-tooltip-multiline {
-    white-space: pre-line !important;
-}
+    .mat-tooltip-multiline {
+        white-space: pre-line !important;
+    }
 
-/* #endregion */
+    /* #endregion */
+}